/* ===========================================================
   Char Quiz — Season Themes
   Each season can pick one of 8 skins. A skin only overrides the
   accent/surface tokens; structural tokens (radius, spacing, font,
   shadow) stay the same across themes so layout never shifts.
   Applied via [data-skin="..."] alongside the existing
   [data-theme="light|dark"] attribute.
   =========================================================== */

/* ---------- 1. Sunset Pop (default) ---------- */
[data-skin="sunset"][data-theme="light"] {
  --color-bg: #fff5fa;
  --color-surface: #ffffff;
  --color-surface-2: #fdeef8;
  --color-surface-offset: #fbe3f2;
  --color-border: #f5cfe6;
  --color-divider: #f8ddee;
  --color-text: #4a2f45;
  --color-text-muted: #93758c;
  --color-text-faint: #d0b3c6;
  --color-primary: #ec6cb9;
  --color-primary-hover: #e2549f;
  --color-primary-active: #cf3f8b;
  --color-primary-highlight: #fce0f1;
  --color-accent-2: #b48af0;
  --color-accent-2-highlight: #ece0fc;
  --color-mint: #7fd9c4;
  --color-mint-highlight: #ddf6ef;
}
[data-skin="sunset"][data-theme="dark"] {
  --color-bg: #241823;
  --color-surface: #301f2e;
  --color-surface-2: #3a2538;
  --color-surface-offset: #432c40;
  --color-border: #5a3d56;
  --color-divider: #4a3147;
  --color-text: #fbe9f5;
  --color-text-muted: #cba3c2;
  --color-text-faint: #8f6e89;
  --color-primary: #f487cf;
  --color-primary-hover: #f79ed8;
  --color-primary-active: #ec6cb9;
  --color-primary-highlight: #4d2e48;
  --color-accent-2: #c7a6f7;
  --color-accent-2-highlight: #40325a;
  --color-mint: #8fe6d1;
  --color-mint-highlight: #24463f;
}

/* ---------- 2. Birthday Confetti ---------- */
[data-skin="confetti"][data-theme="light"] {
  --color-bg: #fffaf0;
  --color-surface: #ffffff;
  --color-surface-2: #fff3d6;
  --color-surface-offset: #ffe9b8;
  --color-border: #ffdd9c;
  --color-divider: #ffe7b3;
  --color-text: #4a3319;
  --color-text-muted: #9c8264;
  --color-text-faint: #dcc79f;
  --color-primary: #ff5c66;
  --color-primary-hover: #f2434f;
  --color-primary-active: #db2c39;
  --color-primary-highlight: #ffe0e2;
  --color-accent-2: #3aa0e8;
  --color-accent-2-highlight: #dcefff;
  --color-mint: #ffcb3d;
  --color-mint-highlight: #fff2cf;
}
[data-skin="confetti"][data-theme="dark"] {
  --color-bg: #241c12;
  --color-surface: #33291a;
  --color-surface-2: #3d311e;
  --color-surface-offset: #473924;
  --color-border: #5c4a2c;
  --color-divider: #4c3d25;
  --color-text: #fdefd8;
  --color-text-muted: #ccb083;
  --color-text-faint: #8a7350;
  --color-primary: #ff7f87;
  --color-primary-hover: #ff939a;
  --color-primary-active: #ff5c66;
  --color-primary-highlight: #522a2c;
  --color-accent-2: #6fbdf2;
  --color-accent-2-highlight: #24425a;
  --color-mint: #ffd970;
  --color-mint-highlight: #4a3c1c;
}

/* ---------- 3. Ocean Breeze ---------- */
[data-skin="ocean"][data-theme="light"] {
  --color-bg: #f0fbfc;
  --color-surface: #ffffff;
  --color-surface-2: #e2f6f8;
  --color-surface-offset: #d0eff2;
  --color-border: #b7e4e9;
  --color-divider: #cdedf0;
  --color-text: #143b42;
  --color-text-muted: #5f8a90;
  --color-text-faint: #a9cdd1;
  --color-primary: #17a2b8;
  --color-primary-hover: #148a9d;
  --color-primary-active: #107485;
  --color-primary-highlight: #d6f0f4;
  --color-accent-2: #ff8c69;
  --color-accent-2-highlight: #ffe4d9;
  --color-mint: #4dd0c4;
  --color-mint-highlight: #d7f5f1;
}
[data-skin="ocean"][data-theme="dark"] {
  --color-bg: #0f2226;
  --color-surface: #163338;
  --color-surface-2: #1c3d42;
  --color-surface-offset: #21474d;
  --color-border: #2c5a60;
  --color-divider: #294f54;
  --color-text: #dff6f8;
  --color-text-muted: #9dc7cb;
  --color-text-faint: #587a7e;
  --color-primary: #3fc1d8;
  --color-primary-hover: #5fcfe2;
  --color-primary-active: #17a2b8;
  --color-primary-highlight: #1c454c;
  --color-accent-2: #ff9d7d;
  --color-accent-2-highlight: #4a3128;
  --color-mint: #67ddd1;
  --color-mint-highlight: #1f4844;
}

