/* ============================================
   IMPACCT Theme System
   CSS Variables for Multiple Theme Support
   ============================================ */

/* Theme 1: Dark Mode - Navy Blue & White (Default) */
:root,
:root[data-theme="dark"] {
  /* Background Colors */
  --bg-primary: #0f172a;
  --bg-secondary: #111827;
  --bg-tertiary: #1f2937;
  --bg-hover: #374151;
  --bg-sidebar: #111827;
  --bg-card: #111827;

  /* Text Colors */
  --text-primary: #e2e8f0;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-light: #f1f5f9;
  --text-inverse: #0f172a;

  /* Border Colors */
  --border-primary: #1f2937;
  --border-secondary: #374151;
  --border-light: #475569;

  /* Accent Colors */
  --accent-primary: #1c63a6;
  --accent-secondary: #0ea5e9;
  --accent-hover: #2980c4;

  /* Button Colors */
  --btn-primary-bg: #1c63a6;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #154f85;
  --btn-secondary-bg: #9333ea;
  --btn-secondary-text: #ffffff;
  --btn-secondary-hover: #7e22ce;

  /* Status Colors */
  --color-success: #22c55e;
  --color-warning: #facc15;
  --color-danger: #ff4757;
  --color-info: #0ea5e9;

  /* Flash/Alert Colors */
  --flash-bg: #7c2d12;
  --flash-border: #f97316;
  --flash-text: #fed7aa;

  /* Shadow */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.35);

  /* Sidebar specific */
  --sidebar-bg: #111827;
  --sidebar-text: #e2e8f0;
  --sidebar-hover: #1f2937;
  --sidebar-active: #1c63a6;

  /* Pre/Code blocks */
  --code-bg: #0b1220;
  --code-text: #cbd5e1;
  --code-border: #1f2937;
}

/* Theme 2: Light Mode - White & Navy Blue */
:root[data-theme="light"] {
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --bg-hover: #dee2e6;
  --bg-sidebar: #f8f9fa;
  --bg-card: #ffffff;

  /* Text Colors */
  --text-primary: #1a1a1a;
  --text-secondary: #333333;
  --text-muted: #555555;
  --text-light: #1a1a1a;
  --text-inverse: #ffffff;

  /* Border Colors */
  --border-primary: #d1d5db;
  --border-secondary: #9ca3af;
  --border-light: #e5e7eb;

  /* Accent Colors */
  --accent-primary: #1c63a6;
  --accent-secondary: #2980c4;
  --accent-hover: #154f85;

  /* Button Colors */
  --btn-primary-bg: #1c63a6;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #154f85;
  --btn-secondary-bg: #2980c4;
  --btn-secondary-text: #ffffff;
  --btn-secondary-hover: #1c63a6;

  /* Status Colors */
  --color-success: #16a34a;
  --color-warning: #ca8a04;
  --color-danger: #dc2626;
  --color-info: #0284c7;

  /* Flash/Alert Colors */
  --flash-bg: #fef3c7;
  --flash-border: #f59e0b;
  --flash-text: #92400e;

  /* Shadow */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2);

  /* Sidebar specific */
  --sidebar-bg: #f8f9fa;
  --sidebar-text: #1a1a1a;
  --sidebar-hover: #e5e7eb;
  --sidebar-active: #1c63a6;

  /* Pre/Code blocks */
  --code-bg: #f3f4f6;
  --code-text: #1f2937;
  --code-border: #d1d5db;
}

