/* ==========================================================================
   TRJ Technology — design tokens
   --------------------------------------------------------------------------
   Transcribed from design-reference/README.md ("Design tokens") and measured
   against the four v2 prototypes. That README is the source of truth for
   everything visual; when it and this file disagree, the README is right and
   this file is a bug.

   This is the ONLY file in the project permitted to contain a literal colour
   value. Everything in site.css must reference a custom property declared
   here. If you need a new colour, it belongs in the design, not in a rule.

   Warm editorial: one serif voice, one orange. An earlier direction paired
   Inter with JetBrains Mono on cold teal; it was rejected, and none of it may
   reappear. tools/validate-static.py fails the build if it does.
   ========================================================================== */

:root {
  /* ---- Colour: light ground --------------------------------------------- */
  --ink: #1B1917;              /* body text, wordmark, emphasis borders       */
  --paper: #FBF9F5;            /* page ground, cards on subtle sections       */
  --subtle: #F4F0E9;           /* alternating grounds, recessed cards         */
  --hairline: #E4DDD3;         /* every 1px border and rule                   */
  --muted: #6E655C;            /* secondary text — 5.1:1 on paper             */
  --accent: #B0551F;           /* eyebrows, labels, links, primary fill       */
  --accent-hover: #8F4215;     /* primary button hover                        */
  --accent-active: #74340F;    /* primary button active                       */
  --error: #A32B22;            /* field error border, label, message — 6.4:1  */

  /* ---- Colour: dark ground (the proof band) ------------------------------ */
  --dark-ground: #211E1A;
  --dark-body: #C6BCAE;        /* body text on the dark band                  */
  --dark-hairline: #3A342D;
  --dark-placeholder: #4A433A; /* the pending 00 figures                      */
  --dark-muted: #9C9184;       /* eyebrow and labels on dark                  */
  --accent-lift: #F0A878;      /* accent on dark — role labels, NOW, links    */

  /* ---- Derived: accent text on the tinted ground -------------------------
     The design verifies --accent at 5.7:1 on --paper, which is correct. On
     --subtle it measures 4.43:1, which misses AA for normal text by a hair.
     Rather than lighten or darken the brand colour, accent TEXT sitting on a
     --subtle ground uses the palette's existing darker accent, which measures
     6.25:1 there. The brand accent is unchanged and still does every fill,
     border, and rule.

       --accent        on --paper  ....... 5.70:1  → AA
       --accent        on --subtle ....... 4.43:1  → fails AA for normal text
       --accent-hover  on --subtle ....... 6.25:1  → AA, comfortably

     Rule of thumb: --accent for fills, borders and rules anywhere; for accent
     text, --accent on paper and --accent-on-subtle on a tinted panel. */
  --accent-on-subtle: var(--accent-hover);

  /* ---- Colour: controls -------------------------------------------------- */
  --input-surface: #FFFFFF;    /* form fields only — pure white against paper */
  --button-text: #FFFBF7;      /* text on accent fills                        */
  --disabled-text: #A79C8E;    /* on a --subtle fill with a hairline border   */

  /* The one permitted shadow on the entire site. Everything else is a rule. */
  --focus-ring: 0 0 0 3px rgba(176, 85, 31, 0.14);
  --focus-ring-error: 0 0 0 3px rgba(163, 43, 34, 0.14);

  /* Nav ground: paper at 94%, so the hairline below it reads through a blur. */
  --nav-ground: rgba(251, 249, 245, 0.94);

  /* ---- Type families -----------------------------------------------------
     Both self-hosted as subset variable woff2 in /fonts. Source Serif keeps
     its optical-size axis; IBM Plex has its width axis pinned to 100. No
     third-party font host is contacted on any page load. */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", Helvetica, Arial, sans-serif;

  /* ---- Type scale --------------------------------------------------------
     Roles, not sizes. Section-level overrides live in site.css beside the
     component that needs them, matching the per-section values in the
     prototypes. */
  --text-display: clamp(2.5rem, 6.4vw, 4.25rem);      /* 40 → 68 */
  --text-h1-page: clamp(2.125rem, 4.4vw, 3.125rem);   /* 34 → 50 — about page */
  --text-h2: clamp(1.75rem, 3.6vw, 2.625rem);         /* 28 → 42 */
  --text-h3: 1.375rem;                                /* 22 — card headline */
  --text-company: 1.5rem;                             /* 24 — ledger/proof name */
  --text-company-lg: 1.75rem;                         /* 28 — emphasised tier */
  --text-lead: clamp(1.0625rem, 1.5vw, 1.1875rem);    /* 17 → 19 */
  --text-body: 1.0625rem;                             /* 17 — single column */
  --text-body-dense: 1rem;                            /* 16 — grids and cards */
  --text-small: 0.9375rem;                            /* 15 — nav, meta */
  --text-fine: 0.875rem;                              /* 14 — helper text */
  --text-finer: 0.8125rem;                            /* 13 — small print */
  --text-caps: 0.75rem;                               /* 12 — eyebrow, label */

  /* Figures. Tabular everywhere they are data. */
  --figure-metric: clamp(2.375rem, 4vw, 3rem);        /* 38 → 48 — proof strip */
  --figure-tier: 2.125rem;                            /* 34 — ledger row day count */
  --figure-tier-lead: 3.125rem;                       /* 50 — emphasised ledger row */
  --figure-fee: clamp(2.125rem, 3.6vw, 2.625rem);     /* 34 → 42 — $5,000 */

  /* ---- Weights ----------------------------------------------------------- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---- Line heights ------------------------------------------------------ */
  --leading-display: 1.04;
  --leading-h2: 1.1;
  --leading-h3: 1.25;
  --leading-name: 1.2;
  --leading-body: 1.65;
  --leading-tight-body: 1.6;
  --leading-bio: 1.75;
  --leading-flush: 1;

  /* ---- Tracking ---------------------------------------------------------- */
  --track-display: -0.02em;
  --track-h2: -0.015em;
  --track-wordmark: -0.01em;
  --track-eyebrow: 0.14em;
  --track-label: 0.1em;
  --track-note: 0.06em;   /* the dimmed [PLACEHOLDER] captions */

  /* ---- Spacing scale — 4 · 8 · 12 · 20 · 32 · 44 · 64 · 96 · 112 ---------- */
  --space-1: 0.25rem;   /*   4 */
  --space-2: 0.5rem;    /*   8 */
  --space-3: 0.75rem;   /*  12 */
  --space-4: 1.25rem;   /*  20 */
  --space-5: 2rem;      /*  32 */
  --space-6: 2.75rem;   /*  44 */
  --space-7: 4rem;      /*  64 */
  --space-8: 6rem;      /*  96 */
  --space-9: 7rem;      /* 112 */

  /* Section rhythm. 96–112 desktop, 44 mobile. */
  --section-y: clamp(3.5rem, 10vh, 7rem);
  --section-y-tight: clamp(3.5rem, 9vh, 6rem);
  --section-y-hero-top: clamp(3.5rem, 12vh, 8rem);

  /* Vertical rhythm inside a section, from the README's "Rules" panel. */
  --gap-eyebrow-heading: var(--space-4);   /* 20 */
  --gap-heading-intro: var(--space-4);     /* 20 */
  --gap-intro-content: clamp(2.25rem, 5vh, 3.25rem);  /* 36 → 52 */

  /* ---- Layout ------------------------------------------------------------ */
  --measure-page: 1100px;
  --gutter: 1.5rem;          /* 24 */
  --nav-height: 4.25rem;     /* 68 */
  --nav-height-mobile: 3.625rem; /* 58 */

  /* Reading measures. */
  --measure-prose: 65ch;
  --measure-card: 38ch;
  --measure-lead: 56ch;
  --measure-intro-dark: 58ch;
  --measure-row: 62ch;

  /* ---- Radius and borders ------------------------------------------------
     8px on cards, sections and the headshot frame; 6px on buttons, inputs and
     caps chips. All borders 1px. Emphasis is an ink rule, never a shadow and
     never a wider box. */
  --radius-card: 8px;
  --radius-control: 6px;
  --rule: 1px solid var(--hairline);
  --rule-ink: 1px solid var(--ink);
  --rule-dark: 1px solid var(--dark-hairline);
  --rule-dark-strong: 1px solid var(--dark-body);
  --rule-lift: 1px solid var(--accent-lift);

  /* ---- Controls ---------------------------------------------------------- */
  --control-padding: 0.8125rem 0.875rem;  /* 13px 14px */
  --button-padding: 0.9375rem 1.5rem;     /* 15px 24px */
  --cta-padding: 1rem 1.5rem;             /* 16px 24px — hero CTA */
  --chip-padding: 0.5625rem 0.8125rem;    /* 9px 13px — ASSESSMENT chip */
  --tap-target: 3.125rem;                 /* 50px — mobile inputs */
  --tap-target-lg: 3.375rem;              /* 54px — mobile buttons */

  /* ---- Motion ------------------------------------------------------------
     The design specifies no animation beyond default colour transitions.
     The restraint is the point. */
  --duration: 140ms;
  --ease: ease;

  /* ---- Z layers ---------------------------------------------------------- */
  --z-nav: 20;
  --z-consent: 40;
  --z-skip: 60;
}

/* Mobile: 44px section padding and a shorter nav, per the mobile prototype. */
@media (max-width: 46.875rem) {
  :root {
    --section-y: var(--space-6);
    --section-y-tight: var(--space-6);
    --section-y-hero-top: var(--space-6);
    --nav-height: var(--nav-height-mobile);
    --gutter: 1.25rem;   /* 20 — the mobile frame's inner padding */
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0ms; }
}