/* ============================================================================
   WELLFIT · Design Tokens
   tokens.css — the single source of truth for design decisions.

   Adapted from the Wellfit Brand Style Guidelines (v04.22.25). Three layers:
     1) PRIMITIVES   — raw color ramps & scales, never used directly in product
     2) SEMANTIC     — themeable, meaning-based aliases (--bg, --brand, --text…)
     3) COMPONENT    — per-component aliases pull from semantic (kept in site.css)

   Typeface note: the guideline specifies Avenir Next. We do not license it yet,
   so we use DM Sans — the face Wellfit already ships on wellfit.com, so it is
   approved for display. Swap --font-sans here when Avenir is licensed.
   ========================================================================== */

/* ---- Typeface (bundled locally, offline-safe) --------------------------- */
@font-face{font-family:'DM Sans';src:url('../fonts/dmsans.woff2') format('woff2');font-weight:100 1000;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibmplexmono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibmplexmono-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibmplexmono-600.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  /* ====================================================================== */
  /* 1 · PRIMITIVES                                                          */
  /* ====================================================================== */

  /* Blue — PMS 2173 (#0083D5). "Trust, Loyalty, Wisdom." The primary brand
     color, anchored at 600. */
  --blue-50:  #E8F4FC;
  --blue-100: #C7E7FA;
  --blue-200: #93D2F3;
  --blue-300: #57B8EA;
  --blue-400: #259FDF;
  --blue-500: #0A8DD8;
  --blue-600: #0083D5;   /* ← PMS 2173 · brand primary */
  --blue-700: #0E6BAA;
  --blue-800: #14517E;
  --blue-900: #163D5B;

  /* Green — PMS 369 (#62A744). "Growth, Money, Harmony." Wellfit's money
     color; the guideline ties it directly to money & growth, so we surface it
     as a semantic --money below. Anchored at 500. */
  --green-50:  #EFF6E9;
  --green-100: #DAEDCD;
  --green-200: #BEDDA4;
  --green-300: #9DCB78;
  --green-400: #7EB854;
  --green-500: #62A744;   /* ← PMS 369 */
  --green-600: #508E37;
  --green-700: #3F702A;
  --green-800: #315720;
  --green-900: #244016;

  /* Slate — neutral ramp. PMS 445 (#4E5859, "Neutrality, Calm, Balance") is
     the brand neutral; PMS 423 (#888B8C) and PMS 420 (#C6C8C8) from the
     Expanded palette slot in as 500 and 300. Surfaces, borders, and text. */
  --slate-0:   #FFFFFF;
  --slate-25:  #FAFBFB;
  --slate-50:  #F4F7F7;
  --slate-100: #EAEEEE;
  --slate-200: #DCE2E2;   /* hairline borders */
  --slate-300: #C6C8C8;   /* ← PMS 420 (Expanded) */
  --slate-400: #A7ACAC;
  --slate-500: #888B8C;   /* ← PMS 423 (Expanded) */
  --slate-600: #626B6B;   /* muted text */
  --slate-700: #4E5859;   /* ← PMS 445 · brand neutral */
  --slate-800: #363D3D;
  --slate-900: #1F2524;   /* ink */

  /* Secondary palette — "Contemporary, Joy, Happiness, Energy." Vitality
     accents. Used sparingly, on white space (per the guideline). */
  --yellow:  #FCD602;   /* PMS Y012 */
  --orange:  #FAA21B;   /* PMS 137  */
  --sky:     #95D3E9;   /* PMS 2975 */
  --cyan:    #48C1E1;   /* PMS 637  */
  --teal:    #3EBDAD;   /* PMS 7465 */
  --mint:    #91D3CA;   /* PMS 332  */

  /* Expanded palette — used to emphasize products & keep compositions modern. */
  --navy:      #216092; /* PMS 647 */
  --teal-deep: #109AA9; /* PMS 320 */

  /* Danger — NOT defined in the current brand guideline. Placeholder for a
     destructive/error state pending a brand decision. Flagged, not invented
     into the brand. */
  --red-pending: #D14B45;

  /* ====================================================================== */
  /* 2 · SEMANTIC (themeable)                                                */
  /* ====================================================================== */

  /* Surfaces & text */
  --bg:            var(--slate-25);
  --surface:       var(--slate-0);
  --surface-2:     var(--slate-50);
  --surface-sunken:var(--slate-100);
  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --text:          var(--slate-900);
  --text-muted:    var(--slate-600);
  --text-subtle:   var(--slate-500);
  --text-inverse:  var(--slate-0);

  /* --brand* = IDENTITY (the Wellfit blue). Never repurposed for status. */
  --brand:         var(--blue-600);
  --brand-hover:   var(--blue-700);
  --brand-ink:     var(--blue-700);   /* brand blue safe as text-on-light */
  --brand-soft:    var(--blue-50);
  --brand-contrast:#FFFFFF;

  /* --accent* = FUNCTIONAL UI (actions, controls, links). Defaults one step
     deeper than brand: white-on-blue-600 is only 4.03:1, blue-700 passes AA. */
  --accent:         var(--blue-700);
  --accent-hover:   var(--blue-800);
  --accent-ink:     var(--blue-700);
  --accent-soft:    var(--blue-50);
  --accent-contrast:#FFFFFF;

  /* --money* = the green that the guideline ties to money & growth. Wellfit-
     specific semantic for positive financial values, savings, approvals. */
  --money:      var(--green-500);
  --money-ink:  var(--green-700);
  --money-soft: var(--green-50);
  --money-fill:     #4A8232;   /* filled controls: brightest money green that passes AA with white (4.64) */
  --money-fill-hover:var(--green-700);
  --money-contrast: #FFFFFF;

  /* Status — mapped to brand colors where the guideline provides them. */
  --success:      var(--green-600); --success-soft: var(--green-50);  --success-ink: var(--green-700);  --success-border:#CFE6C2;
  --info:         var(--blue-600);  --info-soft:    var(--blue-50);   --info-ink:    var(--blue-700);   --info-border:#CFE3F5;
  --warning:      var(--orange);    --warning-soft: #FDF1DC;          --warning-ink: #97600A;           --warning-border:#F3E0BB;
  --danger:       var(--red-pending); --danger-soft:#FBE9E8;          --danger-ink:  #98302B;           --danger-border:#F3CDC9; /* pending brand */
  --critical:     #D6382E;   /* vivid urgency text — brightest red that passes AA (4.70 on surface) */

  /* --route* = product-route hues for the composed money views (see ux-discovery).
     Routes identify WHICH product money rides — they are labels, not status. */
  --route-payment:     var(--blue-700);
  --route-payment-soft:var(--blue-50);
  --route-financing:     var(--navy);
  --route-financing-soft:#EAF1F7;
  --route-arrangement:     #0C6570;   /* teal-deep darkened: PMS320 was 3.02:1 on its soft */
  --route-arrangement-soft:#E7F5F7;
  --route-plan:     var(--green-700);
  --route-plan-soft:var(--green-50);
  /* fills = graphics (meters, bars, funnels): maximally separated luminance
     steps, all core brand. Chips keep the darker AA inks above. */
  --route-payment-fill:     var(--blue-500);
  --route-financing-fill:   var(--blue-900);
  --route-arrangement-fill: var(--teal-deep);
  --route-plan-fill:        var(--green-500);

  /* AR aging ramp = graphics-only severity scale (traditional yellow->orange->red;
     bright on purpose — not in Wellfit brand guidelines, so it is ours to define).
     90+ reuses --critical so "oldest" and "urgent" share one red. */
  --aging-current: #CDD5DC;
  --aging-30:      #FACC15;
  --aging-60:      #F59E0B;
  --aging-90:      #ED5C0C;
  --aging-max:     var(--critical);

  --focus-ring:   0 0 0 3px rgba(0,131,213,.30);

  /* ====================================================================== */
  /* 3 · TYPOGRAPHY                                                          */
  /* ====================================================================== */
  /* Guideline: Avenir Next (Black=headlines, Heavy=subheads, Book=body).
     Substituted with DM Sans (see header note). Weight mapping below. */
  --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-sans:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* optional: tabular numerics */

  /* Type scale — modular, ratio ≈ 1.25 (major third), anchored at 16px. */
  --text-xs:   0.75rem;    /* 12 · caption / legal */
  --text-sm:   0.875rem;   /* 14 · secondary */
  --text-base: 1rem;       /* 16 · body (Avenir Book → DM Sans 400) */
  --text-md:   1.125rem;   /* 18 · lead body */
  --text-lg:   1.3125rem;  /* 21 · subhead (→ DM Sans 600) */
  --text-xl:   1.625rem;   /* 26 · H3 */
  --text-2xl:  2rem;       /* 32 · H2 */
  --text-3xl:  2.5rem;     /* 40 · H1 */
  --text-4xl:  3.25rem;    /* 52 · display (Avenir Black → DM Sans 700) */

  --weight-regular: 400;   /* body */
  --weight-medium:  500;
  --weight-semibold:600;   /* subheads */
  --weight-bold:    700;   /* headlines / display */

  --leading-tight:  1.15;  /* display */
  --leading-snug:   1.3;   /* headings */
  --leading-normal: 1.5;   /* UI */
  --leading-relaxed:1.65;  /* body prose */

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.08em;

  /* ====================================================================== */
  /* 4 · SPACE — 4px base ladder                                             */
  /* ====================================================================== */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 · base unit */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */

  /* ====================================================================== */
  /* 5 · RADIUS — the brand reads soft & rounded (logo, web)                 */
  /* ====================================================================== */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill:999px;

  /* ====================================================================== */
  /* 6 · ELEVATION — tinted with the brand blue, never neutral grey         */
  /* ====================================================================== */
  --shadow-xs: 0 1px 2px rgba(33,96,146,.05);
  --shadow-sm: 0 1px 3px rgba(33,96,146,.07), 0 1px 2px rgba(33,96,146,.04);
  --shadow-md: 0 4px 14px rgba(33,96,146,.08), 0 2px 4px rgba(33,96,146,.04);
  --shadow-lg: 0 14px 38px rgba(33,96,146,.13), 0 4px 10px rgba(33,96,146,.06);

  /* ====================================================================== */
  /* 7 · MOTION                                                             */
  /* ====================================================================== */
  --ease:      cubic-bezier(.2,.6,.2,1);
  --ease-out:  cubic-bezier(.16,.84,.44,1);
  --dur-fast:  120ms;
  --dur:       170ms;
  --dur-slow:  260ms;

  /* ====================================================================== */
  /* 8 · LAYOUT                                                             */
  /* ====================================================================== */
  --content-max: 880px;
  --sidebar-w:   268px;
  --border-w-1:  1px;
  --border-w-2:  2px;
  --border-w-3:  3px;   /* left-rail status accents, focus inset */

  /* ---- 9 · ICONS — line icons, 2px stroke, currentColor ---------------- */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;

  /* ---- 10 · LAYERING — one documented stacking order ------------------- */
  --z-sticky:  50;
  --z-drawer:  400;
  --z-overlay: 500;   /* modal scrim */
  --z-modal:   510;
  --z-toast:   700;   /* always on top */

  /* ---- 11 · HOST CONTEXTS — the five surfaces (see ux-discovery 03) ---- */
  --rail-w:  360px;   /* Schedule Bridge / extension overlay rail */
  --phone-w: 340px;   /* patient phone sheet frame */
}

