/* tokens.css — the single brain of the visual system.
   Color literals and font families exist ONLY here (check.mjs enforces it). */

/* Layer 1 — @font-face. Self-hosted variable fonts, both SIL OFL 1.1
   (see assets/fonts/LICENSE-fonts.txt). Fallback descriptors use the real
   hhea metrics from the font files (Inter 1984/-494/0 over UPM 2048;
   Fraunces 1956/-510/0 over UPM 2000) so line boxes match before and after
   swap. Horizontal size-adjust tuning lands with motion/perf measurements. */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter-fallback';
  src: local('SF Pro Text'), local('Segoe UI'), local('Arial');
  ascent-override: 96.88%;
  descent-override: 24.12%;
  line-gap-override: 0%;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces-fallback';
  src: local('Georgia');
  ascent-override: 97.8%;
  descent-override: 25.5%;
  line-gap-override: 0%;
  font-display: swap;
}

:root {
  /* Layer 2 — color. Initial values confirmed against data/photos/ (photo_01:
     forest frames, cream walls, warm wood). */
  --forest: #1F3D2B;
  --forest-deep: #142619;
  --cream: #FAF6ED;
  --cream-dim: #F1EAD9;
  --wood: #3E2F23;
  --amber: #C98A3D;
  --ink: #2A241C;

  /* Semantic mapping (themes re-skin by overriding these) */
  --surface: var(--cream);
  --surface-dim: var(--cream-dim);
  --text: var(--ink);
  --text-dim: color-mix(in srgb, var(--ink) 70%, var(--cream));
  --accent: var(--amber);
  --accent-contrast: var(--ink);
  --focus-ring: var(--forest);
  --hairline: color-mix(in srgb, var(--wood) 16%, transparent);
  --logo-ink: #231F20; /* brand black on light surfaces */

  /* Type — one display (Fraunces, chosen against the grotesque logo: editorial
     warmth against geometric weight) + one quiet body (Inter). Swap procedure:
     replace files, change these two tokens, nothing else. */
  --font-display: 'Fraunces', 'Fraunces-fallback', Georgia, serif;
  --font-body: 'Inter', 'Inter-fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-xs: 0.75rem;   /* 12 */
  --text-s: 0.875rem;   /* 14 */
  --text-m: 1.0625rem;  /* 17 — body; phones are held farther than designers assume */
  --text-l: 1.125rem;   /* 18 */
  --text-xl: 1.375rem;  /* 22 */
  --text-2xl: 1.75rem;  /* 28 */
  --text-3xl: 2.25rem;  /* 36 */
  --text-4xl: 3rem;     /* 48 */
  --text-display: clamp(2.5rem, 8vw, 6rem);
  --measure: 65ch;
  --leading-body: 1.6;
  --leading-display: 1.15;

  /* Space — 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 6rem;
  --section-pad: clamp(72px, 12vh, 140px);
  --container: 70rem; /* 1120px */
  --target-min: 24px;  /* WCAG 2.5.8 AA */
  --target-touch: 44px;

  /* Motion — vocabulary: whispers */
  --dur-fast: 200ms;
  --dur-med: 500ms;
  --dur-slow: 900ms;
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);

  /* Shape */
  --radius: 2px;

  /* Atmosphere — the room's live light (the single-screen scene).
     sky.js blends washes by sun altitude and paints --wash-live inline;
     these tokens are the no-JS defaults and the disc/overlay colors. */
  --wash-day: color-mix(in srgb, color-mix(in srgb, var(--cream) 60%, var(--amber)) 16%, transparent);
  --wash-golden: color-mix(in srgb, color-mix(in srgb, var(--cream) 25%, var(--amber)) 34%, transparent);
  --wash-twilight: color-mix(in srgb, color-mix(in srgb, var(--amber) 45%, var(--forest-deep)) 44%, transparent);
  --wash-night: transparent; /* night gets no overlay: the scene is never dimmed */
  --sun-disc: color-mix(in srgb, var(--amber) 68%, var(--cream));
  --moon-disc: color-mix(in srgb, var(--cream) 88%, var(--forest-deep));
  --moon-shadow: var(--forest-deep);
  --rain-streak: color-mix(in srgb, var(--cream) 30%, transparent);
  --mist-veil: color-mix(in srgb, var(--cream) 18%, transparent);

  /* Chrome */
  --nav-block: 4.5rem; /* static-header clearance for anchor/focus jumps */
  color-scheme: light;
}

/* Layer 3 — midnight: the conformance proof theme (unlinked from the live site). */
[data-theme='midnight'] {
  --surface: var(--forest-deep);
  --surface-dim: var(--forest);
  --text: var(--cream);
  --text-dim: color-mix(in srgb, var(--cream) 70%, var(--forest-deep));
  --accent: var(--amber);
  --accent-contrast: var(--forest-deep);
  --focus-ring: var(--amber);
  --hairline: color-mix(in srgb, var(--cream) 16%, transparent);
  --logo-ink: #FAF6ED; /* brand white on dark surfaces */
  color-scheme: dark;
}