/* Theme 3: Midnight Stone - Charcoal & Steel */
:root[data-theme="midnight-stone"] {
  /* Background Colors */
  --bg-primary: #0f1316;
  --bg-secondary: #151b20;
  --bg-tertiary: #1f262d;
  --bg-hover: #2a333c;
  --bg-sidebar: #151b20;
  --bg-card: #151b20;

  /* Text Colors */
  --text-primary: #e6e8e3;
  --text-secondary: #cdd3cd;
  --text-muted: #9aa3a0;
  --text-light: #f5f6f2;
  --text-inverse: #f5f6f2;

  /* Border Colors */
  --border-primary: #1f262d;
  --border-secondary: #2a333c;
  --border-light: #3a454f;

  /* Accent Colors */
  --accent-primary: #355a6a;
  --accent-secondary: #4f7f8f;
  --accent-hover: #2b4653;

  /* Button Colors */
  --btn-primary-bg: #355a6a;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #2b4653;
  --btn-secondary-bg: #4f7f8f;
  --btn-secondary-text: #ffffff;
  --btn-secondary-hover: #355a6a;

  /* Status Colors */
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-danger: #f87171;
  --color-info: #60a5fa;

  /* Flash/Alert Colors */
  --flash-bg: #2a333c;
  --flash-border: #4f7f8f;
  --flash-text: #e6e8e3;

  /* Shadow */
  --shadow-sm: 0 2px 4px rgba(53, 90, 106, 0.2);
  --shadow-md: 0 4px 12px rgba(53, 90, 106, 0.3);
  --shadow-lg: 0 10px 30px rgba(53, 90, 106, 0.4);

  /* Sidebar specific */
  --sidebar-bg: #151b20;
  --sidebar-text: #e6e8e3;
  --sidebar-hover: #1f262d;
  --sidebar-active: #355a6a;

  /* Pre/Code blocks */
  --code-bg: #0b0f12;
  --code-text: #cdd3cd;
  --code-border: #1f262d;
}

/* Theme 4: Aqua Sky - Light Aqua & Teal */
:root[data-theme="aqua-sky"] {
  /* Background Colors */
  --bg-primary: #e9f6fb;
  --bg-secondary: #f4fbff;
  --bg-tertiary: #d7edf6;
  --bg-hover: #c5e4f0;
  --bg-sidebar: #f4fbff;
  --bg-card: #ffffff;

  /* Text Colors */
  --text-primary: #0b3a4a;
  --text-secondary: #1c5666;
  --text-muted: #4d7683;
  --text-light: #0f4a5a;
  --text-inverse: #ffffff;

  /* Border Colors */
  --border-primary: #c6e1ec;
  --border-secondary: #b2d4e2;
  --border-light: #e1f1f7;

  /* Accent Colors */
  --accent-primary: #00a7c4;
  --accent-secondary: #2fc2d7;
  --accent-hover: #008fa7;

  /* Button Colors */
  --btn-primary-bg: #00a7c4;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #008fa7;
  --btn-secondary-bg: #2fc2d7;
  --btn-secondary-text: #003a45;
  --btn-secondary-hover: #00a7c4;

  /* Status Colors */
  --color-success: #16a34a;
  --color-warning: #ca8a04;
  --color-danger: #dc2626;
  --color-info: #0284c7;

  /* Flash/Alert Colors */
  --flash-bg: #d9f0f6;
  --flash-border: #73cfe0;
  --flash-text: #0b3a4a;

  /* Shadow */
  --shadow-sm: 0 2px 4px rgba(0, 167, 196, 0.12);
  --shadow-md: 0 4px 12px rgba(0, 167, 196, 0.18);
  --shadow-lg: 0 10px 30px rgba(0, 167, 196, 0.22);

  /* Sidebar specific */
  --sidebar-bg: #f4fbff;
  --sidebar-text: #0b3a4a;
  --sidebar-hover: #d7edf6;
  --sidebar-active: #00a7c4;

  /* Pre/Code blocks */
  --code-bg: #eef7fb;
  --code-text: #0b3a4a;
  --code-border: #c6e1ec;
}