/* ---------- 4. Galaxy Night ---------- */
[data-skin="galaxy"][data-theme="light"] {
  --color-bg: #f6f3ff;
  --color-surface: #ffffff;
  --color-surface-2: #ece3fc;
  --color-surface-offset: #ddccfa;
  --color-border: #cbb4f0;
  --color-divider: #ddccfa;
  --color-text: #2c1a4d;
  --color-text-muted: #7965a3;
  --color-text-faint: #c0aede;
  --color-primary: #7b3ff2;
  --color-primary-hover: #6a2fe0;
  --color-primary-active: #5824c2;
  --color-primary-highlight: #e6d9fd;
  --color-accent-2: #ff5fa8;
  --color-accent-2-highlight: #ffdcee;
  --color-mint: #4fd8e8;
  --color-mint-highlight: #d6f6fa;
}
[data-skin="galaxy"][data-theme="dark"] {
  --color-bg: #14092b;
  --color-surface: #1e1140;
  --color-surface-2: #26154d;
  --color-surface-offset: #2f1a5c;
  --color-border: #452b7d;
  --color-divider: #392470;
  --color-text: #f1eaff;
  --color-text-muted: #b6a2df;
  --color-text-faint: #6a5498;
  --color-primary: #a578ff;
  --color-primary-hover: #b691ff;
  --color-primary-active: #7b3ff2;
  --color-primary-highlight: #3a2570;
  --color-accent-2: #ff7ebd;
  --color-accent-2-highlight: #562b45;
  --color-mint: #6fe6f2;
  --color-mint-highlight: #1c4a50;
}

/* ---------- 5. Spring Garden ---------- */
[data-skin="garden"][data-theme="light"] {
  --color-bg: #f6fcf0;
  --color-surface: #ffffff;
  --color-surface-2: #e9f7dd;
  --color-surface-offset: #dcf2c9;
  --color-border: #c3e6a5;
  --color-divider: #dcf2c9;
  --color-text: #2e4017;
  --color-text-muted: #708a55;
  --color-text-faint: #bcd39e;
  --color-primary: #6aab2e;
  --color-primary-hover: #5c9527;
  --color-primary-active: #4d7d20;
  --color-primary-highlight: #e2f2cf;
  --color-accent-2: #ffb84d;
  --color-accent-2-highlight: #ffedcf;
  --color-mint: #ff8fab;
  --color-mint-highlight: #ffe3ea;
}
[data-skin="garden"][data-theme="dark"] {
  --color-bg: #15200d;
  --color-surface: #1e2e13;
  --color-surface-2: #253818;
  --color-surface-offset: #2c421d;
  --color-border: #3c5828;
  --color-divider: #334b22;
  --color-text: #eaf6de;
  --color-text-muted: #accb8d;
  --color-text-faint: #5e7a49;
  --color-primary: #8fc857;
  --color-primary-hover: #a1d56d;
  --color-primary-active: #6aab2e;
  --color-primary-highlight: #33481f;
  --color-accent-2: #ffca70;
  --color-accent-2-highlight: #4d3a1c;
  --color-mint: #ffa3ba;
  --color-mint-highlight: #4a2833;
}

