[data-theme="dark"] {
  --color-bg: #121212;
  --color-surface: #1E1E1E;
  --color-surface-alt: #2A2A2A;
  --color-text: #E8E6E3;
  --color-text-muted: #A0A0A0;
  --color-text-light: #707070;
  --color-border: #3A3A3A;

  --color-primary: #FC8181;
  --color-primary-hover: #FEB2B2;
  --color-primary-light: #2D1515;

  --color-success: #68D391;
  --color-success-light: #1A2E1A;
  --color-warning: #F6E05E;
  --color-warning-light: #2D2A0E;
  --color-error: #FC8181;
  --color-error-light: #2D1515;

  --color-npc-bubble: #2A2A2A;
  --color-user-bubble: #9B2C2C;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.5);
}

/* Ocean Theme (150 XP) */
[data-theme="ocean"] {
  --color-bg: #0B1929;
  --color-surface: #112240;
  --color-surface-alt: #1A3358;
  --color-text: #CCD6F6;
  --color-text-muted: #8892B0;
  --color-text-light: #606A86;
  --color-border: #233554;

  --color-primary: #64FFDA;
  --color-primary-hover: #4CD8B4;
  --color-primary-light: #0D2A2A;

  --color-success: #64FFDA;
  --color-success-light: #0D2A2A;
  --color-warning: #FFD166;
  --color-warning-light: #2A250D;
  --color-error: #FF6B6B;
  --color-error-light: #2A0D0D;

  --color-npc-bubble: #1A3358;
  --color-user-bubble: #0E7C6B;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.5);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.6);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.6);
}

/* Forest Theme (150 XP) */
[data-theme="forest"] {
  --color-bg: #1A2F1A;
  --color-surface: #243524;
  --color-surface-alt: #2E4230;
  --color-text: #D4E8D0;
  --color-text-muted: #8FAE8A;
  --color-text-light: #5E7A58;
  --color-border: #3A5A3A;

  --color-primary: #7BC47F;
  --color-primary-hover: #5AAE5E;
  --color-primary-light: #1A2F1A;

  --color-success: #7BC47F;
  --color-success-light: #1A2F1A;
  --color-warning: #D4A03C;
  --color-warning-light: #2A250D;
  --color-error: #E06060;
  --color-error-light: #2A1515;

  --color-npc-bubble: #2E4230;
  --color-user-bubble: #3A6B3E;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.45);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.55);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.55);
}

/* Sunset Theme (200 XP) */
[data-theme="sunset"] {
  --color-bg: #1F1020;
  --color-surface: #2D1A2E;
  --color-surface-alt: #3D2440;
  --color-text: #F0D6E8;
  --color-text-muted: #B08AA8;
  --color-text-light: #7A5A78;
  --color-border: #4A3050;

  --color-primary: #FF8C69;
  --color-primary-hover: #FF6B4A;
  --color-primary-light: #2D1510;

  --color-success: #68D391;
  --color-success-light: #1A2E1A;
  --color-warning: #FFB74D;
  --color-warning-light: #2D200D;
  --color-error: #FF6B6B;
  --color-error-light: #2D1010;

  --color-npc-bubble: #3D2440;
  --color-user-bubble: #B84530;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.5);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.6);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.6);
}

/* Cherry Blossom Theme (200 XP) */
[data-theme="cherry-blossom"] {
  --color-bg: #FFF5F8;
  --color-surface: #FFFFFF;
  --color-surface-alt: #FFE8EF;
  --color-text: #4A2040;
  --color-text-muted: #8A5A7A;
  --color-text-light: #B08AA0;
  --color-border: #F0C8D8;

  --color-primary: #D4507A;
  --color-primary-hover: #B83A60;
  --color-primary-light: #FFE8EF;

  --color-success: #4CAF7A;
  --color-success-light: #E8F8EF;
  --color-warning: #D4A03C;
  --color-warning-light: #FFF8E8;
  --color-error: #E05070;
  --color-error-light: #FFE8EF;

  --color-npc-bubble: #FFE8EF;
  --color-user-bubble: #D4507A;

  --shadow-sm: 0 1px 2px rgba(180,80,120,0.08);
  --shadow-md: 0 4px 6px rgba(180,80,120,0.1);
  --shadow-lg: 0 10px 15px rgba(180,80,120,0.12);
  --shadow-xl: 0 20px 25px rgba(180,80,120,0.15);
}

/* Midnight Theme (250 XP) */
[data-theme="midnight"] {
  --color-bg: #0F0A1A;
  --color-surface: #1A1230;
  --color-surface-alt: #241A40;
  --color-text: #D8D0F0;
  --color-text-muted: #9088B0;
  --color-text-light: #605880;
  --color-border: #302650;

  --color-primary: #A78BFA;
  --color-primary-hover: #8B6FE0;
  --color-primary-light: #1A1230;

  --color-success: #68D391;
  --color-success-light: #101A20;
  --color-warning: #FBBF24;
  --color-warning-light: #1A1A0A;
  --color-error: #F87171;
  --color-error-light: #1A1010;

  --color-npc-bubble: #241A40;
  --color-user-bubble: #5B3FA0;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.6);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.7);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.7);
}

/* Ember Theme (earn-only: 14-day streak) */
[data-theme="ember"] {
  --color-bg: #1A0A00;
  --color-surface: #2A1508;
  --color-surface-alt: #3A2010;
  --color-text: #FFE0C0;
  --color-text-muted: #C09060;
  --color-text-light: #806040;
  --color-border: #4A2A15;

  --color-primary: #FF6B2B;
  --color-primary-hover: #E05520;
  --color-primary-light: #2A1508;

  --color-success: #7BC47F;
  --color-success-light: #1A2A1A;
  --color-warning: #FFB020;
  --color-warning-light: #2A2008;
  --color-error: #FF5050;
  --color-error-light: #2A0808;

  --color-npc-bubble: #3A2010;
  --color-user-bubble: #B84520;

  --shadow-sm: 0 1px 2px rgba(255,100,30,0.15);
  --shadow-md: 0 4px 6px rgba(255,100,30,0.2);
  --shadow-lg: 0 10px 15px rgba(255,100,30,0.25);
  --shadow-xl: 0 20px 25px rgba(255,100,30,0.3);
}

/* Golden Theme (earn-only: 15 perfect scores) */
[data-theme="golden"] {
  --color-bg: #1A1400;
  --color-surface: #2A2208;
  --color-surface-alt: #3A3010;
  --color-text: #FFF0C0;
  --color-text-muted: #C0A860;
  --color-text-light: #908040;
  --color-border: #4A3A18;

  --color-primary: #FFD700;
  --color-primary-hover: #E0BF00;
  --color-primary-light: #2A2208;

  --color-success: #7BC47F;
  --color-success-light: #1A2A1A;
  --color-warning: #FFD700;
  --color-warning-light: #2A2208;
  --color-error: #FF6060;
  --color-error-light: #2A1010;

  --color-npc-bubble: #3A3010;
  --color-user-bubble: #A08B00;

  --shadow-sm: 0 1px 2px rgba(255,215,0,0.15);
  --shadow-md: 0 4px 6px rgba(255,215,0,0.2);
  --shadow-lg: 0 10px 15px rgba(255,215,0,0.25);
  --shadow-xl: 0 20px 25px rgba(255,215,0,0.3);
}