:root {
  
  --c-cyan:           #00B5FF;
  --c-blue-deep:      #0E56B4;
  --c-green-light:    #A0C86E;
  --c-green-deep:     #57A13C;
  --c-orange-light:   #F0AA64;
  --c-orange-deep:    #CC7F3A;
  --c-purple-light:   #916EDC;
  --c-purple-deep:    #5C3BAB;
  --c-pink:           #E763D6;
  --c-magenta-deep:   #B840A9;
  --c-gray-light:     #B7B7B7;
  --c-gray-dark:      #929292;
  --c-black:          #000000;
  --c-white:          #FFFFFF;

  --surface-card:     rgba(0, 0, 0, 0.55);
  --surface-card-hi:  rgba(20, 20, 28, 0.72);
  --surface-toolbar:  rgba(8, 8, 14, 0.78);
  --surface-overlay:  rgba(0, 0, 0, 0.78);
  --border-card:      rgba(255, 255, 255, 0.08);
  --border-card-hi:   rgba(255, 255, 255, 0.18);

  --text-primary:     #FFFFFF;
  --text-secondary:   rgba(255, 255, 255, 0.72);
  --text-muted:       rgba(255, 255, 255, 0.48);
  --text-on-bright:   #0A0A12;

  --grad-intro-1: var(--c-blue-deep);
  --grad-intro-2: var(--c-cyan);
  --grad-intro-3: var(--c-purple-light);

  --grad-trivia-1: var(--c-purple-deep);
  --grad-trivia-2: var(--c-magenta-deep);
  --grad-trivia-3: var(--c-pink);

  --grad-scratcher-1: var(--c-purple-deep);
  --grad-scratcher-2: var(--c-purple-light);
  --grad-scratcher-3: var(--c-magenta-deep);

  --grad-video-1: var(--c-magenta-deep);
  --grad-video-2: var(--c-purple-deep);
  --grad-video-3: var(--c-cyan);

  --grad-shop-1: var(--c-green-deep);
  --grad-shop-2: var(--c-green-light);
  --grad-shop-3: var(--c-orange-light);

  --grad-ugc-1: var(--c-pink);
  --grad-ugc-2: var(--c-magenta-deep);
  --grad-ugc-3: var(--c-cyan);

  --grad-outro-1: var(--c-cyan);
  --grad-outro-2: var(--c-blue-deep);
  --grad-outro-3: var(--c-green-deep);

  /* Results screen — restricted to blue + purple variants only so the
   * orange/white headers and bright tile chrome remain readable. */
  --grad-results-1: var(--c-blue-deep);
  --grad-results-2: var(--c-purple-deep);
  --grad-results-3: var(--c-purple-light);

  --grad-active-1: var(--grad-intro-1);
  --grad-active-2: var(--grad-intro-2);
  --grad-active-3: var(--grad-intro-3);

  --font-display: "Bungee", "Bungee Inline", "Arial Black", system-ui, sans-serif;
  --font-display-shade: "Bungee Shade", "Bungee", "Arial Black", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-display:  clamp(2.25rem, 8vw, 3rem);
  --fs-h1:       1.75rem;
  --fs-h2:       1.25rem;
  --fs-body:     1rem;
  --fs-small:    0.875rem;
  --fs-label:    0.75rem;

  --lh-display:  1.0;
  --lh-heading:  1.1;
  --lh-body:     1.4;

  --letterspace-label: 0.08em;
  --letterspace-display: 0.02em;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  --r-pill:  999px;
  --r-card:  24px;
  --r-chip:  12px;
  --r-input: 14px;

  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decel:   cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-accel:   cubic-bezier(0.3, 0, 1, 1);

  --dur-instant: 120ms;
  --dur-fast:    240ms;
  --dur-base:    400ms;
  --dur-slow:    800ms;
  --dur-drift:   48000ms;

  --z-bg:        -1;
  --z-feed:      1;
  --z-counter:   100;
  --z-toast:     200;
  --z-overlay:   300;
  --z-sim:       400;
  --z-particles: 500;
  --z-flying:    600;

  --tap-min: 44px;
  --btn-min: 48px;

  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast:    1ms;
    --dur-base:    1ms;
    --dur-slow:    1ms;
    --dur-drift:   1ms;
  }
}