/* ============================================================================
   DARK THEME — only the SEMANTIC layer flips; primitives stay fixed.
   Scope with <html data-theme="dark"> or any container for a scoped flip.
   Proof of the three-layer architecture: components need zero changes.
   ========================================================================== */
[data-theme="dark"]{
  --bg:            #131A1E;
  --surface:       #1A2329;
  --surface-2:     #202B32;
  --surface-sunken:#0E1518;
  --border:        #2B3840;
  --border-strong: #3A4A54;
  --text:          #ECF2F4;
  --text-muted:    #9FB0B8;
  --text-subtle:   #7A8C94;
  --text-inverse:  var(--slate-900);

  --brand:         var(--blue-400);
  --brand-hover:   var(--blue-300);
  --brand-ink:     var(--blue-300);
  --brand-soft:    #12293B;
  --brand-contrast:#0B1216;

  --accent:         var(--blue-400);
  --accent-hover:   var(--blue-300);
  --accent-ink:     var(--blue-300);
  --accent-soft:    #12293B;
  --accent-contrast:#0B1216;

  --money:      var(--green-400);
  --money-ink:  var(--green-300);
  --money-soft: #1B2A14;
  --money-fill:     #4A8232;   /* same fill both themes; 3.44 vs dark surface */
  --money-fill-hover:var(--green-700);
  --money-contrast: #FFFFFF;

  --success:      var(--green-400); --success-soft:#172512; --success-ink:var(--green-300); --success-border:#2C4522;
  --info:         var(--blue-400);  --info-soft:   #12293B; --info-ink:   var(--blue-300);  --info-border:#1E4260;
  --warning:      var(--orange);    --warning-soft:#33270F; --warning-ink:#F3C36B;          --warning-border:#4A3A16;
  --danger:       #E06A64;          --danger-soft: #3A1D1B; --danger-ink: #F0A19C;          --danger-border:#542B28;
  --critical:     #F2726A;

  --route-payment:     var(--blue-300);  --route-payment-soft:    #12293B;
  --route-financing:   #7FB1D8;          --route-financing-soft:  #16283A;
  --route-arrangement: #5FC4D2;          --route-arrangement-soft:#0F2E33;
  --route-plan:        var(--green-300); --route-plan-soft:       #1B2A14;
  --route-payment-fill:     var(--blue-400);
  --route-financing-fill:   #7FB1D8;
  --route-arrangement-fill: #2FA9B8;
  --route-plan-fill:        var(--green-400);

  --aging-current: #46525C;
  --aging-30:      #E3BC24;
  --aging-60:      #E09312;
  --aging-90:      #E0621E;
  --aging-max:     var(--critical);

  --focus-ring: 0 0 0 3px rgba(37,159,223,.40);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.30);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --shadow-md: 0 4px 14px rgba(0,0,0,.40), 0 2px 4px rgba(0,0,0,.28);
  --shadow-lg: 0 14px 38px rgba(0,0,0,.50), 0 4px 10px rgba(0,0,0,.32);
}

