/* Glittz Voting design tokens: gallery white with one gold.
   Generated from the design system's tokens.json (design system v11, 19 Oct 2026). Change values there first, then regenerate. */

:root {
  color-scheme: light;

  /* Colour and glass */
  --paper: #ffffff;
  --wash: #f6f6f6;
  --line: #ececec;
  --line-control: #8c8c8c;
  --ink: #020202;
  --muted: #6b6b6b;
  --faint: #8c8c8c;
  --gold: #876a1f;
  --gold-deep: #6e5618;
  --gold-soft: #f1ede4;
  --on-gold: #ffffff;
  --ok: #2f7a54;
  --ok-soft: #eaf2ee;
  --error: #b3362b;
  --error-soft: #f7ebea;
  --whatsapp: #14803f;
  --frost: rgba(255, 255, 255, 0.32);
  --smoke: rgba(14, 14, 14, 0.72);
  --glass-bar: rgba(255, 255, 255, 0.7);

  /* Type: Bodoni Moda 400 for mood, Jost 300/400/500 for everything a voter acts on */
  --font-display: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --font-ui: Jost, Futura, system-ui, -apple-system, sans-serif;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Shape */
  --radius-control: 2px;
  --radius-sheet: 12px;
  --radius-photo: 12px;
  --radius-thumb: 6px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* Depth: the sheet and dialog shadows, the smoked pill, and gold leaf for anything that can be pressed */
  --shadow-sheet: 0 -16px 48px -16px rgba(0, 0, 0, 0.22);
  --shadow-modal: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 24px 64px -20px rgba(0, 0, 0, 0.28);
  --shadow-smoke: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 30px -10px rgba(0, 0, 0, 0.45);
  --leaf-gold: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.14), 0 0 0 1px #6e5618, 0 2px 4px -1px rgba(110, 86, 24, 0.35), 0 8px 18px -8px rgba(110, 86, 24, 0.45);
  --leaf-gold-pressed: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 0 0 1px #6e5618;
  --leaf-line: inset 0 1px 0 #ffffff, 0 0 0 1px #876a1f, 0 2px 4px -1px rgba(110, 86, 24, 0.16), 0 8px 18px -10px rgba(110, 86, 24, 0.28);
  --leaf-line-pressed: inset 0 1px 2px rgba(110, 86, 24, 0.2), 0 0 0 1px #876a1f;

  /* Size */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  --control-sm: 40px;
  --control-md: 48px;
  --control-lg: 54px;
  --touch-min: 44px;

  /* Motion */
  --dur-instant: 120ms;
  --dur-fast: 180ms;
  --dur-base: 250ms;
  --dur-slow: 380ms;
  --dur-sheet: 500ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-pop: cubic-bezier(0.34, 1.45, 0.64, 1);
}