/* Theme 5: Midnight Purple - Deep Purple & Lavender */
:root[data-theme="midnight-purple"] {
  --bg-primary: #f4f0fb;
  --bg-secondary: #faf7ff;
  --bg-tertiary: #e7dbf6;
  --bg-hover: #d9c8ee;
  --bg-sidebar: #faf7ff;
  --bg-card: #ffffff;

  --text-primary: #3a1a63;
  --text-secondary: #4a2d73;
  --text-muted: #6b5a8f;
  --text-light: #3a1a63;
  --text-inverse: #ffffff;

  --border-primary: #ddd2f1;
  --border-secondary: #c9b8e6;
  --border-light: #eee7f8;

  --accent-primary: #7a4bd6;
  --accent-secondary: #9a74e5;
  --accent-hover: #6235bf;

  --btn-primary-bg: #7a4bd6;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #6235bf;
  --btn-secondary-bg: #9a74e5;
  --btn-secondary-text: #2c124f;
  --btn-secondary-hover: #7a4bd6;

  --color-success: #16a34a;
  --color-warning: #ca8a04;
  --color-danger: #dc2626;
  --color-info: #0284c7;

  --flash-bg: #efe7fb;
  --flash-border: #b99aee;
  --flash-text: #3a1a63;

  --shadow-sm: 0 2px 4px rgba(122, 75, 214, 0.12);
  --shadow-md: 0 4px 12px rgba(122, 75, 214, 0.18);
  --shadow-lg: 0 10px 30px rgba(122, 75, 214, 0.22);

  --sidebar-bg: #faf7ff;
  --sidebar-text: #3a1a63;
  --sidebar-hover: #e7dbf6;
  --sidebar-active: #7a4bd6;

  --code-bg: #f3effb;
  --code-text: #3a1a63;
  --code-border: #ddd2f1;
}

/* Theme 6: Forest Green - Dark Green & Mint */
:root[data-theme="forest-green"] {
  --bg-primary: #eef8f1;
  --bg-secondary: #f6fbf7;
  --bg-tertiary: #d9efe0;
  --bg-hover: #cbe6d5;
  --bg-sidebar: #f6fbf7;
  --bg-card: #ffffff;

  --text-primary: #144230;
  --text-secondary: #245a44;
  --text-muted: #5c7b6c;
  --text-light: #144230;
  --text-inverse: #ffffff;

  --border-primary: #cfe6d9;
  --border-secondary: #b9d8c6;
  --border-light: #e6f3ec;

  --accent-primary: #1f9d6b;
  --accent-secondary: #4cc79a;
  --accent-hover: #17885c;

  --btn-primary-bg: #1f9d6b;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #17885c;
  --btn-secondary-bg: #4cc79a;
  --btn-secondary-text: #0f3a29;
  --btn-secondary-hover: #1f9d6b;

  --color-success: #16a34a;
  --color-warning: #ca8a04;
  --color-danger: #dc2626;
  --color-info: #0284c7;

  --flash-bg: #e3f3ea;
  --flash-border: #7ccaa8;
  --flash-text: #144230;

  --shadow-sm: 0 2px 4px rgba(31, 157, 107, 0.12);
  --shadow-md: 0 4px 12px rgba(31, 157, 107, 0.18);
  --shadow-lg: 0 10px 30px rgba(31, 157, 107, 0.22);

  --sidebar-bg: #f6fbf7;
  --sidebar-text: #144230;
  --sidebar-hover: #d9efe0;
  --sidebar-active: #1f9d6b;

  --code-bg: #edf7f1;
  --code-text: #144230;
  --code-border: #cfe6d9;
}