/* ---------- 6. Candy Shop ---------- */
[data-skin="candy"][data-theme="light"] {
  --color-bg: #fef6fb;
  --color-surface: #ffffff;
  --color-surface-2: #fce8f5;
  --color-surface-offset: #f9d9ec;
  --color-border: #f3bfe0;
  --color-divider: #f9d9ec;
  --color-text: #4d1f3d;
  --color-text-muted: #9b6b8c;
  --color-text-faint: #dcb0cc;
  --color-primary: #ff4fa3;
  --color-primary-hover: #f5308e;
  --color-primary-active: #d81f79;
  --color-primary-highlight: #ffdcef;
  --color-accent-2: #6ee7d8;
  --color-accent-2-highlight: #dbfbf4;
  --color-mint: #b98cf0;
  --color-mint-highlight: #ece0fc;
}
[data-skin="candy"][data-theme="dark"] {
  --color-bg: #2a1522;
  --color-surface: #391d30;
  --color-surface-2: #45243b;
  --color-surface-offset: #512b45;
  --color-border: #6b3a5c;
  --color-divider: #59304c;
  --color-text: #fce4f1;
  --color-text-muted: #d19cbd;
  --color-text-faint: #8a5876;
  --color-primary: #ff7cbe;
  --color-primary-hover: #ff94c9;
  --color-primary-active: #ff4fa3;
  --color-primary-highlight: #562a45;
  --color-accent-2: #82f0e0;
  --color-accent-2-highlight: #1f4a45;
  --color-mint: #cba6f7;
  --color-mint-highlight: #3d2f5a;
}

/* ---------- 7. Autumn Harvest ---------- */
[data-skin="autumn"][data-theme="light"] {
  --color-bg: #fdf6ef;
  --color-surface: #ffffff;
  --color-surface-2: #fbe8d6;
  --color-surface-offset: #f7d8b8;
  --color-border: #ecc191;
  --color-divider: #f7d8b8;
  --color-text: #4a2c14;
  --color-text-muted: #9c7a56;
  --color-text-faint: #d9b98d;
  --color-primary: #d1611f;
  --color-primary-hover: #b8511a;
  --color-primary-active: #9c4315;
  --color-primary-highlight: #f6ddc4;
  --color-accent-2: #9c2b3c;
  --color-accent-2-highlight: #f0d3d8;
  --color-mint: #c9a227;
  --color-mint-highlight: #f2e6c1;
}
[data-skin="autumn"][data-theme="dark"] {
  --color-bg: #241a10;
  --color-surface: #33261a;
  --color-surface-2: #3d2e1f;
  --color-surface-offset: #473624;
  --color-border: #5c452c;
  --color-divider: #4c3a25;
  --color-text: #f7e6d2;
  --color-text-muted: #c9a883;
  --color-text-faint: #8a7050;
  --color-primary: #e8873f;
  --color-primary-hover: #ee9a58;
  --color-primary-active: #d1611f;
  --color-primary-highlight: #4d3220;
  --color-accent-2: #d05f70;
  --color-accent-2-highlight: #4a2830;
  --color-mint: #d9b94c;
  --color-mint-highlight: #453a1e;
}

/* ---------- 8. Winter Wonderland ---------- */
[data-skin="winter"][data-theme="light"] {
  --color-bg: #f2f8fc;
  --color-surface: #ffffff;
  --color-surface-2: #e4eff8;
  --color-surface-offset: #d2e4f2;
  --color-border: #b9d4e8;
  --color-divider: #d2e4f2;
  --color-text: #1c3347;
  --color-text-muted: #647f94;
  --color-text-faint: #aec6d9;
  --color-primary: #2f7fd6;
  --color-primary-hover: #256bb8;
  --color-primary-active: #1c579a;
  --color-primary-highlight: #d8e9f9;
  --color-accent-2: #d6489a;
  --color-accent-2-highlight: #fbdcef;
  --color-mint: #7fd6d0;
  --color-mint-highlight: #dcf4f2;
}
[data-skin="winter"][data-theme="dark"] {
  --color-bg: #0f1c26;
  --color-surface: #172835;
  --color-surface-2: #1e323f;
  --color-surface-offset: #243c4a;
  --color-border: #335263;
  --color-divider: #2b4552;
  --color-text: #e5f1f9;
  --color-text-muted: #9dbdd1;
  --color-text-faint: #547289;
  --color-primary: #5fa4e8;
  --color-primary-hover: #78b4ee;
  --color-primary-active: #2f7fd6;
  --color-primary-highlight: #1f3d54;
  --color-accent-2: #ea78bb;
  --color-accent-2-highlight: #4a2a40;
  --color-mint: #8fe2dc;
  --color-mint-highlight: #1f4a47;
}