/* ==========================================================================
   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-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 — record/base name */
  --text-company-lg: 1.75rem;                         /* 28 — base engagement price */
  --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-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;   /* small-caps notes and fine print */

  /* ---- 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);
  /* The hero opens tighter than a mid-page section. At 12vh this was 96px on
     a 1440x800 laptop against 32px between the eyebrow and the headline and
     40px above the call to action: three times every other gap in the block,
     which read as a hole rather than as breathing room, and pushed the call
     to action past the fold. 7vh keeps it the largest gap in the hero at
     roughly 1.75x the internal rhythm, without the hole. */
  --section-y-hero-top: clamp(2.5rem, 7vh, 5.5rem);

  /* 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-flow is the one every full-width block on the home page shares.
     It is set in rem, not ch, on purpose: a ch cap resolves to a different
     pixel width for every font size, so a page of ch-capped blocks ends up with
     a ragged staircase of right edges — 531px here, 616px there, 712px below —
     which reads as accidental. One pixel measure gives them a single edge.

     52rem is ~79% of the 1052px content column: wide enough that nothing looks
     stranded on the left, short enough that a two- or three-line paragraph
     still tracks. Long-form prose keeps the tighter --measure-prose; see the
     note there. */
  --measure-flow: 52rem;

  /* Sustained reading — the About bio and the legal pages — stays at the
     classic cap. Those are the only places on the site where someone reads
     several paragraphs in a row, and 65ch is where that stops being
     comfortable. */
  --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; }
}