/* ── themes.css ──
   Consolidated Theme Variables for Pembukuan CA v199
   Provides variables for all 11 premium themes.
*/

:root {
  color-scheme: dark light;
}

/* ==========================================================================
   1. ZEN MINIMALIST (Warm Light · Sage Green Accent)
   ========================================================================== */
html[data-theme="zen_minimalist"] {
  color-scheme: light;
  --ink: #1F2937;
  --ink2: #4B5563;
  --muted: #6B7280;
  --muted2: #9CA3AF;
  --border: rgba(16, 185, 129, 0.08);
  --border-strong: rgba(16, 185, 129, 0.22);
  --bg: #FAF9F6;
  --surface: rgba(255, 255, 255, 0.85);
  --surface-solid: #FFFFFF;
  --surface-soft: rgba(240, 244, 241, 0.85);

  /* Semantic */
  --blue: #10B981;
  --cyan: #34D399;
  --indigo: #059669;
  --purple: #047857;
  --green: #10B981;
  --amber: #D97706;
  --red: #EF4444;

  /* Shadows */
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 16px 48px rgba(0, 0, 0, 0.05);
  --shadow-glow: 0 8px 32px rgba(16, 185, 129, 0.08);
  --radius: 16px;

  /* Gradients */
  --body-bg-gradient: radial-gradient(circle at 10% 0%, rgba(16, 185, 129, 0.04), transparent 30%),
                      linear-gradient(135deg, #FAF9F6 0%, #F2F4F3 100%);
  --grid-overlay-color: rgba(16, 185, 129, 0.015);
  --sidebar-gradient: rgba(255, 255, 255, 0.95);
}

/* ==========================================================================
   2. EXECUTIVE GRAPHITE (Matte Dark · Amber Accent)
   ========================================================================== */
html[data-theme="executive_graphite"] {
  color-scheme: dark;
  --ink: #F3F4F6;
  --ink2: #D1D5DB;
  --muted: #9CA3AF;
  --muted2: #6B7280;
  --border: rgba(245, 158, 11, 0.12);
  --border-strong: rgba(245, 158, 11, 0.28);
  --bg: #121214;
  --surface: rgba(24, 24, 27, 0.8);
  --surface-solid: #1C1C1E;
  --surface-soft: rgba(39, 39, 42, 0.7);

  /* Semantic */
  --blue: #F59E0B;
  --cyan: #FBBF24;
  --indigo: #D97706;
  --purple: #92400E;
  --green: #10B981;
  --amber: #F59E0B;
  --red: #EF4444;

  /* Shadows */
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 16px 60px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 8px 32px rgba(245, 158, 11, 0.14);
  --radius: 14px;

  /* Gradients */
  --body-bg-gradient: radial-gradient(circle at 8% 0%, rgba(245, 158, 11, 0.08), transparent 30%),
                      linear-gradient(135deg, #121214 0%, #1A1A1E 100%);
  --grid-overlay-color: rgba(245, 158, 11, 0.015);
  --sidebar-gradient: linear-gradient(180deg, #0C0C0E 0%, #151518 100%);
}

/* ==========================================================================
   3. APPLE FROSTED (Glassmorphism Light · Royal Blue Accent)
   ========================================================================== */
html[data-theme="apple_frosted"] {
  color-scheme: light;
  --ink: #1D1D1F;
  --ink2: #333336;
  --muted: #6E6E73;
  --muted2: #86868B;
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 113, 227, 0.2);
  --bg: #F5F5F7;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-solid: #FFFFFF;
  --surface-soft: rgba(245, 245, 247, 0.85);

  /* Semantic */
  --blue: #0071E3;
  --cyan: #0077ED;
  --indigo: #5856D6;
  --purple: #AF52DE;
  --green: #34C759;
  --amber: #FF9500;
  --red: #FF3B30;

  /* Shadows */
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 16px 48px rgba(0, 0, 0, 0.07);
  --shadow-glow: 0 8px 32px rgba(0, 113, 227, 0.1);
  --radius: 18px;

  /* Gradients */
  --body-bg-gradient: radial-gradient(circle at 10% 0%, rgba(0, 113, 227, 0.04), transparent 30%),
                      linear-gradient(135deg, #F5F5F7 0%, #EAEAEC 100%);
  --grid-overlay-color: rgba(0, 113, 227, 0.015);
  --sidebar-gradient: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   4. ROYAL OBSIDIAN (Premium Dark · Indigo/Violet Accent)
   ========================================================================== */
html[data-theme="royal_obsidian"] {
  color-scheme: dark;
  --ink: #EEF2FF;
  --ink2: #C7D2FE;
  --muted: #A5B4FC;
  --muted2: #818CF8;
  --border: rgba(165, 180, 252, 0.12);
  --border-strong: rgba(165, 180, 252, 0.28);
  --bg: #090B1A;
  --surface: rgba(21, 25, 54, 0.8);
  --surface-solid: #151936;
  --surface-soft: rgba(30, 41, 88, 0.7);

  /* Semantic */
  --blue: #818CF8;
  --cyan: #A78BFA;
  --indigo: #6366F1;
  --purple: #8B5CF6;
  --green: #34D399;
  --amber: #FBBF24;
  --red: #F87171;

  /* Shadows */
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 18px 60px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 8px 32px rgba(99, 102, 241, 0.2);
  --radius: 16px;

  /* Gradients */
  --body-bg-gradient: radial-gradient(circle at 10% 0%, rgba(99, 102, 241, 0.14), transparent 30%),
                      linear-gradient(135deg, #090B1A 0%, #141730 100%);
  --grid-overlay-color: rgba(99, 102, 241, 0.02);
  --sidebar-gradient: linear-gradient(180deg, #050611 0%, #151936 100%);
}

/* ==========================================================================
   5. NORDIC BREEZE (Comfort Light · Slate Blue Accent)
   ========================================================================== */
html[data-theme="nordic_breeze"] {
  color-scheme: light;
  --ink: #0F172A;
  --ink2: #334155;
  --muted: #475569;
  --muted2: #64748B;
  --border: rgba(148, 163, 184, 0.14);
  --border-strong: rgba(14, 165, 233, 0.22);
  --bg: #EEF4FF;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-solid: #FFFFFF;
  --surface-soft: rgba(241, 245, 249, 0.85);

  /* Semantic */
  --blue: #0ea5e9;
  --cyan: #38bdf8;
  --indigo: #0284c7;
  --purple: #0369a1;
  --green: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;

  /* Shadows */
  --shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 16px 44px rgba(15, 23, 42, 0.06);
  --shadow-glow: 0 8px 30px rgba(14, 165, 233, 0.1);
  --radius: 16px;

  /* Gradients */
  --body-bg-gradient: radial-gradient(circle at 10% 0%, rgba(56, 189, 248, 0.12), transparent 30%),
                      linear-gradient(135deg, #F8FAFC 0%, #EEF4FF 100%);
  --grid-overlay-color: rgba(14, 165, 233, 0.015);
  --sidebar-gradient: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
}

/* ==========================================================================
   6. CLASSIC IVORY (Warm Sepia Light · Bronze Accent)
   ========================================================================== */
html[data-theme="classic_ivory"] {
  color-scheme: light;
  --ink: #3E2723;
  --ink2: #5D4037;
  --muted: #8D6E63;
  --muted2: #A1887F;
  --border: rgba(217, 119, 6, 0.1);
  --border-strong: rgba(217, 119, 6, 0.22);
  --bg: #FDFBF7;
  --surface: rgba(255, 255, 255, 0.85);
  --surface-solid: #FFFFFF;
  --surface-soft: rgba(247, 241, 232, 0.85);

  /* Semantic */
  --blue: #D97706;
  --cyan: #FBBF24;
  --indigo: #B45309;
  --purple: #78350F;
  --green: #10B981;
  --amber: #D97706;
  --red: #DC2626;

  /* Shadows */
  --shadow-sm: 0 4px 16px rgba(62, 39, 35, 0.02);
  --shadow-md: 0 16px 44px rgba(62, 39, 35, 0.05);
  --shadow-glow: 0 8px 30px rgba(217, 119, 6, 0.08);
  --radius: 16px;

  /* Gradients */
  --body-bg-gradient: radial-gradient(circle at 10% 0%, rgba(217, 119, 6, 0.06), transparent 30%),
                      linear-gradient(135deg, #FDFBF7 0%, #F4ECE1 100%);
  --grid-overlay-color: rgba(217, 119, 6, 0.012);
  --sidebar-gradient: rgba(255, 255, 255, 0.95);
}

/* ==========================================================================
   7. OCEANIC DEPTH (Deep Navy Dark · Aqua Accent)
   ========================================================================== */
html[data-theme="oceanic_depth"] {
  color-scheme: dark;
  --ink: #E0F7FA;
  --ink2: #B2EBF2;
  --muted: #80DEEA;
  --muted2: #4DD0E1;
  --border: rgba(6, 182, 212, 0.12);
  --border-strong: rgba(6, 182, 212, 0.3);
  --bg: #03141A;
  --surface: rgba(4, 30, 39, 0.8);
  --surface-solid: #052631;
  --surface-soft: rgba(8, 48, 62, 0.7);

  /* Semantic */
  --blue: #06B6D4;
  --cyan: #22D3EE;
  --indigo: #0891B2;
  --purple: #0E7490;
  --green: #10B981;
  --amber: #FBBF24;
  --red: #F87171;

  /* Shadows */
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 18px 60px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 8px 32px rgba(6, 182, 212, 0.18);
  --radius: 16px;

  /* Gradients */
  --body-bg-gradient: radial-gradient(circle at 10% 0%, rgba(6, 182, 212, 0.14), transparent 30%),
                      linear-gradient(135deg, #03141A 0%, #05222B 100%);
  --grid-overlay-color: rgba(6, 182, 212, 0.02);
  --sidebar-gradient: linear-gradient(180deg, #020F14 0%, #052631 100%);
}

/* ==========================================================================
   8. LAVENDER MIST (Pastel Light · Lilac Accent)
   ========================================================================== */
html[data-theme="lavender_mist"] {
  color-scheme: light;
  --ink: #2E2A38;
  --ink2: #4A4356;
  --muted: #7E738F;
  --muted2: #9B8EA9;
  --border: rgba(167, 139, 250, 0.12);
  --border-strong: rgba(167, 139, 250, 0.24);
  --bg: #F8F7FC;
  --surface: rgba(255, 255, 255, 0.85);
  --surface-solid: #FFFFFF;
  --surface-soft: rgba(240, 237, 247, 0.85);

  /* Semantic */
  --blue: #A78BFA;
  --cyan: #C4B5FD;
  --indigo: #8B5CF6;
  --purple: #7C3AED;
  --green: #10B981;
  --amber: #FBBF24;
  --red: #EF4444;

  /* Shadows */
  --shadow-sm: 0 4px 16px rgba(46, 42, 56, 0.02);
  --shadow-md: 0 16px 44px rgba(46, 42, 56, 0.05);
  --shadow-glow: 0 8px 30px rgba(167, 139, 250, 0.1);
  --radius: 16px;

  /* Gradients */
  --body-bg-gradient: radial-gradient(circle at 10% 0%, rgba(167, 139, 250, 0.06), transparent 30%),
                      linear-gradient(135deg, #F8F7FC 0%, #EFEBF7 100%);
  --grid-overlay-color: rgba(167, 139, 250, 0.012);
  --sidebar-gradient: rgba(255, 255, 255, 0.95);
}

/* ==========================================================================
   9. MIDNIGHT FOREST (Velvet Green Dark · Mint Accent)
   ========================================================================== */
html[data-theme="midnight_forest"] {
  color-scheme: dark;
  --ink: #ECFDF5;
  --ink2: #A7F3D0;
  --muted: #6EE7B7;
  --muted2: #34D399;
  --border: rgba(52, 211, 153, 0.12);
  --border-strong: rgba(52, 211, 153, 0.28);
  --bg: #020F0C;
  --surface: rgba(4, 31, 25, 0.8);
  --surface-solid: #04241D;
  --surface-soft: rgba(6, 46, 36, 0.7);

  /* Semantic */
  --blue: #34D399;
  --cyan: #6EE7B7;
  --indigo: #10B981;
  --purple: #059669;
  --green: #10B981;
  --amber: #FBBF24;
  --red: #F87171;

  /* Shadows */
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 18px 60px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 8px 32px rgba(16, 185, 129, 0.18);
  --radius: 16px;

  /* Gradients */
  --body-bg-gradient: radial-gradient(circle at 10% 0%, rgba(16, 185, 129, 0.14), transparent 30%),
                      linear-gradient(135deg, #020F0C 0%, #04221A 100%);
  --grid-overlay-color: rgba(16, 185, 129, 0.02);
  --sidebar-gradient: linear-gradient(180deg, #010A08 0%, #04241D 100%);
}

/* ==========================================================================
   10. TERRACOTTA WARMTH (Earthy Light · Burnt Orange Accent)
   ========================================================================== */
html[data-theme="terracotta_warmth"] {
  color-scheme: light;
  --ink: #37251E;
  --ink2: #543E35;
  --muted: #856E65;
  --muted2: #A18D84;
  --border: rgba(234, 88, 12, 0.1);
  --border-strong: rgba(234, 88, 12, 0.22);
  --bg: #FDF9F6;
  --surface: rgba(255, 255, 255, 0.85);
  --surface-solid: #FFFFFF;
  --surface-soft: rgba(247, 237, 232, 0.85);

  /* Semantic */
  --blue: #EA580C;
  --cyan: #F97316;
  --indigo: #C2410C;
  --purple: #9A3412;
  --green: #10B981;
  --amber: #F59E0B;
  --red: #EF4444;

  /* Shadows */
  --shadow-sm: 0 4px 16px rgba(55, 37, 30, 0.02);
  --shadow-md: 0 16px 44px rgba(55, 37, 30, 0.05);
  --shadow-glow: 0 8px 30px rgba(234, 88, 12, 0.08);
  --radius: 16px;

  /* Gradients */
  --body-bg-gradient: radial-gradient(circle at 10% 0%, rgba(234, 88, 12, 0.06), transparent 30%),
                      linear-gradient(135deg, #FDF9F6 0%, #F4E8E1 100%);
  --grid-overlay-color: rgba(234, 88, 12, 0.012);
  --sidebar-gradient: rgba(255, 255, 255, 0.95);
}

/* ==========================================================================
   11. MIDNIGHT COBALT (Pure Black Dark · Cobalt Blue Accent)
   ========================================================================== */
html[data-theme="midnight_cobalt"] {
  color-scheme: dark;
  --ink: #F0F4FF;
  --ink2: #C4D3FF;
  --muted: #8FA6E8;
  --muted2: #657CBF;
  --border: rgba(29, 78, 216, 0.15);
  --border-strong: rgba(29, 78, 216, 0.35);
  --bg: #05070B;
  --surface: rgba(10, 12, 18, 0.85);
  --surface-solid: #0A0C14;
  --surface-soft: rgba(16, 20, 32, 0.8);

  /* Semantic */
  --blue: #2563EB;
  --cyan: #38BDF8;
  --indigo: #1D4ED8;
  --purple: #1E40AF;
  --green: #10B981;
  --amber: #FBBF24;
  --red: #F87171;

  /* Shadows */
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 20px 60px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 8px 32px rgba(37, 99, 235, 0.22);
  --radius: 16px;

  /* Gradients */
  --body-bg-gradient: radial-gradient(circle at 10% 0%, rgba(37, 99, 235, 0.16), transparent 30%),
                      linear-gradient(135deg, #05070B 0%, #0A0E1A 100%);
  --grid-overlay-color: rgba(37, 99, 235, 0.03);
  --sidebar-gradient: linear-gradient(180deg, #020306 0%, #080A10 100%);
}