/* ==========================================================================
   ANUPANA — tokens.css
   --------------------------------------------------------------------------
   Demo site. Fictional clinic. See PLAN.md and DESIGN_SYSTEM.md.

   THIS IS THE ONLY FILE IN THE PROJECT PERMITTED TO CONTAIN LITERAL VALUES.
   Every other stylesheet references these custom properties and nothing else.
   No hex codes, no px, no ms, no cubic-bezier() outside this file.

   Primitives are private plumbing. Components must consume the SEMANTIC
   tokens (--c-ink, --fs-700 …), never the primitives (--forest-900), so a
   palette change stays a one-file change.
   ========================================================================== */

:root {

  /* ======================================================================
     1. COLOUR — PRIMITIVES
     Three families, nothing else. Warm neutral ground, one deep accent,
     one muted secondary. Contrast ratios are measured, not estimated;
     the full table is in DESIGN_SYSTEM.md §2.
     ====================================================================== */

  /* Bone — the warm neutral base. Unbleached-linen bias: every step keeps
     a red-over-blue channel skew so nothing reads as cold grey. */
  --bone-000: #FCFAF6;   /* lifted surface — cards, inset panels          */
  --bone-100: #F5F0E6;   /* PAGE GROUND — the default field              */
  --bone-200: #EBE4D6;   /* alternate band — section change of register  */
  --bone-300: #DED4C1;   /* hairlines, decorative rules, tone block       */
  --bone-400: #C9BCA4;   /* deepest neutral — placeholder imagery only    */

  /* Forest — the one confident deep accent. Carries text at its darkest
     step, so the whole page is quietly tinted by the accent rather than
     sitting on a neutral black. */
  --forest-900: #14251C;  /* primary text                                 */
  --forest-800: #1B3427;  /* dark surfaces, accent pressed state          */
  --forest-600: #2C5340;  /* accent fill, links, secondary text           */
  --forest-400: #4E7C66;  /* LARGE TEXT / DECORATIVE ONLY — 4.20:1        */

  /* Clay — the muted secondary. Terracotta pulled well down in chroma so
     it reads as earth rather than orange. Carries the demo marker. */
  --clay-700: #7A3F2A;   /* secondary text, demo marker ground            */
  --clay-600: #96513A;   /* secondary text on the lightest surfaces       */
  --clay-500: #B06B4E;   /* LARGE TEXT / UI GRAPHICS ONLY — 3.65:1        */
  --clay-300: #DDB79E;   /* tone block, inverse muted text                */
  --clay-100: #F0DED0;   /* tint band                                     */


  /* ======================================================================
     2. COLOUR — SEMANTIC  (components use ONLY these)
     ====================================================================== */

  --c-page: var(--bone-100);
  --c-surface: var(--bone-000);
  --c-surface-sunk: var(--bone-200);
  --c-surface-tint: var(--clay-100);
  --c-surface-deep: var(--forest-900);      /* full-bleed dark bands      */

  --c-ink: var(--forest-900);               /* 14.10:1 on page — AAA     */
  --c-ink-muted: var(--forest-600);         /*  7.65:1 on page — AAA     */
  --c-ink-secondary: var(--clay-700);       /*  7.19:1 on page — AAA     */
  --c-ink-inverse: var(--bone-100);         /* 14.10:1 on deep — AAA     */
  --c-ink-inverse-muted: var(--clay-300);   /*  8.65:1 on deep — AAA     */

  --c-accent: var(--forest-600);
  --c-accent-strong: var(--forest-800);
  --c-on-accent: var(--bone-000);           /*  8.33:1 on accent — AAA   */

  --c-rule: var(--bone-300);                /* decorative hairline only  */
  --c-rule-strong: var(--forest-600);       /* meaningful borders, 7.65  */

  --c-focus: var(--forest-900);             /* focus ring on light       */
  --c-focus-inverse: var(--bone-000);       /* focus ring on dark        */

  --c-marker-bg: var(--clay-700);           /* "Demo site" bar ground    */
  --c-marker-ink: var(--bone-000);          /*  7.83:1 — AAA             */

  /* Imagery placeholders. Solid tones and flat gradients standing in for
     photography at the correct aspect ratio. Documented in §7 of the doc. */
  --tone-linen: var(--bone-300);
  --tone-clay: var(--clay-300);
  --tone-shade: var(--forest-400);
  --tone-grad-room: linear-gradient(158deg, var(--bone-300) 0%, var(--clay-300) 100%);
  --tone-grad-vessel: linear-gradient(196deg, var(--forest-400) 0%, var(--forest-800) 100%);
  --tone-grad-cloth: linear-gradient(148deg, var(--clay-300) 0%, var(--bone-200) 100%);


  /* ======================================================================
     3. TYPE — FAMILIES
     Self-hosted, latin subset, woff2, font-display: swap.
     Instrument Serif ships one weight by design: display hierarchy is
     built from size and space, never from weight.
     ====================================================================== */

  --ff-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype",
                Palatino, Georgia, "Times New Roman", serif;
  --ff-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, Helvetica, Arial, sans-serif;

  /* Not loaded. Declared so the RTL build is a font swap, not a rebuild.
     IBM Plex Sans Arabic is the official metric-compatible sibling. */
  --ff-body-ar: "IBM Plex Sans Arabic", "Noto Naskh Arabic", var(--ff-body);
  --ff-display-ar: "Noto Naskh Arabic", var(--ff-body-ar);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-strong: 600;
  --fw-display: 400;


  /* ======================================================================
     4. TYPE — MODULAR SCALE
     Root 16px. Body 18px (--fs-300). Floor 14px (--fs-100) — nothing in
     the project may go below it.

     The ratio accelerates rather than staying constant: ~1.12 between text
     sizes, widening to ~1.40 at display. A single constant ratio either
     spaces body sizes too far apart or leaves the display sizes too timid.
     Reasoning in DESIGN_SYSTEM.md §3.

     Fluid steps interpolate 320px → 1440px viewport. The clamp minimum is
     always in rem, so browser zoom and user font-size still scale (1.4.4).
     ====================================================================== */

  --fs-100: 0.875rem;                                          /* 14      */
  --fs-200: 1rem;                                              /* 16      */
  --fs-300: 1.125rem;                                          /* 18 BODY */
  --fs-400: 1.25rem;                                           /* 20      */
  --fs-500: 1.5rem;                                            /* 24      */
  --fs-600: clamp(1.625rem, 1.554rem + 0.357vw, 1.875rem);     /* 26→30   */
  --fs-700: clamp(2rem,     1.857rem + 0.714vw, 2.5rem);       /* 32→40   */
  --fs-800: clamp(2.5rem,   2.214rem + 1.429vw, 3.5rem);       /* 40→56   */
  --fs-900: clamp(3.25rem,  2.75rem  + 2.5vw,   5rem);         /* 52→80   */
  --fs-1000: clamp(4rem,    3.143rem + 4.286vw, 7rem);         /* 64→112  */

  --lh-display: 1.02;
  --lh-title: 1.12;
  --lh-heading: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.65;      /* brief floor is 1.6 */
  --lh-loose: 1.8;

  --ls-display: -0.022em;
  --ls-title: -0.014em;
  --ls-heading: -0.008em;
  --ls-body: 0em;
  --ls-caps: 0.14em;    /* 14px label caps only — never on lowercase body */

  /* Measure. Body capped at 68ch, inside the 65–75 band. */
  --measure: 68ch;
  --measure-lede: 52ch;
  --measure-narrow: 40ch;
  --measure-wide: 78ch;  /* lists and tabular blocks only */


  /* ======================================================================
     5. SPACE
     4px base unit, non-linear above --sp-6 so large gaps stay distinct.
     ====================================================================== */

  --sp-1: 0.25rem;    /*   4 */
  --sp-2: 0.5rem;     /*   8 */
  --sp-3: 0.75rem;    /*  12 */
  --sp-4: 1rem;       /*  16 */
  --sp-5: 1.5rem;     /*  24 */
  --sp-6: 2rem;       /*  32 */
  --sp-7: 3rem;       /*  48 */
  --sp-8: 4rem;       /*  64 */
  --sp-9: 6rem;       /*  96 */
  --sp-10: 8rem;      /* 128 */
  --sp-11: 12rem;     /* 192 */
  --sp-12: 16rem;     /* 256 */

  /* Section rhythm. Three registers so consecutive sections can differ in
     vertical weight as well as layout. */
  --space-section-sm: clamp(3.5rem, 2.6rem + 4.5vw, 6rem);     /*  56→96  */
  --space-section: clamp(4.5rem, 2.9rem + 8vw, 10rem);         /*  72→160 */
  --space-section-lg: clamp(7rem, 4.1rem + 14.5vw, 15rem);     /* 112→240 */

  --space-flow: var(--sp-5);   /* default gap between stacked text blocks */
  --space-flow-lg: var(--sp-7);


  /* ======================================================================
     6. LAYOUT
     ====================================================================== */

  --grid-cols: 12;
  --gutter: clamp(1.25rem, 0.9rem + 1.75vw, 2.5rem);   /* 20→40 */
  --container: 84rem;        /* 1344 — outer bound                        */
  --container-narrow: 58rem; /*  928 — long-form column wrapper           */
  --page-inline: clamp(1.25rem, 0.5rem + 3.75vw, 5rem); /* 20→80 page pad */

  --hairline: 1px;
  --rule-weight: 1px;
  --rule-weight-strong: 2px;

  /* The brand is orthogonal. Radius exists to be nearly zero. */
  --radius-0: 0;
  --radius-1: 2px;

  --focus-width: 2px;
  --focus-offset: 3px;

  /* Interactive minimum target (WCAG 2.5.8) and link underline metrics.
     Added in Phase 2 — components needed lengths here and a literal in
     site.css would have broken the one-file rule. */
  --target-min: 2.75rem;        /* 44px */
  --underline-offset: 0.18em;
  --underline-weight: 1px;

  --z-base: 0;
  --z-raised: 10;
  --z-header: 100;
  --z-marker: 200;

  /* Imagery aspect ratios — see DESIGN_SYSTEM.md §7 */
  --ar-portrait: 4 / 5;
  --ar-tall: 2 / 3;
  --ar-landscape: 3 / 2;
  --ar-square: 1 / 1;
  --ar-wide: 16 / 9;


  /* ======================================================================
     7. MOTION
     Restrained and slow. Full spec in DESIGN_SYSTEM.md §6, written before
     any of it was implemented.

     Every motion value in the project resolves through these tokens, which
     means the reduced-motion override at the bottom of this file disables
     the entire motion system from one place. No component opts out
     individually, and none can forget to.
     ====================================================================== */

  --dur-micro: 320ms;   /* colour/underline on hover — the only fast thing */
  --dur-1: 600ms;       /* reveals                                         */
  --dur-2: 750ms;       /* larger elements, image blocks                   */
  --dur-3: 900ms;       /* full-bleed bands, the single longest move       */

  --ease-out-slow: cubic-bezier(0.16, 1, 0.30, 1);      /* decelerate hard */
  --ease-in-out-slow: cubic-bezier(0.65, 0, 0.35, 1);   /* symmetrical     */
  --ease-drift: cubic-bezier(0.25, 0.46, 0.45, 0.94);   /* parallax only   */

  --reveal-shift: 1.25rem;   /* 20px translate distance on reveal          */
  --reveal-stagger: 90ms;    /* between siblings; capped at 5 in JS        */
  --reveal-delay: 0ms;       /* per-element; motion.js overwrites inline   */

  --parallax-near: 18px;     /* element 1 max displacement                 */
  --parallax-far: 10px;      /* element 2 max displacement                 */
  --parallax-lerp: 0.06;     /* pointer follow damping                     */
}


/* ==========================================================================
   REDUCED MOTION
   The complete experience, minus movement. Durations collapse to a value
   that is effectively instant but non-zero, so transitionend still fires
   and nothing hangs waiting for it. Displacement tokens go to zero, so
   reveal targets land at their final position with no transform to undo,
   and the parallax layers sit exactly where the static design puts them.
   assets/js/motion.js also checks this query and never attaches its
   pointer listener, so there is no idle work either.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 1ms;
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --reveal-shift: 0px;
    --reveal-stagger: 0ms;
    --parallax-near: 0px;
    --parallax-far: 0px;
    --parallax-lerp: 0;
  }
}


/* ==========================================================================
   FORCED COLOURS
   Windows High Contrast: surrender the palette, keep the structure. Only
   the tokens that would otherwise fight the OS are reassigned.
   ========================================================================== */

@media (forced-colors: active) {
  :root {
    --c-rule: CanvasText;
    --c-rule-strong: CanvasText;
    --c-focus: Highlight;
    --c-focus-inverse: Highlight;
  }
}