/*
 * themes.css — Coin Catalog v2
 *
 * All 12 built-in themes + 3 custom slots defined as CSS custom properties.
 * Every color in the app comes from these variables — never hard-coded.
 *
 * Variable reference:
 *   --color-bg-body       Page background
 *   --color-bg-card       Card / panel background
 *   --color-text-main     Primary text
 *   --color-text-muted    Secondary / helper text
 *   --color-border        Standard border
 *   --color-border-light  Subtle divider
 *   --color-accent        Brand color (buttons, links, highlights)
 *   --color-accent-text   Text on accent-colored backgrounds
 *   --color-header-bg     Sticky header background
 *   --color-header-text   Sticky header text
 *   --color-accord-bg     Accordion / sub-panel background
 *   --color-finance-bg    Finance grid item background
 */

/* =========================================================================
   Dark (default)
   ========================================================================= */
[data-theme="dark"] {
    --color-bg-body:      #121212;
    --color-bg-card:      #1e1e1e;
    --color-text-main:    #f8f9fa;
    --color-text-muted:   #adb5bd;
    --color-border:       #495057;
    --color-border-light: #343a40;
    --color-accent:       #60a5fa;
    --color-accent-text:  #ffffff;
    --color-header-bg:    #000000;
    --color-header-text:  #f8f9fa;
    --color-accord-bg:    #2b3035;
    --color-finance-bg:   #212529;
}

/* =========================================================================
   Light
   ========================================================================= */
[data-theme="light"] {
    --color-bg-body:      #f4f6f8;
    --color-bg-card:      #ffffff;
    --color-text-main:    #212529;
    --color-text-muted:   #6c757d;
    --color-border:       #dee2e6;
    --color-border-light: #e9ecef;
    --color-accent:       #0d6efd;
    --color-accent-text:  #ffffff;
    --color-header-bg:    #212529;
    --color-header-text:  #ffffff;
    --color-accord-bg:    #f8f9fa;
    --color-finance-bg:   #f0f2f5;
}

/* =========================================================================
   Midnight (deep blue-black)
   ========================================================================= */
[data-theme="midnight"] {
    --color-bg-body:      #0d1117;
    --color-bg-card:      #161b22;
    --color-text-main:    #c9d1d9;
    --color-text-muted:   #8b949e;
    --color-border:       #30363d;
    --color-border-light: #21262d;
    --color-accent:       #79b8ff;
    --color-accent-text:  #ffffff;
    --color-header-bg:    #010409;
    --color-header-text:  #c9d1d9;
    --color-accord-bg:    #21262d;
    --color-finance-bg:   #1f2428;
}

/* =========================================================================
   Gold
   ========================================================================= */
[data-theme="gold"] {
    --color-bg-body:      #1a1608;
    --color-bg-card:      #28220c;
    --color-text-main:    #fff8dc;
    --color-text-muted:   #d4c494;
    --color-border:       #9a8540;
    --color-border-light: #4a4020;
    --color-accent:       #ffd700;
    --color-accent-text:  #1a1608;
    --color-header-bg:    #12100a;
    --color-header-text:  #fff8dc;
    --color-accord-bg:    #342c12;
    --color-finance-bg:   #201c0a;
}

/* =========================================================================
   Copper
   ========================================================================= */
[data-theme="copper"] {
    --color-bg-body:      #1f1612;
    --color-bg-card:      #2e1f18;
    --color-text-main:    #f4dbce;
    --color-text-muted:   #c99a83;
    --color-border:       #a65d3c;
    --color-border-light: #523528;
    --color-accent:       #cd7f32;
    --color-accent-text:  #000000;
    --color-header-bg:    #140e0b;
    --color-header-text:  #f4dbce;
    --color-accord-bg:    #402b21;
    --color-finance-bg:   #261913;
}

/* =========================================================================
   Ocean
   ========================================================================= */
