/* ==========================================================================
   REDARQ DESIGN TOKENS
   Implements Phase 4 §12 exactly. Only 3 brand colours exist in this file;
   every other value is derived from them via opacity, never a new hue.
   ========================================================================== */

:root {
  /* ---- COLOUR ---------------------------------------------------------- */
  --color-ink: #15191C;
  --color-red: #FF3131;
  --color-warm-white: #F0EEE9;

  --color-bg-primary: var(--color-ink);
  --color-bg-inverse: var(--color-red);

  --color-text-primary: var(--color-warm-white);
  --color-text-secondary: rgba(240, 238, 233, 0.60);
  /* Alpha raised from 0.38 to 0.50 (Phase 6.2 QA): flattened against the
     --color-ink background, 0.38 measures 3.25:1 — below the 4.5:1 WCAG AA
     minimum for normal-size text. It's used at 11px (--type-micro) for
     genuine content, not decoration — the work-end closing signature
     ("redarq.studio") — so it needs the full 4.5:1, not the 3:1 large-text
     allowance. 0.50 measures 4.71:1, a small safety margin above the
     minimum, while remaining visibly the most muted of the three text
     tiers (secondary is 0.60/6.18:1, primary is full-opacity/15.25:1). */
  --color-text-tertiary: rgba(240, 238, 233, 0.50);
  --color-text-inverse: var(--color-ink);

  --color-rule: rgba(240, 238, 233, 0.15);
  --color-rule-on-red: rgba(21, 25, 28, 0.15);

  --color-focus-ring: var(--color-warm-white);
  --color-focus-ring-inverse: var(--color-ink);

  --color-selection-bg: var(--color-red);
  --color-selection-text: var(--color-ink);

  /* ---- FONT -------------------------------------------------------------
     Ogg Text and Inter are both self-hosted licensed webfonts (Phase 6.3B;
     see typography.css for the @font-face declarations, which point at
     /assets/fonts/). Georgia and the other serif names below are the
     fallback stack only — used while a font is loading or in the rare
     case it fails to load — never the intended rendered typeface.        */
  --font-brand: "Ogg Text", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-editorial: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-interface: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- TYPE SCALE (mobile, fluid via clamp — see typography.css) ------- */
  /* Phase 6.2 QA fix, corrected: "GALIMITAKIS" at the 320px minimum
     supported viewport was clipped by the global overflow-x:hidden safety
     net (base.css), invisibly — 280px measured against a 272px content
     column. The first attempt only lowered the clamp FLOOR (2.75rem →
     2.5rem), but at 320px the resolved size is actually set by the
     preferred (vw + rem) term — 6vw + 1.5rem = 19.2px + 24px = 43.2px,
     which is below the old 2.75rem/44px floor (so the floor was binding
     and the real value was 44px) but above the lowered 2.5rem/40px floor
     (so the floor no longer binds at all, and the fix had ~zero effect —
     confirmed by re-measurement: still 275px vs 272px clientWidth).
     Corrected fix: reduce the rem addend of the preferred term itself,
     since that term is what's actually active at 320px. First pass
     (1.5rem → 1.4rem, 41.6px at 320px) closed the gap to an exact
     scrollWidth === clientWidth tie (272 === 272) — technically passing
     but with zero rounding margin, so the addend was nudged once more
     to 1.35rem for a small safety buffer: 6vw + 1.35rem = 19.2 + 21.6 =
     40.8px at 320px (floor still 2.5rem/40px, still non-binding — kept
     as a safety ceiling-of-the-floor). This uniformly reduces the
     preferred term by ~2.1px at every viewport below the term's
     crossover with the 7.5rem ceiling (crossover moves from ~1600px to
     ~1658px — negligible; the headline is still pinned to 7.5rem from
     ~1440px+ in practice), which is imperceptible on a display-scale
     headline and does not alter the established hierarchy; it is the
     smallest change that fixes the term actually clamping the value at
     the failing width, with real re-measured margin instead of an
     exact-zero tie.

     Phase 6.3F follow-up: that measurement was taken against the Georgia
     *fallback* — Ogg Text itself was 404ing at the time (font files not
     yet supplied/self-hosted). Now that Ogg Text actually loads, its real
     glyph metrics for "GALIMITAKIS" are wider than Georgia's, and 320px
     re-overflowed (274px vs 272px). Re-measured with the real font via
     canvas (400/Book, the weight this element actually renders):
     "GALIMITAKIS" scales at ~6.818px of width per 1px of font-size, so at
     320px the addend needed one more small reduction (1.35rem → 1.2rem)
     to bring the resolved size from 40.8px to 38.4px — a measured ~262px
     text width against the 272px column, a real ~10px margin instead of
     a razor-thin or negative one. */
  --type-display-xl: clamp(2.5rem, 6vw + 1.2rem, 7.5rem);
  --type-display: clamp(2.25rem, 5vw + 1rem, 4.5rem);
  --type-h1: clamp(1.75rem, 4vw + 0.75rem, 3rem);
  --type-h2: clamp(1.5rem, 3vw + 0.75rem, 2.25rem);
  --type-h3: 1.25rem;
  --type-editorial-statement: clamp(1.25rem, 2.5vw + 0.75rem, 2rem);
  --type-body-lg: 1.0625rem;
  --type-body: 1rem;
  --type-metadata: 0.8125rem;
  --type-interface: 0.9375rem;
  --type-button: 0.9375rem;
  --type-eyebrow: 0.75rem;
  --type-micro: 0.6875rem;

  /* ---- SPACING SCALE ----------------------------------------------------*/
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-80: 5rem;
  --space-96: 6rem;

  /* ---- RADIUS ------------------------------------------------------------
     System ceiling is 2px. No pill buttons anywhere.                     */
  --radius-sm: 0px;
  --radius-max: 2px;

  /* ---- RULES ------------------------------------------------------------*/
  --rule-weight: 1px;

  /* ---- MOTION -------------------------------------------------------------
     CONSTRUCTION · ALIGNMENT · GEOMETRY · PRECISION. No overshoot,
     elastic, or spring curve exists anywhere in this token set.          */
  --motion-fast: 150ms;
  --motion-standard: 300ms;
  --motion-reveal: 500ms;
  --motion-image-reveal: 600ms;
  --motion-opening-first-total: 1700ms;
  --motion-opening-return-total: 400ms;
  --motion-dock: 200ms;

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-reveal: cubic-bezier(0.4, 0, 0, 1);
  --ease-image: cubic-bezier(0.3, 0, 0.1, 1);

  /* ---- LAYOUT --------------------------------------------------------- */
  --margin-compact: 24px;
  --margin-regular: 32px;
  --margin-wide: 48px;
  --margin-full: 64px;

  --gutter-compact: 16px;
  --gutter-regular: 20px;
  --gutter-wide: 24px;
  --gutter-full: 24px;

  --maxwidth-wide: 1040px;
  --maxwidth-full: 1200px;
  --maxwidth-bleed: 1600px;

  --dock-height: 56px;

  /* Symbol scale — construction vs settled state are DIFFERENT sizes.
     Do not treat these as interchangeable (Phase 3 Correction 1). */
  --symbol-size-construction: min(30vw, 220px);
  --symbol-size-header: clamp(28px, 8vw, 36px);
  --symbol-size-footer: 40px;
}

/* Reduced-motion users get instant timings, not zero-duration jank —
   handled per-component in scripts, this token communicates intent. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-opening-first-total: 0ms;
    --motion-opening-return-total: 0ms;
  }
}