/* Theme 7: Ocean Blue - Deep Blue & Cyan */
:root[data-theme="ocean-blue"] {
  --bg-primary: #eaf3fb;
  --bg-secondary: #f4f9ff;
  --bg-tertiary: #d7e9f7;
  --bg-hover: #c8def1;
  --bg-sidebar: #f4f9ff;
  --bg-card: #ffffff;

  --text-primary: #0b3b60;
  --text-secondary: #1a4d73;
  --text-muted: #56748c;
  --text-light: #0b3b60;
  --text-inverse: #ffffff;

  --border-primary: #c7dff1;
  --border-secondary: #b2cfe6;
  --border-light: #e2eef8;

  --accent-primary: #2a7cd6;
  --accent-secondary: #5aa0e6;
  --accent-hover: #1f65b2;

  --btn-primary-bg: #2a7cd6;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #1f65b2;
  --btn-secondary-bg: #5aa0e6;
  --btn-secondary-text: #093357;
  --btn-secondary-hover: #2a7cd6;

  --color-success: #16a34a;
  --color-warning: #ca8a04;
  --color-danger: #dc2626;
  --color-info: #0284c7;

  --flash-bg: #e0edf8;
  --flash-border: #86b8e9;
  --flash-text: #0b3b60;

  --shadow-sm: 0 2px 4px rgba(42, 124, 214, 0.12);
  --shadow-md: 0 4px 12px rgba(42, 124, 214, 0.18);
  --shadow-lg: 0 10px 30px rgba(42, 124, 214, 0.22);

  --sidebar-bg: #f4f9ff;
  --sidebar-text: #0b3b60;
  --sidebar-hover: #d7e9f7;
  --sidebar-active: #2a7cd6;

  --code-bg: #eef5fb;
  --code-text: #0b3b60;
  --code-border: #c7dff1;
}

/* Theme 8: Sunset Orange - Dark Orange & Peach */
:root[data-theme="sunset-orange"] {
  --bg-primary: #fff2e6;
  --bg-secondary: #fff7f0;
  --bg-tertiary: #fde4cf;
  --bg-hover: #f8d6bb;
  --bg-sidebar: #fff7f0;
  --bg-card: #ffffff;

  --text-primary: #6a2a11;
  --text-secondary: #7f3b1c;
  --text-muted: #a06a52;
  --text-light: #6a2a11;
  --text-inverse: #ffffff;

  --border-primary: #f4d4bf;
  --border-secondary: #ecc4aa;
  --border-light: #fdeee3;

  --accent-primary: #f07a3c;
  --accent-secondary: #f5a16a;
  --accent-hover: #d9652b;

  --btn-primary-bg: #f07a3c;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #d9652b;
  --btn-secondary-bg: #f5a16a;
  --btn-secondary-text: #4b1f0b;
  --btn-secondary-hover: #f07a3c;

  --color-success: #16a34a;
  --color-warning: #ca8a04;
  --color-danger: #dc2626;
  --color-info: #0284c7;

  --flash-bg: #fde9dc;
  --flash-border: #f3b08c;
  --flash-text: #6a2a11;

  --shadow-sm: 0 2px 4px rgba(240, 122, 60, 0.12);
  --shadow-md: 0 4px 12px rgba(240, 122, 60, 0.18);
  --shadow-lg: 0 10px 30px rgba(240, 122, 60, 0.22);

  --sidebar-bg: #fff7f0;
  --sidebar-text: #6a2a11;
  --sidebar-hover: #fde4cf;
  --sidebar-active: #f07a3c;

  --code-bg: #fff3ea;
  --code-text: #6a2a11;
  --code-border: #f4d4bf;
}

/* Theme 9: Rose Gold - Pink & Gold */
:root[data-theme="rose-gold"] {
  --bg-primary: #fff1f6;
  --bg-secondary: #fff7fa;
  --bg-tertiary: #f8dbe8;
  --bg-hover: #f2cadd;
  --bg-sidebar: #fff7fa;
  --bg-card: #ffffff;

  --text-primary: #6a1f3e;
  --text-secondary: #7c2e4d;
  --text-muted: #a46a85;
  --text-light: #6a1f3e;
  --text-inverse: #ffffff;

  --border-primary: #f0c9da;
  --border-secondary: #e7b4c9;
  --border-light: #fae8f1;

  --accent-primary: #d85a93;
  --accent-secondary: #e48ab2;
  --accent-hover: #c34a82;

  --btn-primary-bg: #d85a93;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #c34a82;
  --btn-secondary-bg: #e48ab2;
  --btn-secondary-text: #4f1730;
  --btn-secondary-hover: #d85a93;

  --color-success: #16a34a;
  --color-warning: #ca8a04;
  --color-danger: #dc2626;
  --color-info: #0284c7;

  --flash-bg: #fbe4ef;
  --flash-border: #e6a6c4;
  --flash-text: #6a1f3e;

  --shadow-sm: 0 2px 4px rgba(216, 90, 147, 0.12);
  --shadow-md: 0 4px 12px rgba(216, 90, 147, 0.18);
  --shadow-lg: 0 10px 30px rgba(216, 90, 147, 0.22);

  --sidebar-bg: #fff7fa;
  --sidebar-text: #6a1f3e;
  --sidebar-hover: #f8dbe8;
  --sidebar-active: #d85a93;

  --code-bg: #fff0f6;
  --code-text: #6a1f3e;
  --code-border: #f0c9da;
}

