/*
 * Design tokens — Victory Zorvena.
 *
 * Royal violet and cream with a deep-green pitch and brass detailing: the palette of a
 * printed matchday programme. Everything in the interface is built from these values.
 */

:root {
  /* Brand */
  --violet-900: #150c24;
  --violet-800: #201038;
  --violet-700: #2c1a4e;
  --violet-600: #3c2470;
  --violet-500: #4a2c86;
  --violet-400: #5b3aa6;
  --violet-300: #8e6bd6;
  --violet-200: #b18cf0;

  --cream-100: #fbf3e4;
  --cream-200: #f0e4cd;
  --cream-300: #e9d9ba;
  --cream-400: #c9b68e;
  --cream-500: #9a8a6b;

  --meadow-700: #0e3a27;
  --meadow-600: #145236;
  --meadow-500: #1b6b47;
  --meadow-400: #2d8a5c;
  --meadow-300: #3e9e72;

  --brass-600: #a07d14;
  --brass-500: #c9a227;
  --brass-400: #dcb948;
  --brass-300: #e8ce7a;

  --ember-500: #c8553d;
  --ember-400: #e2705a;
  --ember-300: #f09982;

  --orchid-500: #7a4fc0;
  --slate-600: #3a3350;
  --slate-500: #4d4668;
  --teal-500: #2f8f8a;

  /* Surfaces */
  --bg: var(--violet-900);
  --bg-raise: #241340;
  --surface: rgba(44, 26, 78, 0.92);
  --surface-strong: #2c1a4e;
  --surface-muted: rgba(36, 19, 64, 0.72);
  --surface-line: rgba(142, 107, 214, 0.22);
  --surface-line-strong: rgba(232, 206, 122, 0.36);

  /* Text */
  --text: var(--cream-100);
  --text-soft: var(--cream-300);
  --text-muted: var(--cream-500);
  --text-ink: var(--violet-900);

  /* Accents */
  --accent: var(--brass-500);
  --accent-soft: var(--brass-300);
  --positive: var(--meadow-300);
  --warning: var(--brass-400);
  --danger: var(--ember-400);

  /* Tile accents */
  --tile-sand: #e9d9ba;
  --tile-sand-ink: #2c1a4e;
  --tile-meadow: #2d8a5c;
  --tile-meadow-ink: #f2fff8;
  --tile-orchid: #8e6bd6;
  --tile-orchid-ink: #1a1030;
  --tile-brass: #d3ab32;
  --tile-brass-ink: #2a1c05;
  --tile-ember: #e2705a;
  --tile-ember-ink: #2c0f09;
  --tile-slate: #443c5f;
  --tile-slate-ink: #cfc5e6;

  /* Type */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --size-eyebrow: 0.6875rem;
  --size-small: 0.8125rem;
  --size-body: 0.9375rem;
  --size-lead: 1.0625rem;
  --size-title: 1.375rem;
  --size-display: 1.875rem;
  --size-hero: 2.5rem;

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

  /* Shape */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(8, 4, 18, 0.35);
  --shadow-md: 0 10px 24px rgba(8, 4, 18, 0.42);
  --shadow-lg: 0 20px 48px rgba(8, 4, 18, 0.5);
  --shadow-inset: inset 0 1px 0 rgba(251, 243, 228, 0.08);

  --ring: 0 0 0 2px var(--brass-300);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 140ms;
  --normal: 240ms;
  --slow: 420ms;

  /* Layout */
  --app-max: 520px;
  --board-scale: 1;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

:root[data-contrast='high'] {
  --surface: #2a1550;
  --surface-line: rgba(232, 206, 122, 0.5);
  --text-soft: var(--cream-100);
  --text-muted: var(--cream-300);
  --tile-sand: #fff6e2;
  --tile-meadow: #34a86c;
  --tile-orchid: #a684ee;
  --tile-brass: #efc63f;
  --tile-ember: #ff8468;
  --tile-slate: #2c2640;
  --tile-slate-ink: #ffffff;
}

:root[data-reduced-motion='true'] * {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}