/* tokens.css - design tokens (colours, radii, shadows, motion easing).
 * Animation *durations* live in JS (config.js -> --scene-out etc.); this file
 * holds the visual constants and easing curves. */
:root {
  /* surfaces */
  --card-bg: rgba(255, 255, 255, 0.96);
  --glass-bg: rgba(255, 255, 255, 0.15);
  --glass-border: rgba(255, 255, 255, 0.25);

  /* game-UI panels (visual-novel dialog box + HUD) */
  --panel-bg: linear-gradient(180deg, rgba(20, 32, 28, 0.82), rgba(9, 18, 15, 0.92));
  --panel-border: rgba(255, 255, 255, 0.16);
  --panel-glow: rgba(255, 255, 255, 0.06);
  --hud-bg: rgba(10, 20, 16, 0.55);
  --accent: #7CE0BC;

  /* text */
  --ink: #111;
  --ink-soft: #444;
  --ink-faint: rgba(255, 255, 255, 0.7);
  --paper: rgba(255, 255, 255, 0.96);
  --paper-soft: rgba(255, 255, 255, 0.72);

  /* radii - sharp, game-UI edges */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-xl: 4px;
  --r-pill: 3px;

  /* shadow - hard offset shadows for a chunky game-panel feel */
  --shadow-1: 3px 3px 0 rgba(0, 0, 0, 0.35);
  --shadow-2: 4px 4px 0 rgba(0, 0, 0, 0.4);
  --shadow-card: 6px 6px 0 rgba(0, 0, 0, 0.3);
  --shadow-panel: 8px 8px 0 rgba(0, 0, 0, 0.35);
  --shadow-hard: 4px 4px 0 rgba(0, 0, 0, 0.45);

  /* angular tab shape (nameplates, chips, tags) */
  --clip-tab: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);

  /* motion easing (durations come from JS via config.js) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* fallbacks in case JS hasn't set them yet */
  --scene-out: 320ms;
  --scene-in: 420ms;
  --bg-crossfade: 800ms;
  --angel-enter: 620ms;
  --angel-idle: 4200ms;
  --choice-reveal: 380ms;
  --dot-change: 450ms;
  --virtue-pop: 520ms;
}