/* ==========================================================================
   TOKENS — the single source of truth for every design decision.
   ==========================================================================
   Nothing below this file should contain a raw hex value, a raw px font size,
   or a raw margin. If you find yourself typing a number into base.css or
   components.css, it belongs here first.

   Swapping the typeface is deliberately a one-place edit: change the family,
   then tune --display-weight and --display-opsz until the strokes look right.
   Everything else follows.
   ========================================================================== */

/* Cascade order is declared once, here, and never depends on link order.
   A later layer always wins, so components can never be accidentally
   out-specified by a base rule. */
@layer tokens, base, components;

@layer tokens {
  :root {

    /* ---- Palette -------------------------------------------------------
       Clinical-luxury: a cool pale ground, near-black ink, one loud colour
       (seal green) reserved for result flags and stamps, and a gold used
       ONLY for accreditation marks. Resist adding a fourth accent. */

    --c-paper:      #EFF1EE;   /* page ground — clinic wall */
    --c-card:       #F8F9F7;   /* raised surfaces: panel, tiers */
    --c-ink:        #0E1412;   /* primary text, inverted sections */
    --c-ink-muted:  #4E5854;   /* secondary text — contrast-checked on paper */
    --c-line:       #D2D7D2;   /* hairlines and dividers */
    --c-seal:       #14563C;   /* result flags, stamps, primary hover */
    --c-foil:       #A98B4B;   /* accreditation only, never emphasis */

    /* On the inverted (ink) ground */
    --c-inverse-text:  #9AA69F;
    --c-inverse-head:  var(--c-paper);
    --c-inverse-line:  #2A322E;

    /* ---- Type families -------------------------------------------------
       Three roles, deliberately: a serif that carries the brand, a mono that
       does the clinical/instrument work, and a sans for reading. */

    --font-display: "Newsreader", Georgia, "Times New Roman", serif;
    --font-body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

    /* ---- Type weight and optical size ----------------------------------
       The seam for swapping faces. Variable serifs get thinner as they scale,
       so the optical size is pinned low to keep large text substantial. */

    --display-weight:  600;
    --display-opsz:    14;
    --body-weight:     400;
    --body-weight-med: 500;
    --mono-weight:     400;

    /* ---- Type scale — fluid, one ramp, no ad-hoc sizes ------------------ */

    --text-2xs:  0.625rem;                                  /* table heads */
    --text-xs:   0.6875rem;                                 /* eyebrows, flags */
    --text-sm:   0.75rem;                                   /* buttons, notes */
    --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);   /* body */
    --text-md:   0.9375rem;                                 /* dense body */
    --text-lg:   clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);  /* lede, quotes */
    --text-xl:   clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);   /* day names */
    --text-2xl:  clamp(1.5rem, 1rem + 2.2vw, 2.75rem);      /* thesis */
    --text-3xl:  clamp(2rem, 1.4rem + 2.6vw, 3.25rem);      /* section heads */
    --text-hero: clamp(3.25rem, 1.2rem + 9vw, 9rem);        /* hero only */

    --leading-tight: 1.08;
    --leading-snug:  1.35;
    --leading-body:  1.65;

    --tracking-mono: 0.2em;    /* uppercase mono needs the air */
    --tracking-tight: -0.02em; /* hero display only */

    /* ---- Space scale ---------------------------------------------------- */

    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-sm:  1rem;
    --space-md:  1.5rem;
    --space-lg:  2.5rem;
    --space-xl:  clamp(1.75rem, 3vw, 2.75rem);
    --space-2xl: clamp(2.5rem, 5vw, 4rem);
    --space-3xl: clamp(4rem, 9vw, 7.5rem);   /* section rhythm */

    /* ---- Layout --------------------------------------------------------- */

    --wrap-max:  74rem;
    --gutter:    clamp(1.25rem, 5vw, 4.5rem);
    --measure:   62ch;      /* comfortable reading width */

    --bp-mid:    52rem;     /* documented here; media queries can't read vars */

    /* ---- Lines and motion ----------------------------------------------- */

    --border:      1px solid var(--c-line);
    --border-ink:  1px solid var(--c-ink);
    --radius:      0;       /* the brand has no rounded corners. Keep it that way. */

    --ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
    --duration-fast: 160ms;
    --duration-slow: 520ms;
    --stagger:       70ms;  /* per-row delay when results print in */
  }
}