/* tokens.css — BLS Dental Blueprint LP
   Single source of truth for design decisions. Paired with DESIGN_TOKENS.md.
   Palette pulled directly from blueladderstrategies.com site CSS (2026-04-21).
*/

@layer tokens {
  :root {
    color-scheme: light;

    /* ------ INK (navy scale — from BLS brand CSS) ------
       #055187  · primary blue
       #1C4277  · wordmark navy
       #18476e  · deeper navy
       #2c3345  · slate
       #565A7C  · muted slate-blue
       #8CA5BD  · light blue accent
       #EBEEF2  · soft blue-gray
       #0A0F1C  · near-black with blue cast */
    --ink-950: #0A0F1C;   /* BLS deepest */
    --ink-900: #111828;   /* dark blend */
    --ink-800: #1C4277;   /* BLS wordmark navy */
    --ink-700: #18476e;   /* BLS deep navy */
    --ink-600: #055187;   /* BLS primary blue — hero of the system */
    --ink-500: #2c3345;   /* slate */
    --ink-400: #565A7C;   /* muted slate-blue */
    --ink-300: #8CA5BD;   /* light blue accent */
    --ink-200: #B6C2D2;   /* soft divider */
    --ink-100: #EBEEF2;   /* lightest border */

    /* ------ SURFACE (cool whites aligned with BLS site) ------
       Keeping the --bone-* token names for backward compat across CSS files,
       but the values are cool-white to match BLS's clean clinical palette. */
    --bone-50:  #FFFFFF;  /* pure white bg */
    --bone-100: #F8F9FC;  /* section-alt tint */
    --bone-200: #F6F6FF;  /* panel pale blue-white */
    --bone-300: #EBEEF2;  /* separator */
    --bone-400: #B6C2D2;  /* strong */

    /* ------ SIGNAL (was copper — now BLS primary blue)
       'signal' semantics retained; value now points to BLS #055187.
       This is the accent color — CTAs, italic em highlights, charts. */
    --signal-100: #EBEEF2;
    --signal-300: #8CA5BD;
    --signal-500: #055187;   /* BLS primary blue */
    --signal-600: #033E66;   /* BLS primary blue, hover */

    /* ------ PULSE (links — same BLS family) ------ */
    --pulse-100: #EBEEF2;
    --pulse-500: #1C4277;    /* BLS navy wordmark for links */
    --pulse-600: #0A2B54;    /* darker link hover */

    /* ------ SEMANTIC ------ */
    --fg:           var(--ink-900);
    --fg-muted:     var(--ink-400);
    --fg-subtle:    var(--ink-300);
    --fg-onDark:    var(--bone-50);
    --fg-onDark-muted: var(--ink-300);
    --bg:           var(--bone-50);
    --bg-alt:       var(--bone-100);
    --bg-panel:     var(--bone-200);
    --bg-elevated:  #FFFFFF;
    --bg-inverse:   var(--ink-950);
    --border:       var(--ink-100);
    --border-strong: var(--ink-200);
    --border-onDark: rgba(235,238,242,0.14);
    --accent:       var(--signal-500);
    --accent-hover: var(--signal-600);
    --accent-soft:  var(--signal-100);
    --link:         var(--pulse-500);
    --link-hover:   var(--pulse-600);

    /* ------ TYPOGRAPHY ------ */
    --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
    --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    /* Fluid type scale — clamp(min, preferred, max) */
    --fs-xs:   0.8125rem;
    --fs-sm:   clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
    --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --fs-md:   clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
    --fs-lg:   clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);
    --fs-xl:   clamp(1.75rem, 1.5rem + 1.2vw, 2.125rem);
    --fs-2xl:  clamp(2.125rem, 1.75rem + 1.8vw, 2.75rem);
    --fs-3xl:  clamp(2.75rem, 2rem + 3.6vw, 4rem);
    --fs-4xl:  clamp(3.5rem, 2.5rem + 5vw, 6rem);
    --fs-5xl:  clamp(4.5rem, 3rem + 7vw, 8rem);

    --lh-tight:   1.05;
    --lh-snug:    1.2;
    --lh-normal:  1.5;
    --lh-relaxed: 1.7;

    --tr-tight:  -0.03em;
    --tr-normal: 0;
    --tr-wide:   0.08em;
    --tr-loose:  0.16em;

    /* ------ SPACE (8-based) ------ */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;
    --s-10: 8rem;
    --s-11: 12rem;

    /* ------ CONTAINER WIDTHS ------ */
    --w-prose:  62ch;
    --w-narrow: 760px;
    --w-medium: 1080px;
    --w-wide:   1280px;
    --w-edge:   1440px;

    /* ------ RADIUS ------ */
    --r-0:    0px;
    --r-sm:   4px;
    --r-md:   12px;
    --r-pill: 999px;

    /* ------ SHADOW (now tuned for navy ink, not warm) ------ */
    --sh-close: 0 1px 0 0 rgba(10,15,28,0.06), 0 1px 2px 0 rgba(10,15,28,0.04);
    --sh-mid:   0 4px 16px -4px rgba(10,15,28,0.08), 0 8px 32px -8px rgba(10,15,28,0.06);
    --sh-far:   0 24px 60px -12px rgba(10,15,28,0.18), 0 48px 100px -24px rgba(10,15,28,0.12);
    --sh-ring:  0 0 0 1px rgba(10,15,28,0.06);

    /* ------ MOTION ------ */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-inOut:  cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    --dur-micro:    180ms;
    --dur-short:    280ms;
    --dur-standard: 480ms;
    --dur-emphatic: 800ms;

    /* ------ HEADER ------ */
    --header-h: 64px;
  }
}