/* =========================================================================
   Crowvio design tokens
   Three layers:
     1. Primitives  – raw palette, type, space. Never used directly in UI.
     2. Semantic    – what a value is for (surface, text, primary…). Light + dark.
     3. Component   – per-component knobs built from semantic tokens.
   Event themes (e.g. data-theme="festive") override a small set of semantic
   tokens on top, so the product stays Crowvio while the event gets its look.
   Mode: follows the OS, or force with <html data-mode="light|dark">.
   Docs: design-system/crowvio/MASTER.md
   ========================================================================= */

/* ---------- fonts (self-hosted: no CDN dependency on venue 4G) ---------- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(/fonts/space-grotesk-latin-wght-normal.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url(/fonts/dm-sans-latin-wght-normal.woff2) format('woff2-variations');
}

:root {
  /* ===== 1. PRIMITIVES ================================================= */
  --violet-50: #f5f3ff;  --violet-100: #ede9fe; --violet-200: #ddd6fe; --violet-300: #c4b5fd;
  --violet-400: #a78bfa; --violet-500: #8b5cf6; --violet-600: #7c3aed; --violet-700: #6d28d9;
  --violet-800: #5b21b6; --violet-900: #4c1d95; --violet-950: #2e1065;

  --pink-100: #ffe4ef; --pink-300: #ff9ec0; --pink-400: #ff6b9e; --pink-500: #ff3d7f;
  --pink-600: #e11d63; --pink-700: #be124f; --pink-900: #6b0a2e;

  --cyan-100: #cffafe; --cyan-300: #67e8f9; --cyan-400: #22d3ee; --cyan-500: #06b6d4;
  --cyan-700: #0e7490; --cyan-900: #164e63;

  --gold-100: #fef3c7; --gold-300: #fde68a; --gold-400: #fbbf24; --gold-500: #f59e0b;
  --gold-700: #b45309; --gold-900: #78350f;

  --green-100: #dcfce7; --green-400: #4ade80; --green-500: #22c55e; --green-600: #16a34a;
  --green-700: #15803d; --green-900: #14532d;

  --red-100: #fee2e2; --red-400: #f87171; --red-500: #ef4444; --red-600: #dc2626;
  --red-700: #b91c1c; --red-900: #7f1d1d;

  --blue-100: #dbeafe; --blue-400: #60a5fa; --blue-600: #2563eb; --blue-700: #1d4ed8;

  /* "ink" neutrals carry a hint of violet so greys sit with the brand */
  --ink-0: #ffffff;   --ink-25: #fafafd;  --ink-50: #f4f4f9;  --ink-100: #e9e9f2;
  --ink-200: #d8d8e6; --ink-300: #b6b6cb; --ink-400: #85859f; --ink-500: #6a6a88;
  --ink-600: #50506b; --ink-700: #36364d; --ink-800: #24243a; --ink-850: #1b1b2f;
  --ink-900: #131325; --ink-950: #0b0b18; --ink-1000: #06060e;

  /* brand colours used for decoration (arena backdrop, marks); a client's
     brand stylesheet replaces these */
  --brand-1: var(--violet-600);
  --brand-2: var(--pink-500);
  --brand-3: var(--cyan-500);
  /* effect colours (animated backgrounds): bright enough to glow on the dark arena */
  --fx-1: var(--violet-400); --fx-2: var(--pink-400); --fx-3: var(--cyan-400);

  /* type */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', Consolas, monospace;

  --text-xs: 0.75rem;   /* 12 – meta only, never body */
  --text-sm: 0.875rem;  /* 14 */
  --text-base: 1rem;    /* 16 – body minimum */
  --text-lg: 1.125rem;  /* 18 */
  --text-xl: 1.25rem;   /* 20 */
  --text-2xl: 1.5rem;   /* 24 */
  --text-3xl: 1.875rem; /* 30 */
  --text-4xl: 2.25rem;  /* 36 */
  --text-5xl: 3rem;     /* 48 */
  --text-6xl: 3.75rem;  /* 60 */

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.06em;

  /* space: 4px grid */
  --space-0: 0;    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px;

  --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 999px;

  /* motion: exits are faster than entrances */
  --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; --dur-stage: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --z-base: 1; --z-sticky: 10; --z-overlay: 40; --z-modal: 50; --z-toast: 60; --z-takeover: 90;

  --touch-min: 44px;

  /* ===== 2. SEMANTIC – light ========================================== */
  color-scheme: light;
  --bg: var(--ink-50);
  --bg-gradient: radial-gradient(1200px 600px at 0% -10%, rgba(124, 58, 237, 0.10), transparent 60%),
                 radial-gradient(900px 500px at 100% 0%, rgba(255, 61, 127, 0.08), transparent 60%);
  --surface: var(--ink-0);
  --surface-2: var(--ink-25);
  --surface-sunken: var(--ink-100);
  --surface-overlay: rgba(19, 19, 37, 0.55);
  --border: var(--ink-200);
  --border-strong: var(--ink-400); /* 3:1 – input outlines are UI components */

  --text: var(--ink-900);
  --text-muted: var(--ink-600);
  --text-subtle: var(--ink-500);
  --text-inverse: var(--ink-0);

  --primary: var(--violet-600);          /* fills: buttons, selected */
  --primary-hover: var(--violet-700);
  --primary-text: var(--violet-700);     /* links, icon accents on surface */
  --primary-soft: var(--violet-100);
  --on-primary: var(--ink-0);
  --on-primary-soft: var(--violet-800);

  --accent: var(--pink-600);             /* vibrant highlight, "pop" moments */
  --accent-hover: var(--pink-700);
  --accent-soft: var(--pink-100);
  --on-accent: var(--ink-0);
  --accent-text: var(--pink-700);

  --live: var(--cyan-700);               /* realtime / on-air indicators */
  --live-dot: var(--cyan-500);
  --live-soft: var(--cyan-100);

  --success: var(--green-700);  --success-soft: var(--green-100);  --on-success: var(--ink-0);
  --warning: var(--gold-700);   --warning-soft: var(--gold-100);   --on-warning: var(--ink-0);
  --danger: var(--red-700);     --danger-soft: var(--red-100);     --on-danger: var(--ink-0);
  --info: var(--blue-700);      --info-soft: var(--blue-100);
  --highlight: var(--gold-400); /* leaderboard gold, winners */

  --focus-ring: var(--violet-600);
  --focus-ring-offset: var(--surface);

  --shadow-sm: 0 1px 2px rgba(19, 19, 37, 0.06), 0 1px 1px rgba(19, 19, 37, 0.04);
  --shadow-md: 0 4px 12px rgba(19, 19, 37, 0.08), 0 1px 3px rgba(19, 19, 37, 0.06);
  --shadow-lg: 0 16px 40px rgba(19, 19, 37, 0.14), 0 4px 10px rgba(19, 19, 37, 0.06);
  --glow-primary: 0 0 0 0 transparent;

  /* trivia answers: colour + shape, text colour chosen for >=4.5:1 */
  --ans-0: #c8243a; --on-ans-0: var(--ink-0); /* triangle */
  --ans-1: var(--blue-600); --on-ans-1: var(--ink-0); /* diamond */
  --ans-2: var(--gold-400); --on-ans-2: var(--ink-900); /* circle */
  --ans-3: var(--green-700); --on-ans-3: var(--ink-0); /* square */

  /* ===== 3. COMPONENT ================================================== */
  --btn-height: 48px;
  --btn-height-sm: 40px;
  --btn-height-lg: 56px;
  --btn-radius: var(--radius-md);
  --card-bg: var(--surface);
  --card-border: var(--border);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-sm);
  --input-bg: var(--surface);
  --input-border: var(--border-strong);
  --input-radius: var(--radius-md);
  --chip-bg: var(--surface-sunken);
}

