/*
  ─────────────────────────────────────────────────────────────────────────
  LEVERANCE — "Examination"
  ─────────────────────────────────────────────────────────────────────────
  The register is an audit report, not software marketing: light throughout,
  hairline rules instead of cards-with-shadows, one chromatic color, and
  serif display set large at Light weight.

  Deliberately single-theme. Committing to one light world is part of the
  direction — every competitor in the category opens dark. Every color is
  therefore painted explicitly; nothing is inherited from the host.

  Every text pairing below was measured, not eyeballed:
    ink      on ivory  18.32:1     slate    on ivory   9.03:1
    prussian on ivory  11.48:1     verify   on ivory   5.76:1
    white    on prussian 12.08:1   flag     on ivory   5.76:1
    ivory    on prussian-deep 14.21:1   haze on prussian-deep 7.26:1
  Stone (1.70:1) is for disabled states and gridlines only — never text.
  Sand hairlines (1.26:1) are decorative dividers only; form borders need
  3:1 under WCAG 1.4.11, so inputs use slate.

  The page is light, but it is not light *only*. Every comparable in the
  category — Nevis, Rogo, Farther, Hebbia — changes register at least three
  times down the page, and a site that never does reads as a document rather
  than a company. The deep ground below is the closing third of the homepage.
  It is not a second chromatic color: prussian-deep is the accent's own dark,
  and haze / prussian-line are desaturated steps of the same hue, so the
  one-chromatic-color rule still holds.
*/

/*
  ─────────────────────────────────────────────────────────────────────────
  BREAKPOINTS
  ─────────────────────────────────────────────────────────────────────────
  Custom properties can't be read inside @media conditions, so these are
  not tokens — they're the canonical values already in majority use across
  the codebase. Match a new @media query to one of these three by
  convention instead of picking a fresh number:

    40rem (640px)  — narrow two-up text patterns (e.g. term/definition rows)
    48rem (768px)  — the default content breakpoint: nav, grid--2, most
                      section layouts
    62rem (992px)  — wide-screen layout changes (e.g. editorial rail)
*/

:root {
  color-scheme: light;

  /* ── primitives ─────────────────────────────────────────────────────── */
  --ivory: #faf9f6; /* page ground */
  --vellum: #f1efea; /* alternating bands, table stripe */
  --sand: #e3dfd7; /* hairlines, borders */
  --stone: #c7c1b6; /* disabled, gridlines — never text */
  --slate: #4a453d; /* secondary copy, input borders */
  --ink: #0f0e0d; /* headlines, body — never pure black */
  --prussian: #14375e; /* the only chromatic color */
  --prussian-deep: #0e2843; /* also the ground of the closing third */
  --haze: #a8b6c8; /* secondary copy on the deep ground — never on ivory */
  --prussian-line: #2c4b6d; /* hairline on the deep ground, decorative only */
  --wash: #e8edf3; /* quiet callout grounds, selected rows */
  --verify: #2f6e4e; /* pass / compliant states only */
  --flag: #a6432f; /* exception / attention states only */
  --white: #ffffff;

  /* ── semantic ───────────────────────────────────────────────────────── */
  --bg: var(--ivory);
  --bg-band: var(--vellum);
  --bg-quiet: var(--wash);
  --bg-deep: var(--prussian-deep);
  /* The RAISED deep ground, for the second of two adjacent deep sections.
     A hairline is not enough separation once each block is several hundred
     pixels tall — see .section--deep + .section--deep in global.css.
     Contrast on it: ivory 11.5:1, haze 5.6:1, both AA. */
  --bg-deep-raised: var(--prussian);
  --text: var(--ink);
  --text-soft: var(--slate);
  --text-faint: #6d675d; /* 5.9:1 on ivory — still AA */
  /* The inverse set. Only valid inside .section--deep — haze on ivory is
     1.9:1 and fails everything, so it must never leak onto a light ground. */
  --text-on-deep: var(--ivory);
  --text-on-deep-soft: var(--haze);
  --rule-on-deep: var(--prussian-line);
  --rule: var(--sand);
  --rule-strong: var(--stone);
  --rule-input: var(--slate);
  /* Hairline weight. A 0.5px rule reads noticeably finer than 1px and suits
     the examination register, but at 1dppx it can round to nothing — so the
     thin value is opt-in by resolution, below. */
  --rule-w: 1px;
  --rule-w-strong: 1px;
  --accent: var(--prussian);
  --accent-hover: var(--prussian-deep);
  --on-accent: var(--white);

  /* ── type ───────────────────────────────────────────────────────────── */
  /* --font-display / --font-body / --font-mono come from astro.config.mjs */

  /*
    Fluid scale computed for 360→1280px viewport, 16→18px base,
    ratio 1.2 at min / 1.25 at max. The rem term inside each clamp is load
    bearing: a pure-vw size ignores browser zoom and fails WCAG 1.4.4.
  */
  --step--1: clamp(0.8331rem, 0.807rem + 0.1163vw, 0.9rem);
  --step-0: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1193rem + 0.3587vw, 1.406rem);
  --step-2: clamp(1.44rem, 1.3158rem + 0.5522vw, 1.758rem);
  --step-3: clamp(1.728rem, 1.5445rem + 0.8163vw, 2.197rem);
  --step-4: clamp(2.074rem, 1.8104rem + 1.1707vw, 2.747rem);
  --step-5: clamp(2.488rem, 2.1183rem + 1.6435vw, 3.433rem);
  /* Hero only. Was 4.5rem while the display face was set at Light — restraint
     in weight was being paid for with scale. At Regular the letterforms carry
     themselves, so the hero comes down to 4rem and stops crowding the lede. */
  --step-6: clamp(2.75rem, 2.2609rem + 2.1739vw, 4rem);

  /* ── space ──────────────────────────────────────────────────────────── */
  --space-3xs: clamp(0.25rem, 0.2255rem + 0.1087vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4755rem + 0.1087vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.7255rem + 0.1087vw, 0.8125rem);
  --space-s: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4266rem + 0.3261vw, 1.688rem);
  --space-l: clamp(2rem, 1.9022rem + 0.4348vw, 2.25rem);
  --space-xl: clamp(3rem, 2.8533rem + 0.6522vw, 3.375rem);
  --space-2xl: clamp(3rem, 2.2663rem + 3.2609vw, 4.5rem);
  --space-3xl: clamp(4rem, 2.6522rem + 5.9891vw, 6.75rem);

  /* ── measure ────────────────────────────────────────────────────────── */
  --container: 74rem;
  --measure: 38rem; /* ~64ch at 17-18px */
  --rail: 11rem; /* the mono eyebrow rail */
  --radius: 3px; /* never 16px+ — that is the template tell */
  --header-h: 4.25rem;

  --dur-fast: 120ms; /* hover, focus, small transforms */
  --dur: 200ms; /* default — color and border changes */
  --dur-slow: 320ms; /* entrances, anything that moves a whole element */
  --stagger: 70ms; /* per-item delay in a sequenced entrance */
  --ease: cubic-bezier(0.16, 0, 0.13, 1);
}

/* A 0.5px rule reads finer than 1px and suits the register, but only where the
   display can resolve it — at 1dppx some engines round it to zero and the rule
   disappears entirely. Opt in by resolution rather than shipping a hairline
   that vanishes on an older external monitor. */
@media (min-resolution: 2dppx) {
  :root {
    --rule-w: 0.5px;
  }
}