/* ==========================================================================
   QuizMaster design tokens
   Everything visual (colour, type, spacing, radius, shadow, motion) starts
   here. Change a value once and the whole app follows.
   Themes: light is the default; [data-theme="dark"] overrides it.
   ========================================================================== */

:root {
  /* ----- Brand ----- */
  --color-primary: #5b4bff;
  --color-primary-hover: #4a3be6;
  --color-primary-soft: #eeecff;
  --color-on-primary: #ffffff;
  --color-accent: #ffb020;
  --color-accent-soft: #fff3d6;
  --gradient-brand: linear-gradient(135deg, #5b4bff 0%, #8a3cff 100%);
  --gradient-glow: radial-gradient(60% 55% at 50% 0%, rgba(91, 75, 255, 0.16), transparent 70%);

  /* ----- Neutrals (light) ----- */
  --color-bg: #f6f6fb;
  --color-surface: #ffffff;
  --color-surface-2: #f0f0f8;
  --color-border: #e3e3ef;
  --color-border-strong: #c9c9dd;
  --color-text: #13132a;
  --color-text-muted: #5a5a78;

  /* ----- Semantic ----- */
  --color-success: #0f7b53;
  --color-success-soft: #ddf4ea;
  --color-warning: #a35a00;
  --color-warning-soft: #fff0d9;
  --color-error: #c9283b;
  --color-error-soft: #fde4e8;
  --color-info: #1f5fd6;
  --color-info-soft: #e2ecff;

  /* ----- Difficulty badges ----- */
  --color-level-easy: var(--color-success);
  --color-level-medium: #a35a00;
  --color-level-hard: var(--color-error);
  --color-level-mixed: var(--color-primary);

  /* ----- Typography ----- */
  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.07rem + 0.3vw, 1.3rem);
  --text-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.8rem);
  --text-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.6rem);
  --text-3xl: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --tracking-tight: -0.03em;
  --tracking-snug: -0.015em;

  /* ----- Spacing (4px base) ----- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ----- Shape ----- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;
  --border-width: 1px;

  /* ----- Shadows ----- */
  --shadow-sm: 0 1px 2px rgba(19, 19, 42, 0.06), 0 1px 1px rgba(19, 19, 42, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(19, 19, 42, 0.14), 0 2px 6px rgba(19, 19, 42, 0.05);
  --shadow-lg: 0 24px 48px -16px rgba(40, 30, 120, 0.28), 0 4px 12px rgba(19, 19, 42, 0.06);
  --shadow-glow: 0 10px 30px -8px rgba(91, 75, 255, 0.55);
  --ring: 0 0 0 3px rgba(91, 75, 255, 0.4);

  /* ----- Layers ----- */
  --z-base: 1;
  --z-header: 50;
  --z-nav: 60;
  --z-menu: 70;
  --z-modal: 80;
  --z-toast: 90;
  --z-confetti: 95;

  /* ----- Motion ----- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 480ms;

  /* ----- Layout ----- */
  --container: 62rem;
  --container-narrow: 40rem;
  --header-height: 64px;
  --nav-height: 68px;

  color-scheme: light;
}

/* ----- Dark theme ----- */
[data-theme="dark"] {
  --color-primary: #8b7dff;
  --color-primary-hover: #a094ff;
  --color-primary-soft: rgba(139, 125, 255, 0.16);
  --color-on-primary: #0b0a20;
  --color-accent: #ffbe3d;
  --color-accent-soft: rgba(255, 190, 61, 0.14);
  --gradient-brand: linear-gradient(135deg, #8b7dff 0%, #b27dff 100%);
  --gradient-glow: radial-gradient(60% 55% at 50% 0%, rgba(139, 125, 255, 0.22), transparent 70%);

  --color-bg: #0a0a16;
  --color-surface: #13132b;
  --color-surface-2: #1b1b38;
  --color-border: #272748;
  --color-border-strong: #3a3a64;
  --color-text: #f2f2fc;
  --color-text-muted: #a9a9c9;

  --color-success: #3ddc97;
  --color-success-soft: rgba(61, 220, 151, 0.14);
  --color-warning: #ffb454;
  --color-warning-soft: rgba(255, 180, 84, 0.14);
  --color-error: #ff6b7f;
  --color-error-soft: rgba(255, 107, 127, 0.14);
  --color-info: #6ea2ff;
  --color-info-soft: rgba(110, 162, 255, 0.14);

  --color-level-medium: #ffb454;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 28px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 28px 56px -16px rgba(0, 0, 0, 0.75), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 10px 34px -8px rgba(139, 125, 255, 0.55);
  --ring: 0 0 0 3px rgba(139, 125, 255, 0.55);

  color-scheme: dark;
}