/* ============================================================
   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;

  /* The skin is split in two on purpose, and this is the only place in the
     project where those two halves are different hues.
     - **Indigo is the page**: --bg, --paper, --border, and the ink the body text
       and every hard shadow are drawn in (--fg, --ink). Plus the atmosphere,
       through --pool-rgb.
     - **Aubergine is the emphasis**: the whole --primary family. #622A6A is the
       client's logo colour, and it carries the solid fills (buttons, the active
       tab, the timer bar, the podium blocks), the alpha tints derived from it
       through --primary-rgb, the pale ground --primary-soft, and the display
       type — the big titles, the scores, the code on the badge.
     --primary-strong is the client's colour itself rather than a darker shade of
     it: at 9.5:1 on the page it is comfortably legible at any size, and the app
     is better with one purple than with two. The whole palette was moved to
     aubergine once, neutrals included, and the two atmosphere pools then sat one
     hue apart and washed the page pink. */
  --bg: #F5F6FF;
  --bg-elev: #FFFFFF;
  --fg: #1E2139;
  --fg-muted: #6B7194;
  --border: #DDE1F5;

  --primary: #622A6A;
  --primary-strong: #622A6A;
  --primary-soft: #F3E5F5;
  --primary-contrast: #FFFFFF;
  --on-bright: #1E2139;
  --ink: #1E2139;
  --card: #FFFFFF;
  --paper: #FDFDFF;
  --primary-rgb: 98 42 106;
  /* The atmosphere pool, which every other skin takes from --primary-rgb. Here
     it must not: the top-left pool is the page's own hue, not the buttons'. */
  --pool-rgb: 99 102 241;
  --fg-rgb: 30 33 57;

  --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;
}

/* ---------- 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;
  --fg-rgb: 45 52 54;

  --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;

}

/* ---------- 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;
  --fg-rgb: 67 20 7;

  --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;

}

/* ---------- 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;
  --fg-rgb: 255 255 255;

  /* 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;

}

/* 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;
  --fg-rgb: 232 236 255;

  --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;

}