/* ============================================================
   KNOWLEDGE HUNT — design tokens
   ------------------------------------------------------------
   Every colour, font and shape the components use is declared
   here as a semantic token. A skin is one `[data-theme="…"]`
   block overriding those tokens — style.css never names a
   literal colour, so adding a skin touches this file only
   (plus the decor entry in src/themes.js).

   Tokens ending in -rgb hold a space-separated triplet, used as
   `rgb(var(--primary-rgb) / 0.2)` wherever alpha is needed.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:ital,wght@0,600;0,700;0,800;1,700;1,800;1,900&family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Fredoka:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&family=Outfit:wght@500;600;700;800&display=swap');

:root {
  /* Shape — shared across skins */
  --radius-blob: 50% 50% 50% 50% / 60% 60% 40% 40%;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --shadow-soft: 0 4px 24px rgb(var(--shadow-rgb) / 0.12);
  --shadow-float: 0 8px 40px rgb(var(--shadow-rgb) / 0.18);
  --shadow-btn: 0 4px 16px rgb(var(--primary-rgb) / 0.3);
  --shadow-btn-hover: 0 6px 24px rgb(var(--primary-rgb) / 0.4);

  /* Sticker language: chunky borders + hard offset shadows, no blur.
     This is what gives the whole UI its tactile, collectible feel. */
  --stroke: 3px;
  --hard: 5px 5px 0 var(--ink);
  --hard-sm: 3px 3px 0 var(--ink);
  --hard-lg: 8px 8px 0 var(--ink);
  --hard-press: 2px 2px 0 var(--ink);

  /* Motion — one overshoot curve used everywhere, so presses feel consistent */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Paper grain, inlined so nothing loads over the network */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- knowledge (default skin) ---------- */
:root,
[data-theme='knowledge'] {
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  --bg: #F5F6FF;
  --bg-elev: #FFFFFF;
  --fg: #1E2139;
  --fg-muted: #6B7194;
  --border: #DDE1F5;

  --primary: #6366F1;
  --primary-strong: #3730A3;
  --primary-soft: #E0E2FF;
  --primary-contrast: #FFFFFF;
  --on-bright: #1E2139;
  --ink: #1E2139;
  --card: #FFFFFF;
  --paper: #FDFDFF;
  --primary-rgb: 99 102 241;

  --accent: #EC4899;
  --accent-soft: #FCE7F3;
  --accent-rgb: 236 72 153;

  --highlight: #22D3EE;
  --highlight-soft: #CFFAFE;
  --extra: #A78BFA;
  --extra-soft: #EDE9FE;
  --warm: #F59E0B;

  --ok: #10B981;
  --ok-soft: #D1FAE5;
  --danger: #E11D48;
  --danger-soft: #FFE4E6;

  --shadow-rgb: 55 48 163;

  /* Leaderboard "stage" (its own dark surface, themed per skin) */
  --stage: #0F1128;
  --stage-elev: #191C3A;
  --stage-card: #202449;
  --stage-fg: #FFFFFF;
  --glow-1: #22D3EE;
  --glow-2: #818CF8;
  --glow-3: #FBBF24;
  --glow-1-rgb: 34 211 238;
}

/* ---------- emerald garden (the original look) ---------- */
[data-theme='emerald'] {
  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  --bg: #FFF8E7;
  --bg-elev: #FFFFFF;
  --fg: #2D3436;
  --fg-muted: #7C8B85;
  --border: #B7E4C7;

  --primary: #52B788;
  --primary-strong: #2D6A4F;
  --primary-soft: #B7E4C7;
  --primary-contrast: #FFFFFF;
  --on-bright: #2D6A4F;
  --ink: #22453A;
  --card: #FFFFFF;
  --paper: #FFFDF6;
  --primary-rgb: 82 183 136;

  --accent: #FF6B9D;
  --accent-soft: #FFB3D0;
  --accent-rgb: 255 107 157;

  --highlight: #FFD93D;
  --highlight-soft: #FFF3B0;
  --extra: #C9B1FF;
  --extra-soft: #E8DEFF;
  --warm: #FF8A65;

  --ok: #52B788;
  --ok-soft: #D4EDDA;
  --danger: #E74C3C;
  --danger-soft: #FFE0E6;

  --shadow-rgb: 45 106 79;

  --stage: #1A1A2E;
  --stage-elev: #16213E;
  --stage-card: #1E2D4A;
  --stage-fg: #FFFFFF;
  --glow-1: #00F5A0;
  --glow-2: #FF6B9D;
  --glow-3: #FFD700;
  --glow-1-rgb: 0 245 160;
}