/* ---------- dark: follows the OS unless forced light; data-mode="dark" forces it.
   The same set appears twice (media query + attribute) to stay build-step free. */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode='light']) {
    color-scheme: dark;
    --bg: var(--ink-950);
    --bg-gradient: radial-gradient(1200px 600px at 0% -10%, rgba(124, 58, 237, 0.22), transparent 60%),
                   radial-gradient(900px 500px at 100% 0%, rgba(255, 61, 127, 0.14), transparent 60%),
                   radial-gradient(800px 500px at 50% 120%, rgba(34, 211, 238, 0.08), transparent 60%);
    --surface: var(--ink-900);
    --surface-2: var(--ink-850);
    --surface-sunken: var(--ink-1000);
    --surface-overlay: rgba(6, 6, 14, 0.72);
    --border: #2b2b46;
    --border-strong: #66668f;
    --text: #f3f3fa;
    --text-muted: #b0b0c8;
    --text-subtle: #8f8fab;
    --text-inverse: var(--ink-900);
    --primary: var(--violet-600);
    --primary-hover: var(--violet-700);
    --primary-text: var(--violet-300);
    --primary-soft: rgba(139, 92, 246, 0.18);
    --on-primary-soft: var(--violet-200);
    --accent: var(--pink-500);
    --accent-hover: var(--pink-400);
    --accent-soft: rgba(255, 61, 127, 0.16);
    --on-accent: var(--ink-950);
    --accent-text: var(--pink-300);
    --live: var(--cyan-300);
    --live-dot: var(--cyan-400);
    --live-soft: rgba(34, 211, 238, 0.14);
    --success: var(--green-400);  --success-soft: rgba(74, 222, 128, 0.14);  --on-success: var(--ink-950);
    --warning: var(--gold-400);   --warning-soft: rgba(251, 191, 36, 0.14);  --on-warning: var(--ink-950);
    --danger: var(--red-400);     --danger-soft: rgba(248, 113, 113, 0.14);  --on-danger: var(--ink-950);
    --info: var(--blue-400);      --info-soft: rgba(96, 165, 250, 0.14);
    --focus-ring: var(--violet-300);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
    --glow-primary: 0 0 24px rgba(139, 92, 246, 0.35);
    --input-bg: var(--ink-950);
    --chip-bg: var(--ink-850);
  }
}
:root[data-mode='dark'] {
  color-scheme: dark;
  --bg: var(--ink-950);
  --bg-gradient: radial-gradient(1200px 600px at 0% -10%, rgba(124, 58, 237, 0.22), transparent 60%),
                 radial-gradient(900px 500px at 100% 0%, rgba(255, 61, 127, 0.14), transparent 60%),
                 radial-gradient(800px 500px at 50% 120%, rgba(34, 211, 238, 0.08), transparent 60%);
  --surface: var(--ink-900);
  --surface-2: var(--ink-850);
  --surface-sunken: var(--ink-1000);
  --surface-overlay: rgba(6, 6, 14, 0.72);
  --border: #2b2b46;
  --border-strong: #66668f;
  --text: #f3f3fa;
  --text-muted: #b0b0c8;
  --text-subtle: #8f8fab;
  --text-inverse: var(--ink-900);
  --primary: var(--violet-600);
  --primary-hover: var(--violet-700);
  --primary-text: var(--violet-300);
  --primary-soft: rgba(139, 92, 246, 0.18);
  --on-primary-soft: var(--violet-200);
  --accent: var(--pink-500);
  --accent-hover: var(--pink-400);
  --accent-soft: rgba(255, 61, 127, 0.16);
  --on-accent: var(--ink-950);
  --accent-text: var(--pink-300);
  --live: var(--cyan-300);
  --live-dot: var(--cyan-400);
  --live-soft: rgba(34, 211, 238, 0.14);
  --success: var(--green-400);  --success-soft: rgba(74, 222, 128, 0.14);  --on-success: var(--ink-950);
  --warning: var(--gold-400);   --warning-soft: rgba(251, 191, 36, 0.14);  --on-warning: var(--ink-950);
  --danger: var(--red-400);     --danger-soft: rgba(248, 113, 113, 0.14);  --on-danger: var(--ink-950);
  --info: var(--blue-400);      --info-soft: rgba(96, 165, 250, 0.14);
  --focus-ring: var(--violet-300);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
  --glow-primary: 0 0 24px rgba(139, 92, 246, 0.35);
  --input-bg: var(--ink-950);
  --chip-bg: var(--ink-850);
}

