/* JCG Studio — site-v6 tokens (ink-on-void)
   Source of truth for values. Documented in ../../../site-v6-DESIGN.md — edit here first, then the doc. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-VF.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 100% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Departure Mono";
  src: url("../fonts/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ── Color: void canvas ───────────────────────────── */
  --void:   #0B0C0E;
  --void-2: #111418;
  --void-3: #181C22;

  /* ── Color: chrome ink ────────────────────────────── */
  --chrome:   #E6E9ED;
  --chrome-2: rgba(230, 233, 237, .72);
  --chrome-3: #8A919B;

  /* ── Color: hairlines ─────────────────────────────── */
  --line:        rgba(230, 233, 237, .10);
  --line-strong: rgba(230, 233, 237, .24);
  --line-control: rgba(230, 233, 237, .40);   /* field and choice borders: the one line that must pass 3:1 (3.3:1 on the voids); approved 2026-10-05 */

  /* ── Color: the one signal lamp (marks only, never fills > chip) ── */
  --signal:     #FF5B35;
  --signal-glow: color-mix(in srgb, var(--signal) 18%, transparent);

  /* ── Color: inverse, void ink on chrome (the close band and print) ──
     Bone (#ECEBE6) retired 2026-10-02: chrome is the one light neutral. */
  --on-chrome:   #0B0C0E;
  --on-chrome-2: rgba(11, 12, 14, .66);
  --on-chrome-3: rgba(11, 12, 14, .60);   /* was .46 (3.1:1 on chrome); raised to .60 (4.8:1) on 2026-10-05 so small text on the light band passes AA (JC) */
  --line-on-chrome: rgba(11, 12, 14, .14);

  /* ── Color: placeholder frames (Studio Concepts) ──── */
  --ph-1: #1A1E24;   /* frame surface */
  --ph-2: #2A2E35;   /* blocks */
  --ph-3: #3A404A;   /* emphasis blocks */
  --ph-4: #4E5561;   /* highest placeholder tone */

  /* ── Type ─────────────────────────────────────────── */
  --font-display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:    "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hud:     "Departure Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;   /* code-like text only: system monospace */

  --wdth-display: 118%;   /* expanded, industrial */
  --wdth-wide:    125%;   /* prices, close */
  --wdth-body:    100%;

  --t-display: clamp(2.5rem, 1.35rem + 4.6vw, 5.25rem);
  --t-h2:      clamp(1.875rem, 1.3rem + 2.5vw, 3.375rem);
  --t-h3:      clamp(1.125rem, 1.04rem + .4vw, 1.375rem);
  --t-lede:    clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --t-body:    1rem;
  --t-small:   .875rem;
  --t-hud:     11px;     /* Departure Mono pixel grid: 11 / 22 only */
  --t-hud-lg:  22px;

  --track-display: -.02em;
  --track-hud: .08em;

  /* ── Space (4px base) ─────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;

  --max: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(88px, 11vw, 160px);
  --edge: 24px;         /* HUD corners sit this far from the viewport edges; an open portfolio item lines up with them */
  --hud-row: 40px;      /* the top HUD row's height (the logo panel); every HUD panel is 40 px (JC 2026-10-22) */
  --nav-h: calc(var(--edge) + var(--hud-row) + 2px);   /* content starts just below the top HUD */
  --hit: 44px;          /* touch-target floor */

  /* ── Shape ────────────────────────────────────────── */
  --r-0: 0;
  --r-chip: 2px;
  --r-btn: 4px;
  --tick: 8px;          /* HUD corner-tick arm length */

  /* ── Motion ───────────────────────────────────────── */
  --ease-out:  cubic-bezier(.2, .7, .2, 1);
  --ease-snap: cubic-bezier(.3, 1.4, .5, 1);   /* HUD overshoot only */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 450ms;
  --dur-4: 900ms;
  --stagger: 70ms;
  --queue-tick: 2800ms;

  /* ── Grain (static, never animated) ───────────────── */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity: .035;
}
@media (max-width: 520px) {
  :root { --edge: 12px; }
}