/* Theme 10: Monochrome - Black & White */
:root[data-theme="monochrome"] {
  --bg-primary: #000000;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #2d2d2d;
  --bg-hover: #404040;
  --bg-sidebar: #1a1a1a;
  --bg-card: #1a1a1a;

  --text-primary: #ffffff;
  --text-secondary: #d4d4d4;
  --text-muted: #a3a3a3;
  --text-light: #fafafa;
  --text-inverse: #000000;

  --border-primary: #2d2d2d;
  --border-secondary: #404040;
  --border-light: #525252;

  --accent-primary: #ffffff;
  --accent-secondary: #d4d4d4;
  --accent-hover: #e5e5e5;

  --btn-primary-bg: #ffffff;
  --btn-primary-text: #000000;
  --btn-primary-hover: #e5e5e5;
  --btn-secondary-bg: #404040;
  --btn-secondary-text: #ffffff;
  --btn-secondary-hover: #525252;

  --color-success: #22c55e;
  --color-warning: #eab308;
  --color-danger: #ef4444;
  --color-info: #2980c4;

  --flash-bg: #404040;
  --flash-border: #737373;
  --flash-text: #ffffff;

  --shadow-sm: 0 2px 4px rgba(255, 255, 255, 0.1);
  --shadow-md: 0 4px 12px rgba(255, 255, 255, 0.15);
  --shadow-lg: 0 10px 30px rgba(255, 255, 255, 0.2);

  --sidebar-bg: #1a1a1a;
  --sidebar-text: #ffffff;
  --sidebar-hover: #2d2d2d;
  --sidebar-active: #ffffff;

  --code-bg: #000000;
  --code-text: #d4d4d4;
  --code-border: #2d2d2d;
}

/* Theme 11: Dracula - Purple & Pink */
:root[data-theme="dracula"] {
  --bg-primary: #f5f1ff;
  --bg-secondary: #fbf8ff;
  --bg-tertiary: #e4dbff;
  --bg-hover: #d6c7f7;
  --bg-sidebar: #fbf8ff;
  --bg-card: #ffffff;

  --text-primary: #3a2a6a;
  --text-secondary: #4b3a78;
  --text-muted: #6f6291;
  --text-light: #3a2a6a;
  --text-inverse: #ffffff;

  --border-primary: #dccff5;
  --border-secondary: #c9b8ea;
  --border-light: #eee6fb;

  --accent-primary: #8a5cf6;
  --accent-secondary: #b18bff;
  --accent-hover: #7347d8;

  --btn-primary-bg: #8a5cf6;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #7347d8;
  --btn-secondary-bg: #b18bff;
  --btn-secondary-text: #2b1f4f;
  --btn-secondary-hover: #8a5cf6;

  --color-success: #16a34a;
  --color-warning: #ca8a04;
  --color-danger: #dc2626;
  --color-info: #0284c7;

  --flash-bg: #eee6ff;
  --flash-border: #c6a8ff;
  --flash-text: #3a2a6a;

  --shadow-sm: 0 2px 4px rgba(138, 92, 246, 0.12);
  --shadow-md: 0 4px 12px rgba(138, 92, 246, 0.18);
  --shadow-lg: 0 10px 30px rgba(138, 92, 246, 0.22);

  --sidebar-bg: #fbf8ff;
  --sidebar-text: #3a2a6a;
  --sidebar-hover: #e4dbff;
  --sidebar-active: #8a5cf6;

  --code-bg: #f4efff;
  --code-text: #3a2a6a;
  --code-border: #dccff5;
}