/* ---------- sunset ---------- */
[data-theme='sunset'] {
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  --bg: #FFF7ED;
  --bg-elev: #FFFFFF;
  --fg: #431407;
  --fg-muted: #9A6A4B;
  --border: #FED7AA;

  --primary: #F97316;
  --primary-strong: #9A3412;
  --primary-soft: #FFEDD5;
  --primary-contrast: #FFFFFF;
  --on-bright: #9A3412;
  --ink: #4A1B08;
  --card: #FFFFFF;
  --paper: #FFFCF7;
  --primary-rgb: 249 115 22;

  --accent: #F43F5E;
  --accent-soft: #FFE4E6;
  --accent-rgb: 244 63 94;

  --highlight: #FBBF24;
  --highlight-soft: #FEF3C7;
  --extra: #C084FC;
  --extra-soft: #F3E8FF;
  --warm: #FB7185;

  --ok: #16A34A;
  --ok-soft: #DCFCE7;
  --danger: #DC2626;
  --danger-soft: #FEE2E2;

  --shadow-rgb: 154 52 18;

  --stage: #1C1006;
  --stage-elev: #2A1A0C;
  --stage-card: #3A2412;
  --stage-fg: #FFF7ED;
  --glow-1: #FB923C;
  --glow-2: #F43F5E;
  --glow-3: #FBBF24;
  --glow-1-rgb: 251 146 60;
}

/* ---------- studentefoire (poster palette: aubergine + turquoise) ---------- */
[data-theme='studentefoire'] {
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  --bg: #6C2A6C;
  --bg-elev: #7E3B7E;
  --fg: #FFFFFF;
  --fg-muted: #D8BEE2;
  --border: #9A5C9A;

  --primary: #7FCFC6;
  --primary-strong: #A9E3DC;   /* lighter, so headings read on the aubergine */
  --primary-soft: #8E4E8E;
  --primary-contrast: #3F153F; /* text on turquoise buttons */
  --on-bright: #3F153F;
  --ink: #2E0F2E;
  --card: #8B4A8B;
  --paper: #7E3B7E;
  --primary-rgb: 127 207 198;

  /* The poster is a two-colour identity: turquoise is the accent, not the
     lavender. A lavender call-to-action reads as disabled on the aubergine. */
  --accent: #7FCFC6;
  --accent-soft: #8E4E8E;
  --accent-rgb: 127 207 198;

  --highlight: #C7A4D6;
  --highlight-soft: #4E1F4E;
  --extra: #EDE3F4;
  --extra-soft: #8E4E8E;
  --warm: #A9E3DC;

  --ok: #7FCFC6;
  --ok-soft: #3E5F5C;
  --danger: #FF8FAE;
  --danger-soft: #6B2846;

  --shadow-rgb: 30 8 30;

  --stage: #4E1F4E;
  --stage-elev: #5D255D;
  --stage-card: #6C2A6C;
  --stage-fg: #FFFFFF;
  --glow-1: #7FCFC6;
  --glow-2: #C7A4D6;
  --glow-3: #FFFFFF;
  --glow-1-rgb: 127 207 198;
}

/* Poster-style italic display type */
[data-theme='studentefoire'] .title-main,
[data-theme='studentefoire'] .lb-title {
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* ---------- midnight (dark player pages) ---------- */
[data-theme='midnight'] {
  --font-display: 'Anton', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  --bg: #0B1020;
  --bg-elev: #151B33;
  --fg: #E8ECFF;
  --fg-muted: #94A0C8;
  --border: #2A3457;

  --primary: #38BDF8;
  --primary-strong: #7DD3FC;
  --primary-soft: #1E3A5F;
  --primary-contrast: #06131F;
  --on-bright: #06131F;
  --ink: #02060F;
  --card: #1B2340;
  --paper: #151B33;
  --primary-rgb: 56 189 248;

  --accent: #E879F9;
  --accent-soft: #4A1D52;
  --accent-rgb: 232 121 249;

  --highlight: #5EEAD4;
  --highlight-soft: #134E4A;
  --extra: #818CF8;
  --extra-soft: #29306B;
  --warm: #FBBF24;

  --ok: #34D399;
  --ok-soft: #123D30;
  --danger: #FB7185;
  --danger-soft: #4C1D24;

  --shadow-rgb: 0 0 0;

  --stage: #060A16;
  --stage-elev: #0F1528;
  --stage-card: #161E38;
  --stage-fg: #E8ECFF;
  --glow-1: #38BDF8;
  --glow-2: #E879F9;
  --glow-3: #5EEAD4;
  --glow-1-rgb: 56 189 248;
}