[data-theme="ocean"] {
    --color-bg-body:      #0c1929;
    --color-bg-card:      #132840;
    --color-text-main:    #d4e8f5;
    --color-text-muted:   #8ab4d0;
    --color-border:       #2d6a8a;
    --color-border-light: #1a3d55;
    --color-accent:       #5eb8d4;
    --color-accent-text:  #082030;
    --color-header-bg:    #081420;
    --color-header-text:  #d4e8f5;
    --color-accord-bg:    #1a3550;
    --color-finance-bg:   #0f2030;
}

/* =========================================================================
   Deep Forest
   ========================================================================= */
[data-theme="forest"] {
    --color-bg-body:      #0f1c15;
    --color-bg-card:      #172e22;
    --color-text-main:    #e0f2e9;
    --color-text-muted:   #86b099;
    --color-border:       #2b593f;
    --color-border-light: #1f3b2a;
    --color-accent:       #4ade80;
    --color-accent-text:  #000000;
    --color-header-bg:    #080f0b;
    --color-header-text:  #e0f2e9;
    --color-accord-bg:    #1e402d;
    --color-finance-bg:   #122419;
}

/* =========================================================================
   Silver
   ========================================================================= */
[data-theme="silver"] {
    --color-bg-body:      #e2e8f0;
    --color-bg-card:      #ffffff;
    --color-text-main:    #334155;
    --color-text-muted:   #64748b;
    --color-border:       #cbd5e1;
    --color-border-light: #f1f5f9;
    --color-accent:       #475569;
    --color-accent-text:  #ffffff;
    --color-header-bg:    #475569;
    --color-header-text:  #f8fafc;
    --color-accord-bg:    #f8fafc;
    --color-finance-bg:   #f1f5f9;
}

/* =========================================================================
   Aged Paper
   ========================================================================= */
[data-theme="paper"] {
    --color-bg-body:      #f5f0e8;
    --color-bg-card:      #fefcf7;
    --color-text-main:    #2c2416;
    --color-text-muted:   #7a6a52;
    --color-border:       #c8b89a;
    --color-border-light: #e8dece;
    --color-accent:       #8b5e3c;
    --color-accent-text:  #fefcf7;
    --color-header-bg:    #3d2b1f;
    --color-header-text:  #f5f0e8;
    --color-accord-bg:    #ede6d8;
    --color-finance-bg:   #e8dece;
}

/* =========================================================================
   Matrix
   ========================================================================= */
[data-theme="matrix"] {
    --color-bg-body:      #0a0f0a;
    --color-bg-card:      #0f1a0f;
    --color-text-main:    #7ddc7d;
    --color-text-muted:   #4a9e4a;
    --color-border:       #2d5a2d;
    --color-border-light: #1a3d1a;
    --color-accent:       #00ff41;
    --color-accent-text:  #000000;
    --color-header-bg:    #050a05;
    --color-header-text:  #00ff41;
    --color-accord-bg:    #121e12;
    --color-finance-bg:   #0a100a;
}

/* =========================================================================
   Cyberpunk
   ========================================================================= */
[data-theme="cyberpunk"] {
    --color-bg-body:      #0a0014;
    --color-bg-card:      #12001f;
    --color-text-main:    #f0e6ff;
    --color-text-muted:   #b090d0;
    --color-border:       #ff00ff;
    --color-border-light: #400060;
    --color-accent:       #00ffff;
    --color-accent-text:  #000000;
    --color-header-bg:    #08000f;
    --color-header-text:  #f0e6ff;
    --color-accord-bg:    #1a0030;
    --color-finance-bg:   #10001a;
    --color-neon-pink:    #ff00ff;
    --color-neon-cyan:    #00ffff;
}

[data-theme="cyberpunk"] .card {
    border-color: var(--color-neon-pink) !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-neon-pink) 50%, transparent),
                0 0 30px color-mix(in srgb, var(--color-neon-pink) 20%, transparent) !important;
}

[data-theme="cyberpunk"] #app-header {
    border-bottom-color: var(--color-neon-cyan) !important;
    box-shadow: 0 2px 20px color-mix(in srgb, var(--color-neon-cyan) 40%, transparent) !important;
}