/* Theme 12: Crimson Red - Dark Red & Coral */
:root[data-theme="crimson-red"] {
  --bg-primary: #fff0f1;
  --bg-secondary: #fff5f6;
  --bg-tertiary: #fde1e3;
  --bg-hover: #f9cfd2;
  --bg-sidebar: #fff6f7;
  --bg-card: #ffffff;

  --text-primary: #6b1a1f;
  --text-secondary: #7c2a2f;
  --text-muted: #a2686c;
  --text-light: #6b1a1f;
  --text-inverse: #ffffff;

  --border-primary: #f4b9bd;
  --border-secondary: #ee9ea4;
  --border-light: #fde7e8;

  --accent-primary: #e53935;
  --accent-secondary: #ef5350;
  --accent-hover: #c62828;

  --btn-primary-bg: #e53935;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #c62828;
  --btn-secondary-bg: #ef5350;
  --btn-secondary-text: #ffffff;
  --btn-secondary-hover: #e53935;

  --color-success: #16a34a;
  --color-warning: #ca8a04;
  --color-danger: #e53935;
  --color-info: #0284c7;

  --flash-bg: #fde3e6;
  --flash-border: #ef5350;
  --flash-text: #6b1a1f;

  --shadow-sm: 0 2px 4px rgba(229, 57, 53, 0.12);
  --shadow-md: 0 4px 12px rgba(229, 57, 53, 0.18);
  --shadow-lg: 0 10px 30px rgba(229, 57, 53, 0.22);

  --sidebar-bg: #fff6f7;
  --sidebar-text: #6b1a1f;
  --sidebar-hover: #f8d9dc;
  --sidebar-active: #e53935;

  --code-bg: #fff0f1;
  --code-text: #6b1a1f;
  --code-border: #f0c8cc;
}

/* Theme 13: Teal Aqua - Teal & Turquoise */
:root[data-theme="teal-aqua"] {
  --bg-primary: #e9fbf8;
  --bg-secondary: #f4fdfb;
  --bg-tertiary: #d2f3ee;
  --bg-hover: #c0eae3;
  --bg-sidebar: #f4fdfb;
  --bg-card: #ffffff;

  --text-primary: #0d4a44;
  --text-secondary: #1d5e58;
  --text-muted: #5a7f7a;
  --text-light: #0d4a44;
  --text-inverse: #ffffff;

  --border-primary: #c4e8e2;
  --border-secondary: #aedbd4;
  --border-light: #e3f6f3;

  --accent-primary: #14a99a;
  --accent-secondary: #49c9be;
  --accent-hover: #0f8f83;

  --btn-primary-bg: #14a99a;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #0f8f83;
  --btn-secondary-bg: #49c9be;
  --btn-secondary-text: #083c36;
  --btn-secondary-hover: #14a99a;

  --color-success: #16a34a;
  --color-warning: #ca8a04;
  --color-danger: #dc2626;
  --color-info: #0284c7;

  --flash-bg: #dcf5f2;
  --flash-border: #7ed3c8;
  --flash-text: #0d4a44;

  --shadow-sm: 0 2px 4px rgba(20, 169, 154, 0.12);
  --shadow-md: 0 4px 12px rgba(20, 169, 154, 0.18);
  --shadow-lg: 0 10px 30px rgba(20, 169, 154, 0.22);

  --sidebar-bg: #f4fdfb;
  --sidebar-text: #0d4a44;
  --sidebar-hover: #d2f3ee;
  --sidebar-active: #14a99a;

  --code-bg: #eaf9f7;
  --code-text: #0d4a44;
  --code-border: #c4e8e2;
}

