/* ==========================================================================
   TOKENS — every colour, font, size and easing curve lives here.
   Design direction: a quiet optical instrument. Monochrome hairlines,
   a serif for names, mono for scientific readouts, colour used sparingly.
   ========================================================================== */

:root {
  /* Surfaces & ink */
  --bg: #050505;
  --ink: #f4f2ee;                         /* warm white */
  --ink-dim: rgba(244, 242, 238, 0.64);
  --ink-faint: rgba(244, 242, 238, 0.38);
  --hairline: rgba(244, 242, 238, 0.22);
  --hairline-strong: rgba(244, 242, 238, 0.55);

  /* Glass — smoky, not shiny */
  --glass-top: rgba(20, 20, 20, 0.42);
  --glass-bottom: rgba(10, 10, 10, 0.32);
  --glass-border: rgba(244, 242, 238, 0.14);
  --glass-highlight: rgba(244, 242, 238, 0.08);
  --glass-blur: 26px;
  --glass-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  --scrim: rgba(0, 0, 0, 0.38);

  /* Accents — --accent is set per animal by js/main.js and used only as a small mark */
  --accent: #c9b98f;
  --accent-2: #c9b98f;
  --gold: #c9b98f;                        /* brand metal */
  --danger: #e2483d;
  --restore: #f4f2ee;

  /* Type */
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Layout */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gutter: 18px;
  --btn: 42px;
  --capture-size: 76px;
  --dock-item: 52px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}