/* =========================================================================
   Neon
   ========================================================================= */
[data-theme="neon"] {
    --color-bg-body:      #0a0d14;
    --color-bg-card:      #111827;
    --color-text-main:    #f0f4ff;
    --color-text-muted:   #94a3b8;
    --color-border:       rgba(255, 149, 0, 0.67);
    --color-border-light: #1e2a40;
    --color-accent:       #ff9500;
    --color-accent-text:  #000000;
    --color-header-bg:    #060a10;
    --color-header-text:  #f0f4ff;
    --color-accord-bg:    #162032;
    --color-finance-bg:   #0d1520;
    --color-neon-blue:    #00b4ff;
}

[data-theme="neon"] #app-header {
    border-bottom-color: var(--color-neon-blue) !important;
    box-shadow: 0 2px 20px color-mix(in srgb, var(--color-neon-blue) 40%, transparent) !important;
}

/* =========================================================================
  Custom theme slots (colors injected by themes.js via CSS variables)
  Each slot has its OWN variable namespace so changing one does NOT
  affect the others.
  ========================================================================= */
[data-theme="custom1"] {
    --color-bg-body:      var(--custom1-bg-body,      #1a1a2e);
    --color-bg-card:      var(--custom1-bg-card,      #16213e);
    --color-text-main:    var(--custom1-text-main,    #e0e0e0);
    --color-text-muted:   var(--custom1-text-muted,   #a0a0a0);
    --color-border:       var(--custom1-border,       #0f3460);
    --color-border-light: var(--custom1-border-light, #0a2a4a);
    --color-accent:       var(--custom1-accent,       #e94560);
    --color-accent-text:  var(--custom1-accent-text,  #ffffff);
    --color-header-bg:    var(--custom1-header-bg,    #0f3460);
    --color-header-text:  var(--custom1-header-text,  #ffffff);
    --color-accord-bg:    var(--custom1-accord-bg,    #0f3460);
    --color-finance-bg:   var(--custom1-finance-bg,   #0a2a4a);
}
[data-theme="custom2"] {
    --color-bg-body:      var(--custom2-bg-body,      #1a1a2e);
    --color-bg-card:      var(--custom2-bg-card,      #16213e);
    --color-text-main:    var(--custom2-text-main,    #e0e0e0);
    --color-text-muted:   var(--custom2-text-muted,   #a0a0a0);
    --color-border:       var(--custom2-border,       #0f3460);
    --color-border-light: var(--custom2-border-light, #0a2a4a);
    --color-accent:       var(--custom2-accent,       #e94560);
    --color-accent-text:  var(--custom2-accent-text,  #ffffff);
    --color-header-bg:    var(--custom2-header-bg,    #0f3460);
    --color-header-text:  var(--custom2-header-text,  #ffffff);
    --color-accord-bg:    var(--custom2-accord-bg,    #0f3460);
    --color-finance-bg:   var(--custom2-finance-bg,   #0a2a4a);
}
[data-theme="custom3"] {
    --color-bg-body:      var(--custom3-bg-body,      #1a1a2e);
    --color-bg-card:      var(--custom3-bg-card,      #16213e);
    --color-text-main:    var(--custom3-text-main,    #e0e0e0);
    --color-text-muted:   var(--custom3-text-muted,   #a0a0a0);
    --color-border:       var(--custom3-border,       #0f3460);
    --color-border-light: var(--custom3-border-light, #0a2a4a);
    --color-accent:       var(--custom3-accent,       #e94560);
    --color-accent-text:  var(--custom3-accent-text,  #ffffff);
    --color-header-bg:    var(--custom3-header-bg,    #0f3460);
    --color-header-text:  var(--custom3-header-text,  #ffffff);
    --color-accord-bg:    var(--custom3-accord-bg,    #0f3460);
    --color-finance-bg:   var(--custom3-finance-bg,   #0a2a4a);
}