/* Theme 14: Amber Gold - Dark Amber & Gold */
:root[data-theme="amber-gold"] {
  --bg-primary: #fff6e6;
  --bg-secondary: #fff9ef;
  --bg-tertiary: #fde8c9;
  --bg-hover: #f7d9ab;
  --bg-sidebar: #fff9ef;
  --bg-card: #ffffff;

  --text-primary: #6b3a05;
  --text-secondary: #7d4a14;
  --text-muted: #9c6f3f;
  --text-light: #6b3a05;
  --text-inverse: #ffffff;

  --border-primary: #f1d8b6;
  --border-secondary: #e7c89d;
  --border-light: #fcedd9;

  --accent-primary: #f2a11a;
  --accent-secondary: #f6c15a;
  --accent-hover: #d5880f;

  --btn-primary-bg: #f2a11a;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #d5880f;
  --btn-secondary-bg: #f6c15a;
  --btn-secondary-text: #4c2a04;
  --btn-secondary-hover: #f2a11a;

  --color-success: #16a34a;
  --color-warning: #ca8a04;
  --color-danger: #dc2626;
  --color-info: #0284c7;

  --flash-bg: #fbead1;
  --flash-border: #f2c27c;
  --flash-text: #6b3a05;

  --shadow-sm: 0 2px 4px rgba(242, 161, 26, 0.12);
  --shadow-md: 0 4px 12px rgba(242, 161, 26, 0.18);
  --shadow-lg: 0 10px 30px rgba(242, 161, 26, 0.22);

  --sidebar-bg: #fff9ef;
  --sidebar-text: #6b3a05;
  --sidebar-hover: #fde8c9;
  --sidebar-active: #f2a11a;

  --code-bg: #fff6e8;
  --code-text: #6b3a05;
  --code-border: #f1d8b6;
}

/* Theme Toggle Component Styles */
.theme-settings {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 24px;
  margin-top: 20px;
  box-shadow: var(--shadow-md);
}

.theme-settings h3 {
  color: var(--text-primary);
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: 600;
}

.theme-toggle-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

.theme-option {
  padding: 16px;
  border: 2px solid var(--border-primary);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--bg-secondary);
  text-align: center;
}

.theme-option:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.theme-option.active {
  border-color: var(--accent-primary);
  background: var(--accent-primary);
  color: var(--text-inverse);
  box-shadow: var(--shadow-lg);
}

.theme-option.active .theme-icon {
  background: var(--text-inverse);
}

.theme-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  background: var(--bg-tertiary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
  transition: all 0.3s ease;
}

.theme-label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.theme-description {
  font-size: 11px;
  opacity: 0.8;
  line-height: 1.3;
}

.theme-option.active .theme-description {
  opacity: 1;
}

/* Theme schedule (day/night timer) */
.theme-schedule {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-primary);
  display: grid;
  gap: 16px;
}

.theme-schedule-header h4 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--text-primary);
}

.theme-schedule-header p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.theme-schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.theme-field {
  display: grid;
  gap: 6px;
}

.theme-field-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.theme-field input,
.theme-field select {
  width: 100%;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  padding: 10px 12px;
  box-sizing: border-box;
}

.theme-field input:focus,
.theme-field select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 30%, transparent);
}

.theme-switch-row {
  align-content: start;
}

.theme-switch {
  position: relative;
  width: 52px;
  height: 28px;
  display: inline-flex;
  align-items: center;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--bg-tertiary);
  border-radius: 999px;
  border: 1px solid var(--border-secondary);
  transition: all 0.2s ease;
}

.theme-switch-slider::after {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  top: 2px;
  background: var(--text-primary);
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.theme-switch input:checked + .theme-switch-slider {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

.theme-switch input:checked + .theme-switch-slider::after {
  transform: translateX(22px);
  background: var(--text-inverse);
}

.theme-schedule-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.theme-schedule-note {
  font-size: 12px;
  color: var(--text-muted);
}

/* Preview boxes for theme options */
.theme-preview {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
}

.theme-preview-box {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Smooth transitions for theme changes */
body,
.card,
.theme-settings,
nav,
button,
input,
select,
textarea,
.nav-parent,
.nav-child,
pre {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Responsive design for theme settings */
@media (max-width: 768px) {
  .theme-toggle-group {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }

  .theme-settings {
    padding: 16px;
  }

  .theme-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}