/* ==========================================================================
   FRESH DENTAL SOLUTIONS — DESIGN TOKENS  ("Clinical Editorial")
   ==========================================================================
   Every color, size, radius, shadow, motion curve and z-index the rest of
   the system draws from. Nothing here renders anything by itself.

   Rules for every other CSS file:
   - Reference SEMANTIC tokens (--bg, --text, --brand, --border, …) only.
     The raw ramps (--ink-*, --brand-*, --cyan-*, --mint-*) exist so the
     semantic layer has values to point at — don't reach past it.
   - Every semantic color is defined once on bare :root (light palette,
     first-definition rule for theme-aware pages), then re-pointed under the
     two dark-mode guards below. Never give a token its only definition
     inside a media query or [data-theme] block.
   ========================================================================== */

:root {
  /* ---- Ink ramp: cool blue-cast neutrals (NOT pure gray) ---------------- */
  --ink-900: #08161f;
  --ink-800: #0f2333;
  --ink-700: #1b3548;
  --ink-600: #2c4a60;
  --ink-500: #46647c;
  --ink-400: #6b8599;
  --ink-300: #9db2c0;
  --ink-200: #c7d5dd;
  --ink-100: #e3ebef;
  --ink-50:  #f3f7f9;

  /* ---- Brand ramp: derived from the one hue that survives, #0066cc ----- */
  --brand-900: #001f40;
  --brand-800: #003666;
  --brand-700: #0052a3;
  --brand-600: #0066cc; /* the brand hue itself — do not change */
  --brand-500: #2f7cd6;
  --brand-400: #4d94e0;
  --brand-300: #8dbdf0;
  --brand-200: #bcd8f5;
  --brand-100: #dcebfa;
  --brand-50:  #eef6fd;

  /* ---- Cyan: the second surviving hue, #00a8cc — decorative, not text -- */
  --cyan-700: #007c99;
  --cyan-600: #00a8cc; /* the brand hue itself — do not change */
  --cyan-400: #33c2e0;
  --cyan-200: #a6e6f2;
  --cyan-100: #d6f4fa;

  /* ---- Mint: the third surviving hue, #00cc99 — decorative, not text --- */
  --mint-800: #017a56; /* the only mint dark enough to be TEXT on white */
  --mint-700: #00996f;
  --mint-600: #00cc99; /* the brand hue itself — do not change */
  --mint-400: #33dbb0;
  --mint-200: #a6f2dd;
  --mint-100: #d6faf0;

  /* ---- Pink: the POP. Not a fourth brand hue — an accent with a budget --
     Deliberately off-palette (the other three hues are all blue-green), so
     it can only ever read as a deliberate highlight. See --pop below for
     the spend rule; markup-adjacent CSS never touches these steps. */
  --pink-900: #4a0227;
  --pink-800: #7a0642;
  --pink-700: #a80d5c;
  --pink-600: #d81b74; /* the pop hue — 4.85:1 on white, safe as text */
  --pink-500: #ea4a92;
  --pink-400: #f56fa9;
  --pink-300: #fb9cc4;
  --pink-200: #fdc4dc;
  --pink-100: #fee0eb;
  --pink-50:  #fff0f5;

  /* ---- Semantic surfaces (LIGHT palette — the required first def.) ----- */
  --bg:            #ffffff;
  --bg-subtle:     var(--ink-50);
  --bg-raised:     #ffffff;
  --surface:       #ffffff;
  --scrim:         rgba(8, 22, 31, 0.45);

  /* ---- Semantic text ----------------------------------------------------*/
  --text:          var(--ink-900); /* 18.3:1 on --bg */
  --text-muted:    var(--ink-600); /* 9.3:1 on --bg */
  --text-faint:    var(--ink-500); /* 6.2:1 on --bg */

  /* ---- Semantic borders --------------------------------------------------*/
  --border:        var(--ink-200);
  --border-strong: var(--ink-400); /* 3.9:1 vs --bg, meets 3:1 UI boundary */

  /* ---- Semantic brand ----------------------------------------------------*/
  --brand:          var(--brand-600); /* 5.6:1 on --bg — safe as link text */
  --brand-hover:    var(--brand-700);
  /* Link text is its own token so it can be lightened for dark mode WITHOUT
     touching --brand, which is a FILL (buttons, the mode switch). In dark,
     --brand-400 reads 5.8:1 on --bg but only 4.02:1 on --bg-raised, which is
     what every .card uses — so card links failed AA. */
  --link:           var(--brand);
  --link-hover:     var(--brand-hover);
  --brand-contrast: #ffffff;          /* text placed ON a --brand fill */
  --focus:          var(--brand-600);

  /* ---- Semantic accent surfaces / accent text ----------------------------
     These two exist because components kept reaching for raw ramp steps
     (--brand-50 for the icon tile, --mint-700 for category labels). A raw
     step is a FIXED value: it cannot re-point in dark mode, so those became
     a glaring near-white tile and a 3.5:1 label on the dark theme. Anything
     that needs "a tint of brand" or "the mint label colour" uses these. */
  --surface-accent: var(--brand-50);  /* tinted fill: icon tiles, brand badge */
  --accent-text:    var(--mint-800);  /* 5.4:1 on --bg, 5.0:1 on --bg-subtle.
                                         --mint-700 was only 3.6:1 / 3.4:1 —
                                         these labels are 13px bold, which is
                                         NOT "large text", so they need 4.5. */

  /* ---- Semantic status ---------------------------------------------------*/
  --danger:    #c0392b; /* 5.4:1 on --bg */
  --danger-bg: #fbeae8;
  --warn:      #9a6300; /* 5.1:1 on --bg */
  --warn-bg:   #fbf1dc;
  --ok:        #00875f; /* 4.5:1 on --bg */
  --ok-bg:     #e3f6ee;

  /* ---- Decorative-only accents (never use for text) ----------------------*/
  --cyan: var(--cyan-600);
  --mint: var(--mint-600);
  --grad-fresh: linear-gradient(90deg, var(--cyan), var(--mint));

  /* ---- The POP, and its budget -------------------------------------------
     One accent, spent rarely, so it never stops being an accent.

     THE RULE, and it is the important part: the pop is ADDITIVE. It never
     repaints an element that already carries brand. The blue/cyan/mint
     identity is settled — --grad-fresh, the hero signature rule, links,
     buttons, focus, ::selection and status all stay exactly as they are.
     Pink goes only on things that had no brand colour to begin with.
     (Learned the hard way: it was briefly put on the home hero's signature
     mark and on ::selection, both of which were brand. On an otherwise
     entirely blue-green page a lone magenta stub reads as a mistake, not
     as an accent.)

     Beyond that: AT MOST ONE POP PER VIEWPORT, and never for body text,
     links, focus rings, buttons, status, or --grad-fresh. Current homes:
       1. .badge-pop                    (components.css) — one flag at a time
       2. .mode-switch's live-mode dot  (modes.css) — only while chat/voice/
          mcp is actually running, on a control that had no accent before
     Anywhere new needs a deliberate decision, not a drive-by. --pop is
     text-safe on --bg in both themes; --pop-strong is the higher-contrast
     step for small text on a --pop-soft tint. */
  --pop:          var(--pink-600); /* 4.85:1 on --bg */
  --pop-strong:   var(--pink-800); /* 8.8:1 on --pop-soft */
  --pop-soft:     var(--pink-100);
  --pop-contrast: #ffffff;         /* text placed ON a --pop fill */

  /* ---- Type -------------------------------------------------------------*/
  --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
  --font-body:    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid scale, ~1.25 minor-third step, body targets ~17px */
  --fs-xs:  clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm:  clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --fs-md:  clamp(1rem, 0.96rem + 0.25vw, 1.0625rem);
  --fs-lg:  clamp(1.125rem, 1.07rem + 0.3vw, 1.25rem);
  --fs-xl:  clamp(1.375rem, 1.28rem + 0.5vw, 1.5625rem);
  --fs-2xl: clamp(1.75rem, 1.55rem + 1vw, 2rem);
  --fs-3xl: clamp(2.125rem, 1.8rem + 1.6vw, 2.5rem);
  --fs-4xl: clamp(2.625rem, 2.1rem + 2.6vw, 3.25rem);
  --fs-5xl: clamp(3.25rem, 2.4rem + 4vw, 4.25rem);

  --lh-tight: 1.08;
  --lh-heading: 1.15;
  --lh-body: 1.65;
  --tracking-tight: -0.02em;

  --measure: 68ch; /* prose line length cap */

  /* ---- Space, 4px base ----------------------------------------------------*/
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-7:  1.75rem;
  --s-8:  2rem;
  --s-9:  2.25rem;
  --s-10: 2.5rem;
  --s-11: 2.75rem;
  --s-12: 3rem;
  --s-13: 3.25rem;
  --s-14: 3.5rem;
  --s-15: 3.75rem;
  --s-16: 4rem;

  /* ---- Radius ---------------------------------------------------------- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-full: 999px;

  /* ---- Shadow: restrained, cool-tinted, never heavy --------------------- */
  --shadow-sm: 0 1px 2px rgba(8, 22, 31, 0.06);
  --shadow-md: 0 2px 8px rgba(8, 22, 31, 0.08), 0 1px 2px rgba(8, 22, 31, 0.04);
  --shadow-lg: 0 12px 32px rgba(8, 22, 31, 0.12), 0 2px 6px rgba(8, 22, 31, 0.05);

  /* ---- Layout ------------------------------------------------------------*/
  --container: 1180px;
  --container-narrow: 46rem;
  --gutter: clamp(1rem, 4vw + 0.5rem, 2.5rem);
  /* Rendered .nav height is ~74-76px at both mobile and desktop widths (see
     the nav-drawer row fix in components.css, which keeps it stable across
     breakpoints) — 5rem (80px) clears it with a small safety margin. Drives
     both the top offset that keeps page content (and every <h1>) out from
     under the fixed nav, and the scroll-padding-top that keeps in-page
     anchors landing below it instead of underneath it. */
  --nav-h: 5rem;

  /* ---- Motion ------------------------------------------------------------*/
  --ease-out:    cubic-bezier(.2, .7, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --t-fast:  120ms;
  --t:       200ms;
  --t-slow:  360ms;

  /* ---- Z-index scale -------------------------------------------------------*/
  --z-dropdown: 900;
  --z-nav:      1000;
  --z-drawer:   1100;
  --z-overlay:  1200;
  --z-toast:    1300;
}

/* ---- Dark mode: system preference, unless an explicit light choice wins - */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        var(--ink-900);
    --bg-subtle: var(--ink-800);
    --bg-raised: var(--ink-700);
    --surface:   var(--ink-800);
    --scrim:     rgba(0, 0, 0, 0.6);

    --text:       var(--ink-50);
    --text-muted: var(--ink-200);
    --text-faint: var(--ink-300);

    --border:        var(--ink-700);
    --border-strong: var(--ink-400);

    --brand:          var(--brand-400); /* 5.8:1 on dark --bg, safe as link text */
    --brand-hover:    var(--brand-300);
    --brand-contrast: var(--ink-900);   /* dark text reads on the lighter dark-mode brand fill */
    --focus:          var(--brand-400);
    --link:           #79b2ea; /* 8.2:1 on --bg, 5.7:1 on --bg-raised (cards) */
    --link-hover:     var(--brand-300);

    --surface-accent: #12304a;         /* reads as a tint above the dark card */
    --accent-text:    var(--mint-400); /* 9.1:1 on --bg-subtle, 7.2:1 on raised */

    --pop:          var(--pink-400); /* 6.8:1 on dark --bg */
    --pop-strong:   var(--pink-100); /* 13.7:1 on the dark --pop-soft */
    --pop-soft:     #3a0a22;
    --pop-contrast: var(--ink-900);

    --danger:    #ff6b5b;
    --danger-bg: #3a1512;
    --warn:      #f0b93d;
    --warn-bg:   #332405;
    --ok:        #3ddba3;
    --ok-bg:     #052e22;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
  }
}

/* ---- Dark mode: explicit toggle, wins over system preference either way - */
:root[data-theme="dark"] {
  --bg:        var(--ink-900);
  --bg-subtle: var(--ink-800);
  --bg-raised: var(--ink-700);
  --surface:   var(--ink-800);
  --scrim:     rgba(0, 0, 0, 0.6);

  --text:       var(--ink-50);
  --text-muted: var(--ink-200);
  --text-faint: var(--ink-300);

  --border:        var(--ink-700);
  --border-strong: var(--ink-400);

  --brand:          var(--brand-400);
  --brand-hover:    var(--brand-300);
  --brand-contrast: var(--ink-900);
  --focus:          var(--brand-400);
  --link:           #79b2ea;
  --link-hover:     var(--brand-300);

  --surface-accent: #12304a;
  --accent-text:    var(--mint-400);

  --pop:          var(--pink-400);
  --pop-strong:   var(--pink-100);
  --pop-soft:     #3a0a22;
  --pop-contrast: var(--ink-900);

  --danger:    #ff6b5b;
  --danger-bg: #3a1512;
  --warn:      #f0b93d;
  --warn-bg:   #332405;
  --ok:        #3ddba3;
  --ok-bg:     #052e22;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
}