/**
 * Freetar - Color Themes Engine (Comic, Manga, Metal, Light)
 * Exactly matched to screenshots img1.jpg and img6.jpg
 */

/* 1. COMIC THEME (Default) */
[data-theme="comic"] {
  --bg-app: #f4efe6;
  --bg-card: #ffffff;
  --border-color: #000000;
  --shadow-color: #000000;

  --color-yellow: #ffe600;
  --color-blue: #00a8ff;
  --color-red: #ff3838;
  --color-green: #2ed573;
  --color-purple: #9b5de5;

  --neck-bg: #e6c896;
  --neck-gradient: linear-gradient(180deg, #f7e6cb 0%, #e3c18b 50%, #d8b275 100%);
}

/* 2. MANGA THEME (Matches img6.jpg) */
[data-theme="manga"] {
  --bg-app: #f7f3fb;
  --bg-card: #ffffff;
  --border-color: #1a1a24;
  --shadow-color: #1a1a24;

  --color-yellow: #fde68a;
  --color-blue: #93c5fd;
  --color-red: #fca5a5;
  --color-green: #86efac;
  --color-purple: #d8b4fe;

  /* Pastel gradient fretboard neck as seen in img6.jpg! */
  --neck-bg: #fbeee0;
  --neck-gradient: linear-gradient(90deg, #fce8cc 0%, #fed7aa 25%, #fecdd3 50%, #e9d5ff 75%, #bae6fd 100%);
}

[data-theme="manga"] .comic-box {
  background: #fdfaff;
}

[data-theme="manga"] .brand-logo-text {
  color: #f472b6;
  text-shadow: 
    -2px -2px 0 #1a1a24,
     2px -2px 0 #1a1a24,
    -2px  2px 0 #1a1a24,
     2px  2px 0 #1a1a24,
     4px  4px 0 #38bdf8,
     5px  5px 0 #1a1a24;
}

/* 3. METAL / CYBER DARK THEME */
[data-theme="metal"] {
  --bg-app: #0e0f15;
  --bg-card: #181922;
  --border-color: #00f0ff;
  --shadow-color: #00f0ff;

  --color-yellow: #ffd700;
  --color-blue: #00f0ff;
  --color-red: #ff0055;
  --color-green: #39ff14;
  --color-purple: #bd00ff;

  --shadow-block: 4px 4px 0px rgba(0, 240, 255, 0.4);
  --shadow-block-sm: 2px 2px 0px rgba(0, 240, 255, 0.4);

  --neck-bg: #12131a;
  --neck-gradient: linear-gradient(180deg, #1b1c26 0%, #101118 100%);
}

[data-theme="metal"] body {
  color: #ffffff;
}

[data-theme="metal"] .comic-box,
[data-theme="metal"] .fretboard-outer-card,
[data-theme="metal"] .composition-workspace-card,
[data-theme="metal"] .song-section-box,
[data-theme="metal"] .section-collapsible-body,
[data-theme="metal"] .comic-chord-card {
  background: #181922;
  color: #ffffff;
}

[data-theme="metal"] .brand-logo-text {
  color: #00f0ff;
  text-shadow: 
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     4px  4px 0 #bd00ff,
     5px  5px 0 #000;
}

[data-theme="metal"] .card-chord-bold {
  color: #ffffff;
}

/* 4. LIGHT THEME (Minimal Clean) */
[data-theme="light"] {
  --bg-app: #f8fafc;
  --bg-card: #ffffff;
  --border-color: #334155;
  --shadow-color: #94a3b8;

  --color-yellow: #fde047;
  --color-blue: #38bdf8;
  --color-red: #f87171;
  --color-green: #4ade80;
  --color-purple: #c084fc;

  --neck-bg: #e2d9cc;
  --neck-gradient: linear-gradient(180deg, #ede5d8 0%, #d8cdbd 100%);
}