frontend/css/tokens.css

/* Lightloom design tokens — "an intimate 1900s projection room" (docs/04 §1).
   Warm darkness, amber projector glow; never tech dark-mode. */

:root {
  /* Palette */
  --bg: #0a0a0c;          /* projection room dark */
  --ink: #f5efe6;         /* ivory text */
  --amber: #e8a33d;       /* projector amber */
  --rec: #e0442e;         /* REC red */
  --night: #1b2a3a;       /* night blue */
  --line: #2a2a30;        /* hairline */
  --ink-dim: rgba(245, 239, 230, 0.62);
  --ink-faint: rgba(245, 239, 230, 0.34);
  --amber-soft: rgba(232, 163, 61, 0.16);

  /* Radii */
  --r-panel: 14px;
  --r-pill: 999px;

  /* Shadows — warm halo, never blue-tech */
  --halo: 0 0 28px rgba(232, 163, 61, 0.18), 0 8px 40px rgba(0, 0, 0, 0.55);
  --halo-soft: 0 0 18px rgba(232, 163, 61, 0.1);
  --panel-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);

  /* Typography (OFL, self-hosted in assets/fonts/) with graceful fallbacks */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tracking-title: 0.14em;

  /* Cinema geometry */
  --aspect-film: 2.39 / 1;   /* desktop letterbox */
  --aspect-film-mobile: 16 / 9;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --reveal-ms: 700ms;
  --transition-ms: 700ms;
  --grain-opacity: 0.016; /* light film grain — the WebGL stage adds its own; avoid doubling into "fog" */
  --vignette: 0.08;
}

/* Self-hosted OFL fonts. Drop the .woff2 files in assets/fonts/; until then the
   serif/sans fallbacks above keep the layout intact (R3: no font CDN at runtime). */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/Fraunces-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --reveal-ms: 240ms;
    --transition-ms: 240ms;
    --grain-opacity: 0.03;
  }
}