/* ============================================================================
   COMPOSITE · docs-site tokens (v2 only — the product never reads these)
   ========================================================================== */
:root{
  --topbar-h: 56px;
  --z-topbar: 60;
  --z-sidebar: 55;
}

/* ============================================================================
   HIGH-CONTRAST (AAA) MODE — data-contrast="aaa" on <html>.
   Like dark mode, only semantic tokens move; components are untouched.
   ========================================================================== */
[data-contrast="aaa"]{
  --text-muted:  var(--slate-700);
  --text-subtle: var(--slate-600);
  --border:        var(--slate-400);
  --border-strong: var(--slate-600);
  --accent-ink: var(--blue-800);
  --brand-ink:  var(--blue-800);
  --money-ink:  var(--green-800);
  --success-ink:var(--green-800);
  --info-ink:   var(--blue-800);
  --warning-ink:#7A4E08;
  --danger-ink: #7E2722;
  --critical:   #98302B;
  --accent:       var(--blue-800);
  --accent-hover: var(--blue-900);
  --money-fill:   var(--green-800);   /* white ≥ 7:1 (8.35) */
  --focus-ring: 0 0 0 3px var(--blue-800);
}
[data-theme="dark"][data-contrast="aaa"]{
  --text-muted:  #C9D4D9;
  --text-subtle: #AAB8BF;
  --border:        #4A5B64;
  --border-strong: #64787F;
  --accent-ink: var(--blue-200);
  --brand-ink:  var(--blue-200);
  --money-ink:  var(--green-200);
  --success-ink:var(--green-200);
  --info-ink:   var(--blue-200);
  --warning-ink:#F8D89A;
  --danger-ink: #F6BCB8;
  --money-fill: var(--green-800);
  --focus-ring: 0 0 0 3px var(--blue-200);
}