/* ============================================================
   family-tokens.css — shared design tokens for the product family
   (planning · marketing · dropshipper). Canonical source.
   Served at /_family/family-tokens.css — load BEFORE each app's
   own stylesheet so product-specific --brand/--accent overrides win.

   PRODUCT-SPECIFIC (stays local in each app, NOT here):
     --brand, --brand-rgb   (per-product/per-customer identity)
     --accent + variants     (planning teal · marketing purple · dropshipper amber)
   ============================================================ */
:root {
  /* Brand derivations — formula-based, work with any --brand value.
     Kept in sync with --brand at runtime by applyBranding(). */
  --brand-ink: #ffffff;
  --brand-dark:   color-mix(in srgb, var(--brand) 78%, #000 22%);
  --brand-hover:  color-mix(in srgb, var(--brand) 88%, #000 12%);
  --brand-light:  color-mix(in srgb, var(--brand) 70%, #fff 30%);
  --brand-shadow: color-mix(in srgb, var(--brand) 40%, #000 60%);
  --brand-tint:   color-mix(in srgb, var(--brand) 12%, #fff 88%);

  /* Neutrals — cream surface family */
  --bg: #fdfaf4;
  --surface: #ffffff;
  --surface-2: #f7f5f1;
  --ink: #1f1d1a;
  --ink-muted: #555555;
  --ink-dim: #6d6863;
  --line: #e5e2db;
  --line-soft: #ececec;

  /* Status (operational) */
  --status-loading-bg: #fff3cd;
  --status-loading-ink: #856404;
  --status-error-bg: #f8d7da;
  --status-error-ink: #721c24;
  --status-ok-bg: #d4edda;
  --status-ok-ink: #155724;

  /* Typography scale */
  --text-xs:  11px;
  --text-sm:  12px;
  --text-md:  13px;
  --text-lg:  14px;
  --text-xl:  16px;
  --text-2xl: 18px;

  /* Spacing scale (4 / 8 / 12 / 16 / 24 / 32) */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;

  /* Subscription state pills */
  --status-trial-bg:      #fff5e0;
  --status-trial-ink:     #a25e00;
  --status-trial-line:    #f0d99a;
  --status-active-bg:     #e2f6e8;
  --status-active-ink:    #1e7c3a;
  --status-active-line:   #a9dcb7;
  --status-paused-bg:     #fff0e6;
  --status-paused-ink:    #a04e16;
  --status-paused-line:   #f0c8a8;
  --status-cancelled-bg:  #fde3e0;
  --status-cancelled-ink: #a4291b;
  --status-cancelled-line:#efb5ad;
  --status-draft-bg:      #eef0f3;
  --status-draft-ink:     #4b525c;
  --status-draft-line:    #cfd4dc;
  --status-approved-bg:   #d4edda;
  --status-approved-ink:  #155724;
  --status-approved-line: #a9dcb7;

  /* Modal */
  --modal-backdrop: rgba(11, 22, 32, 0.55);
  --modal-radius: 12px;

  /* Layout */
  --header-h: 56px;
  --subnav-h: 46px;
  --footer-h: 38px;
  --radius: 8px;

  /* Type base — rescaled by [data-text-size] */
  --fs-body: 14px;
  --fs-sm: 12px;
  --fs-lg: 16px;

  /* Animation primitives — one easing everywhere */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.2, 1.0, 0.3, 1);
  --dur-enter: 240ms;
  --dur-exit: 160ms;
  --dur-hover: 140ms;
  --dur-fast: 120ms;
}

/* Mobile: dial enter/exit ~25% shorter so transitions feel less laggy on touch */
@media (max-width: 768px) {
  :root {
    --dur-enter: 180ms;
    --dur-exit: 120ms;
    --dur-hover: 105ms;
    --dur-fast: 90ms;
  }
}