/**
 * TapDance Theme Definitions
 * ==========================
 * 
 * This file contains all color scheme definitions for TapDance.
 * Each theme is defined using CSS custom properties (variables).
 * 
 * HOW TO ADD A NEW THEME:
 * -----------------------
 * 1. Create a new body[data-theme="your-theme-name"] selector
 * 2. Define ALL required variables (see list below)
 * 3. Add the theme option to index.html in the themeSelect dropdown
 * 
 * REQUIRED VARIABLES:
 * - --bg-primary:      Main background color
 * - --bg-secondary:    Secondary background (panels, cards)
 * - --bg-tertiary:     Tertiary background (hover states, borders)
 * - --text-primary:    Main text color (typed text, headings)
 * - --text-secondary:  Secondary text color (labels, subtitles)
 * - --text-muted:      Muted/dimmed text (untyped characters)
 * - --accent-color:    Accent color (caret, highlights, active states)
 * - --border-color:    Border color for UI elements
 * - --incorrect-color: Color for typing errors
 * 
 * TIPS FOR GOOD THEMES:
 * - Ensure sufficient contrast between text and background
 * - Test with both typed and untyped text visibility
 * - Check that errors are clearly visible
 * - Verify keyboard highlighting is noticeable
 */

/* ============================================================
   CLASSIC THEMES
   ============================================================ */

/* Dark Theme (Default) - Clean, professional dark mode */
body[data-theme="dark"] {
  --bg-primary: #111827;
  --bg-secondary: #1f2937;
  --bg-tertiary: #374151;
  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;
  --text-muted: #4b5563;
  --accent-color: #BEB05B;
  --border-color: #374151;
  --incorrect-color: #f87171;
}

/* Light Theme - Clean, minimal light mode */
body[data-theme="light"] {
  --bg-primary: #eff1f5;
  --bg-secondary: #e6e9ef;
  --bg-tertiary: #dce0e8;
  --text-primary: #4c4f69;
  --text-secondary: #6c6f85;
  --text-muted: #9ca0b0;
  --accent-color: #1e66f5;
  --border-color: #ccd0da;
  --incorrect-color: #d20f39;
}

/* ============================================================
   COLORFUL THEMES
   ============================================================ */

/* Ocean - Deep blue sea inspired */
body[data-theme="ocean"] {
  --bg-primary: #0b1e3a;
  --bg-secondary: #132d57;
  --bg-tertiary: #1f4287;
  --text-primary: #eff1f5;
  --text-secondary: #a6b1e1;
  --text-muted: #5269a3;
  --accent-color: #89e0ff;
  --border-color: #1f4287;
  --incorrect-color: #ff6b6b;
}

/* Matrix - Iconic green-on-black hacker aesthetic */
body[data-theme="matrix"] {
  --bg-primary: #000000;
  --bg-secondary: #0D0D0D;
  --bg-tertiary: #1A1A1A;
  --text-primary: #00FF41;
  --text-secondary: #00b32d;
  --text-muted: #006419;
  --accent-color: #00FF41;
  --border-color: #1A1A1A;
  --incorrect-color: #FF0000;
}

/* Dracula - Popular dark theme with purple accents */
body[data-theme="dracula"] {
  --bg-primary: #282a36;
  --bg-secondary: #44475a;
  --bg-tertiary: #6272a4;
  --text-primary: #f8f8f2;
  --text-secondary: #bd93f9;
  --text-muted: #6272a4;
  --accent-color: #ff79c6;
  --border-color: #44475a;
  --incorrect-color: #ff5555;
}

/* Sunset - Warm purple and pink tones */
body[data-theme="sunset"] {
  --bg-primary: #2a273f;
  --bg-secondary: #4f3a65;
  --bg-tertiary: #754f7d;
  --text-primary: #f8f8f2;
  --text-secondary: #e0d2f7;
  --text-muted: #9d8df1;
  --accent-color: #ff8b94;
  --border-color: #4f3a65;
  --incorrect-color: #ff5555;
}

/* Forest - Natural green tones */
body[data-theme="forest"] {
  --bg-primary: #2a3d34;
  --bg-secondary: #3e5246;
  --bg-tertiary: #5f7464;
  --text-primary: #e0e0e0;
  --text-secondary: #c0c0c0;
  --text-muted: #8a9e91;
  --accent-color: #aacc88;
  --border-color: #3e5246;
  --incorrect-color: #e87d7d;
}

/* Crimson - Deep red dramatic theme */
body[data-theme="crimson"] {
  --bg-primary: #1a0000;
  --bg-secondary: #2e0c0c;
  --bg-tertiary: #4d1a1a;
  --text-primary: #ffcdd2;
  --text-secondary: #e57373;
  --text-muted: #8e2424;
  --accent-color: #ef9a9a;
  --border-color: #4d1a1a;
  --incorrect-color: #fbc02d;
}

/* ============================================================
   COFFEE THEMES
   ============================================================ */

/* Mocha - Rich chocolate tones */
body[data-theme="mocha"] {
  --bg-primary: #3c2f2f;
  --bg-secondary: #4a3c3c;
  --bg-tertiary: #6b5a5a;
  --text-primary: #f5e3e0;
  --text-secondary: #d1b7b0;
  --text-muted: #8a7b78;
  --accent-color: #a38f83;
  --border-color: #6b5a5a;
  --incorrect-color: #d48484;
}

/* Espresso - Dark roast coffee */
body[data-theme="espresso"] {
  --bg-primary: #2a1d15;
  --bg-secondary: #3a2d25;
  --bg-tertiary: #4a3d35;
  --text-primary: #f5e6d3;
  --text-secondary: #d3bda6;
  --text-muted: #7a6d55;
  --accent-color: #a47c48;
  --border-color: #4a3d35;
  --incorrect-color: #d86262;
}