/* ===== EVENT THEMES =====================================================
   Themes only touch "brand moment" tokens: accent, gradients, decoration.
   Core UI (text, surfaces, focus, status) stays Crowvio so it stays usable. */

:root[data-theme='festive'] {
  --theme-name: 'festive';
  --accent: #c41e3a;            --accent-hover: #a3162f;     --on-accent: var(--ink-0);
  --accent-soft: #fde7ea;       --accent-text: #a3162f;
  --theme-2: #13804a;           /* evergreen */
  --theme-3: var(--gold-400);   /* tinsel gold */
  --bg-gradient: radial-gradient(1000px 520px at 0% -10%, rgba(196, 30, 58, 0.10), transparent 60%),
                 radial-gradient(900px 520px at 100% 0%, rgba(19, 128, 74, 0.10), transparent 60%);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme='festive']:not([data-mode='light']) {
    --accent: #ff4d5e;           --accent-hover: #ff7380;    --on-accent: var(--ink-950);
    --accent-soft: rgba(255, 77, 94, 0.16);  --accent-text: #ff9aa4;
    --theme-2: #34c27a;
    --bg: #070d1f;               /* winter night */
    --surface: #0e1730;
    --surface-2: #142042;
    --border: #23305a;
    --border-strong: #5d70a8;
    --bg-gradient: radial-gradient(1100px 600px at 10% -10%, rgba(52, 194, 122, 0.14), transparent 60%),
                   radial-gradient(900px 520px at 100% 0%, rgba(255, 77, 94, 0.16), transparent 60%);
  }
}
:root[data-theme='festive'][data-mode='dark'] {
  --accent: #ff4d5e;           --accent-hover: #ff7380;    --on-accent: var(--ink-950);
  --accent-soft: rgba(255, 77, 94, 0.16);  --accent-text: #ff9aa4;
  --theme-2: #34c27a;
  --bg: #070d1f;
  --surface: #0e1730;
  --surface-2: #142042;
  --border: #23305a;
  --border-strong: #5d70a8;
  --bg-gradient: radial-gradient(1100px 600px at 10% -10%, rgba(52, 194, 122, 0.14), transparent 60%),
                 radial-gradient(900px 520px at 100% 0%, rgba(255, 77, 94, 0.16), transparent 60%);
}