/* ============================================================
   tokens.css — design system passport (BRIEF §4, canonical)
   Values extracted from docs/reference/index-v5.dc.html.
   Where the reference and BRIEF disagree, BRIEF wins:
   temp −12 (ref default +12), sat 0.7 (ref 0.75),
   tagline right-edge @0.85× (ref centered @1×).
   ============================================================ */

:root {
  /* ---- reference scale unit ----
     The reference is a 1440×860 canvas scaled by
     min(1.15, vw/1440, vh/860). --u reproduces that: N px on
     the canvas = calc(N * var(--u)); the vh term keeps the
     chrome the same size on every page as on the index stage.
     Floor keeps small type legible below ~1080px; mobile gets
     its own pass. */
  --u: clamp(0.75px, min(calc(100vw / 1440), calc(100vh / 860)), 1.15px);

  /* ---- color ---- */
  --ink: #0E1116;
  --paper: #E9E9E4;
  --secondary: #8E9096;
  --numerals: #5E6268;
  --tagline-color: #C6C8C6;
  --meta-strong: #D2D3D0;   /* tile client line */
  --meta-on-image: #A7A9AC; /* metadata set over photos — lifted from --secondary for legibility */
  --rule: #565A60;          /* active-nav underline */
  --rule-lang: #6E7278;     /* active language underline */

  /* ---- background material (theme "ink", light 40% @ 33°) ----
     layers top→bottom: glow · light spot · dark spot · base */
  --bg-gradient:
    radial-gradient(ellipse 50% 46% at 68% 78%, rgba(70, 95, 135, 0.10), transparent 72%),
    radial-gradient(ellipse 75% 62% at 88.6% 25%, rgba(174, 192, 224, 0.044), transparent 72%),
    radial-gradient(ellipse 80% 58% at 16.5% 71.8%, rgba(2, 4, 8, 0.2), transparent 75%),
    linear-gradient(118deg, #12161d 0%, var(--ink) 46%, #0b0e13 100%);

  /* ---- film grain: 2–4% ---- */
  --grain-opacity: 0.03;

  /* ---- image grade (at rest; hover = original + scale) ----
     lift 0 · gamma 1 · gain 0.94 · temp −12 · tint 0 · sat 0.7
     Implemented as SVG filter #grade (partial: grade-filter.html). */
  --grade-filter: url(#grade);
  --hover-scale: 1.02;
  --ease-slide: cubic-bezier(0.25, 0, 0.15, 1);
  --grade-transition: filter 0.6s ease, transform 0.6s var(--ease-slide);

  /* ---- type roles (BRIEF §4: roles are exclusive) ----
     grotesque   = name + nav ONLY
     serif italic = display lines + film titles ONLY
     monospace   = ALL metadata, labels, brackets, footer, switcher */
  --font-serif: "Cormorant", "Cormorant Garamond", Georgia, serif;
  --font-grotesque: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;

  /* ---- header composition (canvas px → ×--u) ---- */
  --name-comp-width: calc(400 * var(--u)); /* SLAVA…GRYSHANIN spread */
  --name-size: calc(18 * var(--u));
  --name-tracking: 0.24em;
  --header-top: calc(30 * var(--u));
  --header-gap: calc(15 * var(--u));
  --tagline-scale: 0.85;                   /* BRIEF §4; ref default 1 */
  --tagline-size: calc(21 * var(--u) * var(--tagline-scale));
  --tagline-tracking: 0.04em;
  --nav-size: max(calc(10.5 * var(--u)), 9px);
  --nav-tracking: 0.18em;
  --nav-gap: calc(24 * var(--u));

  /* ---- metadata / mono scale ---- */
  --meta-size: max(calc(9.5 * var(--u)), 8.5px);
  --meta-tracking: 0.22em;
  --edge-x: calc(40 * var(--u));           /* switcher/footer inset */
  --footer-bottom: calc(22 * var(--u));

  /* ---- roman numeral section anchors ---- */
  --numeral-size: calc(58 * var(--u));
  --numeral-opacity: 0.5;                  /* BRIEF §4 "quiet anchors" */

  /* ---- layout ---- */
  --page-pad: clamp(1.25rem, 4vw, 3rem);
  --content-max: 34em;                     /* statement max-width (BRIEF §7) */
}

/* ============================================================
   Mobile pass (≤768px). Below ~1080px --u sits on its 0.75px
   floor, so canvas math stops scaling; these overrides recompose
   the chrome for portrait phones instead of shrinking it.
   ============================================================ */
@media (max-width: 768px) {
  :root {
    /* mobile grade policy (BRIEF §4): no muted grade below the
       breakpoint — imagery in original color, since the
       rest/hover pairing does not exist on touch. Every consumer
       reads var(--grade-filter), so redefining the token here
       switches the whole site; grain + ink stay unchanged. */
    --grade-filter: none;

    --edge-x: 20px;
    --header-top: 48px;      /* name drops below the MENU / switcher row */
    --header-gap: 13px;
    --name-size: 19px;       /* reference index-mobile: single centered line */
    --tagline-size: 19px;
    --footer-bottom: 30px;
    --numeral-size: 44px;
  }
}