/* Latte - Light coffee with cream */
body[data-theme="latte"] {
  --bg-primary: #e8d9c4;
  --bg-secondary: #d9c8b4;
  --bg-tertiary: #c0ae98;
  --text-primary: #4b3832;
  --text-secondary: #6e584d;
  --text-muted: #a4907c;
  --accent-color: #855b3b;
  --border-color: #c0ae98;
  --incorrect-color: #c04c4c;
}

/* Cold Brew - Cool dark coffee */
body[data-theme="cold-brew"] {
  --bg-primary: #1e1511;
  --bg-secondary: #2a201c;
  --bg-tertiary: #3a302c;
  --text-primary: #dcdcdc;
  --text-secondary: #a0a0a0;
  --text-muted: #6b6b6b;
  --accent-color: #7ab4e8;
  --border-color: #3a302c;
  --incorrect-color: #e87d7d;
}

/* ============================================================
   RETRO THEMES
   ============================================================ */

/* Retro Light - Vintage paper aesthetic */
body[data-theme="retro-light"] {
  --bg-primary: #dfd8c8;
  --bg-secondary: #d1c7b8;
  --bg-tertiary: #bbaF9f;
  --text-primary: #3e2723;
  --text-secondary: #5d4037;
  --text-muted: #8d6e63;
  --accent-color: #ff6f00;
  --border-color: #bbaF9f;
  --incorrect-color: #d84315;
}

/* Retro Dark - Vintage terminal feel */
body[data-theme="retro-dark"] {
  --bg-primary: #1e2a2a;
  --bg-secondary: #2a3a3a;
  --bg-tertiary: #3a504b;
  --text-primary: #e0e0e0;
  --text-secondary: #f2a669;
  --text-muted: #8c7e6a;
  --accent-color: #e88358;
  --border-color: #3a504b;
  --incorrect-color: #c94f4f;
}

/* Deepwoken - Minimalist grayscale */
body[data-theme="deepwoken"] {
  --bg-primary: #1a1d1a;
  --bg-secondary: #292e29;
  --bg-tertiary: #3a3f3a;
  --text-primary: #e0e0e0;
  --text-secondary: #a0a0a0;
  --text-muted: #6b706b;
  --accent-color: #e0e0e0;
  --border-color: #292e29;
  --incorrect-color: #b33a3a;
}

/* ============================================================
   DEVELOPER THEMES
   ============================================================ */

/* GitHub Dark - GitHub's dark mode */
body[data-theme="github-dark"] {
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #1f262e;
  --text-primary: #c9d1d9;
  --text-secondary: #8b949e;
  --text-muted: #484f58;
  --accent-color: #58a6ff;
  --border-color: #30363d;
  --incorrect-color: #f85149;
}

/* Outlook Dark - Microsoft Outlook style */
body[data-theme="outlook-dark"] {
  --bg-primary: #000000;
  --bg-secondary: #1F1F1F;
  --bg-tertiary: #303030;
  --text-primary: #FFFFFF;
  --text-secondary: #F1F1F1;
  --text-muted: #808080;
  --accent-color: #0078D4;
  --border-color: #333333;
  --incorrect-color: #D83B01;
}

/* Monkey Types - Inspired by MonkeyType */
body[data-theme="monkey-types"] {
  --bg-primary: #212121;
  --bg-secondary: #313131;
  --bg-tertiary: #424242;
  --text-primary: #fffde7;
  --text-secondary: #ffee58;
  --text-muted: #7d721a;
  --accent-color: #fdd835;
  --border-color: #424242;
  --incorrect-color: #ec407a;
}


/* ============================================================
   absolutely crazy
   ============================================================ */

/* horrible light mode to go blind */
body[data-theme="blind-white"] {
  --bg-primary: #ffffff;
  --bg-secondary: #ffffff;
  --bg-tertiary: #ffffff;
  --text-primary: #cdcdcd;
  --text-secondary: #8b949e;
  --text-muted: #878787;
  --accent-color: #ffffff;
  --border-color: #ffffff;
  --incorrect-color: #ff0d00;
}

/* impossible dark mode */
body[data-theme="blacker-black"] {
  --bg-primary: #000000;
  --bg-secondary: #000000;
  --bg-tertiary: #000000;
  --text-primary: #1e1e1e;
  --text-secondary: #555555;
  --text-muted: #808080;
  --accent-color: #000000;
  --border-color: #333333;
  --incorrect-color: #D83B01;
}

/* brutalist (the reg( */
body[data-theme="brutalist"] {
  --bg-primary: #C0C0C0;
  --bg-secondary: #7F7F7F;
  --bg-tertiary: #000000;
  --text-primary: #4B4B4B;
  --text-secondary: #34495E;
  --text-muted: #95A5A6;
  --accent-color: #A8A9AD;
  --border-color: #8B8C7A;
  --incorrect-color: #C0392B;
}

/* neobrutalist */
body[data-theme="neobrutalist"] {
  --bg-primary: #FFD700;
  --bg-secondary: #F1C40F;
  --bg-tertiary: #FFC107;
  --text-primary: #FF4081;
  --text-secondary: #E63946;
  --text-muted: #9A8C98;
  --accent-color: #00BFFF;
  --border-color: #C0C0C0;
  --incorrect-color: #00FF7F;
}



/* /* wip soemthing */
/* body[data-theme="blacker-black"] {
/*   --bg-primary: #000000;
/*   --bg-secondary: #000000;
/*   --bg-tertiary: #000000;
/*   --text-primary: #1e1e1e;
/*   --text-secondary: #555555;
/*   --text-muted: #808080;
/*   --accent-color: #000000;
/*   --border-color: #333333;
/*   --incorrect-color: #D83B01;
/* }