/* ==========================================================================
   Wishfill website - DESIGN TOKENS
   Everything that defines the look lives here. Three directions, switched with
   <html data-theme="a|b|c">  (use ?theme=a|b|c in the address bar; add &dev to show the switcher).
     a  "Gloop Arcade"  bright, bouncy, sticker-and-game energy
     b  "Quiet Jar"     calm, warm, editorial, premium family product
     c  "Slime Lab"     bold, graphic, dark, neon goo
   Fonts are self-hosted (assets/fonts). A browser only downloads the fonts of the active theme.
   ========================================================================== */

@font-face{font-family:"Fredoka";src:url("../fonts/fredoka.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Nunito";src:url("../fonts/nunito.woff2") format("woff2");font-weight:200 1000;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/dm-sans.woff2") format("woff2");font-weight:100 1000;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-grotesque.woff2") format("woff2");font-weight:200 800;font-display:swap}

/* ---- shared, direction-independent tokens (these carry meaning, so they do not change) ---- */
:root{
  --tier-common:#9fb3c8; --tier-uncommon:#2fbf8f; --tier-rare:#4f86f7; --tier-epic:#a45be0; --tier-legendary:#f2b134;
  --maxw:1180px;
}

/* ---- A: Gloop Arcade (default) ---- */
:root,[data-theme="a"]{
  color-scheme:light;
  --font-display:"Fredoka",system-ui,sans-serif; --font-body:"Nunito",system-ui,sans-serif;
  --bg:#fff6ea; --bg-alt:#ffe9cf; --ink:#2a1a58; --ink-soft:#54457f; --line:#2a1a58; --card:#ffffff;
  --accent:#d42a62; --accent-ink:#ffffff; --accent-2:#7b4dff; --accent-3:#ffcf3f; --accent-4:#2fbf8f; --ok-text:#0f7a58; --ok-bg:#2fbf8f; --ok-fg:#06281c;
  --hero-bg:#2a1a58; --hero-ink:#fff6ea; --hero-soft:#d9cdfa; --stage-bg:#1d0f45;
  --dark-bg:#2a1a58; --dark-ink:#fff6ea;
  --goo-1:#ff77a6; --goo-2:#e0306a; --lid:#7b4dff; --glass:#ffffffbf;
  --radius-s:12px; --radius-m:22px; --radius-l:34px; --border-w:3px;
  --shadow-card:6px 6px 0 var(--ink); --shadow-btn:4px 4px 0 var(--ink); --shadow-btn-press:1px 1px 0 var(--ink);
  --h1-size:clamp(2.7rem,6.4vw,5.4rem); --h1-weight:700; --h1-track:-.015em; --h1-lh:1.02;
  --h2-size:clamp(2rem,4.2vw,3.5rem); --h2-weight:700; --body-size:1.125rem;
  --section-pad:clamp(4.2rem,9vw,7.5rem);
  --wiggle:1;
}

/* ---- B: Quiet Jar ---- */
[data-theme="b"]{
  color-scheme:light;
  --font-display:"Fraunces",Georgia,serif; --font-body:"DM Sans",system-ui,sans-serif;
  --bg:#f6f0e4; --bg-alt:#ece3d1; --ink:#1d3b34; --ink-soft:#4a625b; --line:#cfc5b0; --card:#fffdf8;
  --accent:#a93d27; --accent-ink:#ffffff; --accent-2:#5f8a7a; --accent-3:#e0a93b; --accent-4:#5f8a7a; --ok-text:#35614f; --ok-bg:#35614f; --ok-fg:#ffffff;
  --hero-bg:#f6f0e4; --hero-ink:#1d3b34; --hero-soft:#4a625b; --stage-bg:#ece3d1;
  --dark-bg:#1d3b34; --dark-ink:#f6f0e4;
  --goo-1:#e07a5f; --goo-2:#b8452d; --lid:#1d3b34; --glass:#1d3b3466;
  --radius-s:10px; --radius-m:18px; --radius-l:30px; --border-w:1px;
  --shadow-card:0 18px 44px rgba(29,59,52,.12); --shadow-btn:0 8px 20px rgba(169,61,39,.28); --shadow-btn-press:0 2px 6px rgba(169,61,39,.3);
  --h1-size:clamp(2.6rem,6vw,5rem); --h1-weight:500; --h1-track:-.025em; --h1-lh:1.04;
  --h2-size:clamp(2rem,4vw,3.3rem); --h2-weight:500; --body-size:1.125rem;
  --section-pad:clamp(4.5rem,10vw,8.5rem);
  --wiggle:.4;
}

/* ---- C: Slime Lab ---- */
[data-theme="c"]{
  color-scheme:dark;
  --font-display:"Bricolage Grotesque",system-ui,sans-serif; --font-body:"DM Sans",system-ui,sans-serif;
  --bg:#0c0e13; --bg-alt:#12151c; --ink:#f4f6ff; --ink-soft:#a9b0c6; --line:#2a2f3d; --card:#171a23;
  --accent:#c6ff3d; --accent-ink:#0c0e13; --accent-2:#ff3df2; --accent-3:#3de8ff; --accent-4:#c6ff3d; --ok-text:#c6ff3d; --ok-bg:#c6ff3d; --ok-fg:#0c0e13;
  --hero-bg:#0c0e13; --hero-ink:#f4f6ff; --hero-soft:#a9b0c6; --stage-bg:#171a23;
  --dark-bg:#0c0e13; --dark-ink:#f4f6ff;
  --goo-1:#d8ff6a; --goo-2:#86d11a; --lid:#ff3df2; --glass:#ffffff66;
  --radius-s:8px; --radius-m:14px; --radius-l:22px; --border-w:2px;
  --shadow-card:6px 6px 0 #c6ff3d; --shadow-btn:5px 5px 0 #ff3df2; --shadow-btn-press:1px 1px 0 #ff3df2;
  --h1-size:clamp(3rem,9vw,8rem); --h1-weight:800; --h1-track:-.04em; --h1-lh:.95;
  --h2-size:clamp(2.2rem,5.2vw,4.4rem); --h2-weight:800; --body-size:1.125rem;
  --section-pad:clamp(4rem,8vw,7rem);
  --wiggle:1.4;
}