/* =========================================================
   Zigonia Events website: design tokens. The only file with colour literals
   (tests/site.test.ts). Values follow the Zigonia design system (slate-navy
   ground, blue for action) with the gold from the Zigonia Events logo.
   Dark is the default; light is tuned separately, not inverted.
   ========================================================= */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --surface-page: #1b2438;
  --surface-card: #233049;
  --surface-raised: #212d45;
  --surface-sunken: #19283c;
  --surface-deep: #111a2b; /* big-screen mockup and footer */

  --border-subtle: rgb(159 207 255 / 11%);
  --border-default: rgb(159 207 255 / 18%);
  --border-strong: #6d86a3;

  --ink-heading: #e3ecf6;
  --ink-body: #c2d4e5;
  --ink-muted: #9cb0c4;

  --accent: #3d97f0;
  --accent-text: #62b6ff;
  --glass: rgb(98 182 255 / 9%);
  --focus-ring: #62b6ff;

  --btn-from: #a1d6ff;
  --btn-to: #008df9;
  --on-btn: #04121f;
  --btn-secondary-ink: #8ecbff;
  --btn-secondary-border: rgb(91 173 255 / 42%);

  --gold: #d9b35c;
  --gold-text: #e6c05a;
  --on-gold: #231a04;
  --gold-wash: rgb(217 179 92 / 14%);
  --positive: #7ed49e;
  --positive-wash: rgb(126 212 158 / 13%);

  /* answer colours in the phone mockup (white text on all four) */
  --answer-1: #1a59f2;
  --answer-2: #0a7538;
  --answer-3: #9e560f;
  --answer-4: #c70a33;
  --on-answer: #ffffff;

  /* team gems */
  --team-1: #1a59f2;
  --team-2: #e67a0a;
  --team-3: #148f42;
  --team-4: #d12e52;
  --team-5: #7030d1;

  --shadow-ink: rgb(0 0 0 / 30%);
  --shadow-card: 0 20px 50px rgb(0 0 0 / 28%);
  --shadow-primary: 0 10px 26px rgb(35 108 168 / 40%);
  --highlight-top: inset 0 1px 0 rgb(159 207 255 / 16%);
  --lattice: rgb(98 182 255 / 5%);
  --header-glass: rgb(25 40 60 / 82%);
}

:root[data-theme="light"] {
  color-scheme: light;

  --surface-page: #eef3fa;
  --surface-card: #ffffff;
  --surface-raised: #fafcfe;
  --surface-sunken: #f2f6fb;
  --surface-deep: #14243a;

  --border-subtle: rgb(20 60 105 / 10%);
  --border-default: rgb(20 60 105 / 15%);
  --border-strong: #7189a6;

  --ink-heading: #14243a;
  --ink-body: #3c5570;
  --ink-muted: #415870;

  --accent: #17559f;
  --accent-text: #17559f;
  --glass: rgb(47 127 212 / 9%);
  --focus-ring: #17559f;

  --btn-from: #2670c2;
  --btn-to: #17559f;
  --on-btn: #ffffff;
  --btn-secondary-ink: #17559f;
  --btn-secondary-border: rgb(23 85 159 / 42%);

  --gold: #d9b35c;
  --gold-text: #7d5f0c;
  --on-gold: #231a04;
  --gold-wash: rgb(217 179 92 / 20%);
  --positive: #17603c;
  --positive-wash: rgb(23 96 60 / 11%);

  --answer-1: #1a59f2;
  --answer-2: #0a7538;
  --answer-3: #9e560f;
  --answer-4: #c70a33;
  --on-answer: #ffffff;

  --team-1: #1a59f2;
  --team-2: #e67a0a;
  --team-3: #148f42;
  --team-4: #d12e52;
  --team-5: #7030d1;

  --shadow-ink: rgb(15 40 70 / 12%);
  --shadow-card: 0 20px 50px rgb(15 40 70 / 12%);
  --shadow-primary: 0 8px 20px rgb(23 85 159 / 28%);
  --highlight-top: inset 0 1px 0 rgb(255 255 255 / 70%);
  --lattice: rgb(23 85 159 / 5%);
  --header-glass: rgb(242 246 251 / 85%);
}

/* The big-screen mockup and the footer are always dark, like a TV in a dim room. */
.tv,
.site-footer {
  --tv-ink: #e3ecf6;
  --tv-muted: #9cb0c4;
  --tv-row: #1d2a42;
  --tv-gold: #e6c05a;
}

:root {
  --font-display: "Archivo", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-ui:
    "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --text-hero: clamp(2.3rem, 1.4rem + 3.8vw, 4.1rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 5rem;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-card: 18px;
  --radius-device: 32px;
  --radius-pill: 999px;

  --content-max: 72rem;
  --reading-max: 40rem;
  --ease: 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ease: 0ms linear;
  }
}