/* ─── Theme Definitions ──────────────────────────────────────────────────── */
/* DiscoverFile Product Website — Modular Theme System                       */
/*                                                                            */
/* HOW TO ADD A NEW THEME:                                                    */
/* 1. Copy any [data-theme="..."] block below                                 */
/* 2. Change the selector to your new theme name                              */
/* 3. Adjust the color variables                                              */
/* 4. Add the theme name to THEMES array in js/theme-switcher.js              */
/* 5. That's it — everything else adapts automatically                        */
/*                                                                            */
/* Variables are organized into:                                               */
/*   - Backgrounds (bg-*)                                                      */
/*   - Borders (border-*)                                                      */
/*   - Text (text-*)                                                           */
/*   - Accents (accent-*)                                                      */
/*   - Status indicators (status-*)                                            */
/*   - Gradients (gradient-*)                                                  */
/*   - Effects (glow-*)                                                        */
/*   - Chart colors (chart-*)                                                  */
/* ────────────────────────────────────────────────────────────────────────── */

/* ═══ DARK (Default) ═════════════════════════════════════════════════════ */

[data-theme="dark"], :root {
  /* Backgrounds */
  --bg-primary: #0f0d18;
  --bg-secondary: #18152a;
  --bg-surface: #1e1a30;
  --bg-card-hover: #252238;
  --bg-input: #131020;

  /* Borders */
  --border-base: #2e2848;
  --border-hover: #3d3560;

  /* Text */
  --text-primary: #ebe8f5;
  --text-secondary: #9490b8;
  --text-muted: #635e90;
  --text-strong: #f0eef8;

  /* Accents */
  --accent-primary: #4a7dff;
  --accent-alt: #c084fc;
  --accent-green: #34d399;
  --accent-red: #f87171;
  --accent-yellow: #fbbf24;

  /* Status */
  --status-connected: #34d399;
  --status-unscanned: #fbbf24;
  --status-disconnected: #635e90;

  /* Gradients */
  --gradient-text: linear-gradient(135deg, #4a7dff, #c084fc);
  --gradient-cta: linear-gradient(135deg, #3b6ce7 0%, #4a7dff 50%, #6b8aff 100%);
  --gradient-statsbar: linear-gradient(90deg, rgba(74,125,255,0.06) 0%, transparent 30%, transparent 70%, rgba(192,132,252,0.06) 100%);
  --gradient-storage-blue: linear-gradient(90deg, #3a5fd0, #4a7dff);
  --gradient-storage-yellow: linear-gradient(90deg, #b8900e, #fbbf24);
  --gradient-storage-red: linear-gradient(90deg, #c53030, #f87171);
  --gradient-card: none;
  --gradient-card-hover: none;
  --gradient-overlay: none;

  /* Effects */
  --glow-accent: 0 0 20px rgba(74, 125, 255, 0.15);
  --glow-accent-hover: 0 0 30px rgba(74, 125, 255, 0.25);

  /* Chart segment colors */
  --chart-1: #4a7dff;
  --chart-2: #c084fc;
  --chart-3: #34d399;
  --chart-4: #fbbf24;
  --chart-5: #f87171;
  --chart-6: #60a5fa;
  --chart-7: #a78bfa;
  --chart-8: #6ee7b7;
  --chart-9: #fcd34d;
  --chart-10: #fb923c;
  --chart-other: #3d2e68;

  /* Map */
  --map-bg: #0f0d18;
  --map-land: #18152a;
  --map-border: #2e2848;
}


/* ═══ LIGHT ══════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  --bg-primary: #f5f5f7;
  --bg-secondary: #ffffff;
  --bg-surface: #ffffff;
  --bg-card-hover: #f0f0f2;
  --bg-input: #f0f0f2;

  --border-base: #d1d5db;
  --border-hover: #9ca3af;

  --text-primary: #1a1a2e;
  --text-secondary: #4a4a68;
  --text-muted: #9498a8;
  --text-strong: #0f0f1a;

  --accent-primary: #3b6ce7;
  --accent-alt: #8b5cf6;
  --accent-green: #22c55e;
  --accent-red: #ef4444;
  --accent-yellow: #eab308;

  --status-connected: #22c55e;
  --status-unscanned: #eab308;
  --status-disconnected: #9ca3af;

  --gradient-text: linear-gradient(135deg, #3b6ce7, #8b5cf6);
  --gradient-cta: linear-gradient(135deg, #2b5bd4 0%, #3b6ce7 50%, #5b82f0 100%);
  --gradient-statsbar: none;
  --gradient-storage-blue: linear-gradient(90deg, #2b5bd4, #3b6ce7);
  --gradient-storage-yellow: linear-gradient(90deg, #b89200, #eab308);
  --gradient-storage-red: linear-gradient(90deg, #c53030, #ef4444);
  --gradient-card: none;
  --gradient-card-hover: none;
  --gradient-overlay: none;

  --glow-accent: 0 4px 12px rgba(0, 0, 0, 0.08);
  --glow-accent-hover: 0 8px 24px rgba(0, 0, 0, 0.12);

  --chart-1: #3b6ce7;
  --chart-2: #8b5cf6;
  --chart-3: #22c55e;
  --chart-4: #eab308;
  --chart-5: #ef4444;
  --chart-6: #3b82f6;
  --chart-7: #7c3aed;
  --chart-8: #16a34a;
  --chart-9: #ca8a04;
  --chart-10: #ea580c;
  --chart-other: #b0b3c0;

  --map-bg: #c8d6e5;
  --map-land: #f5f5f7;
  --map-border: #b0b8c4;
}


/* ═══ DUAL GLOW ══════════════════════════════════════════════════════════ */

[data-theme="dualglow"] {
  --bg-primary: #09090d;
  --bg-secondary: #0d0d13;
  --bg-surface: #12121a;
  --bg-card-hover: #1a1a26;
  --bg-input: #0c0c14;

  --border-base: rgba(255, 255, 255, 0.07);
  --border-hover: rgba(255, 120, 50, 0.35);

  --text-primary: rgba(235, 235, 245, 0.87);
  --text-secondary: rgba(200, 200, 220, 0.60);
  --text-muted: rgba(200, 200, 220, 0.38);
  --text-strong: rgba(245, 245, 255, 0.95);

  --accent-primary: #ff6b35;
  --accent-alt: #4f8fff;
  --accent-green: #34d399;
  --accent-red: #ff3d6b;
  --accent-yellow: #ff6b35;

  --status-connected: #34d399;
  --status-unscanned: #ff6b35;
  --status-disconnected: rgba(200, 200, 220, 0.38);

  --gradient-text: linear-gradient(135deg, #ff6b35, #4f8fff);
  --gradient-cta: linear-gradient(135deg, #e8531f 0%, #ff6b35 50%, #ff3d6b 100%);
  --gradient-statsbar: linear-gradient(90deg, rgba(255,107,53,0.06) 0%, transparent 30%, transparent 70%, rgba(79,143,255,0.06) 100%);
  --gradient-storage-blue: linear-gradient(90deg, #3a6fdd, #4f8fff);
  --gradient-storage-yellow: linear-gradient(90deg, #e85a1f, #ff6b35);
  --gradient-storage-red: linear-gradient(90deg, #cc2244, #ff3d6b);
  --gradient-card: linear-gradient(135deg, rgba(255,107,53,0.03) 0%, rgba(79,143,255,0.03) 100%);
  --gradient-card-hover: linear-gradient(135deg, rgba(255,107,53,0.07) 0%, rgba(79,143,255,0.05) 100%);
  --gradient-overlay: radial-gradient(ellipse at center, rgba(255,107,53,0.08) 0%, rgba(79,143,255,0.04) 40%, transparent 70%);

  --glow-accent: 0 0 20px rgba(255, 107, 53, 0.15);
  --glow-accent-hover: 0 0 30px rgba(255, 107, 53, 0.25), 0 0 30px rgba(79, 143, 255, 0.15);

  --chart-1: #ff6b35;
  --chart-2: #4f8fff;
  --chart-3: #34d399;
  --chart-4: #ff3d6b;
  --chart-5: #a78bfa;
  --chart-6: #ff8c5a;
  --chart-7: #6fa8ff;
  --chart-8: #6ee7b7;
  --chart-9: #ff6688;
  --chart-10: #c4a5fd;
  --chart-other: #1a1a2e;

  --map-bg: #12101a;
  --map-land: #1e1a28;
  --map-border: rgba(255, 255, 255, 0.15);
}


/* ═══ METAL ══════════════════════════════════════════════════════════════ */

[data-theme="metal"] {
  --bg-primary: #18191e;
  --bg-secondary: #1e2025;
  --bg-surface: #24262c;
  --bg-card-hover: #2c2e36;
  --bg-input: #1a1c22;

  --border-base: rgba(200, 210, 220, 0.12);
  --border-hover: rgba(210, 185, 140, 0.40);

  --text-primary: rgba(230, 232, 240, 0.92);
  --text-secondary: rgba(180, 185, 200, 0.62);
  --text-muted: rgba(140, 145, 165, 0.50);
  --text-strong: rgba(240, 242, 250, 0.96);

  --accent-primary: #d4a843;
  --accent-alt: #7aa2d4;
  --accent-green: #6dc4a0;
  --accent-red: #d4626e;
  --accent-yellow: #d4a843;

  --status-connected: #6dc4a0;
  --status-unscanned: #d4a843;
  --status-disconnected: rgba(140, 145, 165, 0.50);

  --gradient-text: linear-gradient(135deg, #d4a843, #7aa2d4);
  --gradient-cta: linear-gradient(135deg, #9a7a2e 0%, #d4a843 45%, #c49535 100%);
  --gradient-statsbar: linear-gradient(90deg, rgba(200,210,220,0.04) 0%, transparent 25%, transparent 75%, rgba(210,185,140,0.04) 100%);
  --gradient-storage-blue: linear-gradient(90deg, #5a7da8, #7aa2d4);
  --gradient-storage-yellow: linear-gradient(90deg, #a88530, #d4a843);
  --gradient-storage-red: linear-gradient(90deg, #a84550, #d4626e);
  --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(200,200,220,0.01) 50%, rgba(0,0,0,0.02) 100%);
  --gradient-card-hover: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(210,185,140,0.04) 50%, rgba(0,0,0,0.03) 100%);
  --gradient-overlay: radial-gradient(ellipse at center, rgba(210,185,140,0.06) 0%, rgba(160,170,190,0.03) 40%, transparent 70%);

  --glow-accent: 0 0 18px rgba(210, 185, 140, 0.12);
  --glow-accent-hover: 0 0 28px rgba(210, 185, 140, 0.22), 0 0 20px rgba(160, 170, 190, 0.10);

  --chart-1: #d4a843;
  --chart-2: #7aa2d4;
  --chart-3: #6dc4a0;
  --chart-4: #d4626e;
  --chart-5: #9a8cc4;
  --chart-6: #c4b05a;
  --chart-7: #8ab0d8;
  --chart-8: #7ed4b0;
  --chart-9: #d87a84;
  --chart-10: #a8a0cc;
  --chart-other: #2a2c34;

  --map-bg: #1a1b20;
  --map-land: #24262c;
  --map-border: rgba(200, 210, 220, 0.18);
}


/* ═══ AQUA FLOW ══════════════════════════════════════════════════════════ */

[data-theme="aquaflow"] {
  --bg-primary: #00040f;
  --bg-secondary: #010714;
  --bg-surface: #041220;
  --bg-card-hover: #081a2e;
  --bg-input: #020a18;

  --border-base: rgba(0, 180, 255, 0.08);
  --border-hover: rgba(0, 180, 255, 0.4);

  --text-primary: rgba(220, 240, 255, 0.88);
  --text-secondary: rgba(150, 200, 255, 0.55);
  --text-muted: rgba(100, 160, 220, 0.45);
  --text-strong: rgba(230, 250, 255, 0.95);

  --accent-primary: #00b4ff;
  --accent-alt: #00ffd4;
  --accent-green: #00ffd4;
  --accent-red: #ff4d6a;
  --accent-yellow: #00d4ff;

  --status-connected: #00ffd4;
  --status-unscanned: #00d4ff;
  --status-disconnected: rgba(100, 160, 220, 0.45);

  --gradient-text: linear-gradient(135deg, #00b4ff, #00ffd4);
  --gradient-cta: linear-gradient(135deg, #0070cc 0%, #00b4ff 50%, #00ffd4 100%);
  --gradient-statsbar: linear-gradient(90deg, rgba(0,180,255,0.06) 0%, transparent 30%, transparent 70%, rgba(0,255,212,0.06) 100%);
  --gradient-storage-blue: linear-gradient(90deg, #0070cc, #00b4ff);
  --gradient-storage-yellow: linear-gradient(90deg, #0090cc, #00d4ff);
  --gradient-storage-red: linear-gradient(90deg, #cc2244, #ff4d6a);
  --gradient-card: linear-gradient(135deg, rgba(0,180,255,0.03) 0%, rgba(0,255,212,0.03) 100%);
  --gradient-card-hover: linear-gradient(135deg, rgba(0,180,255,0.07) 0%, rgba(0,255,212,0.05) 100%);
  --gradient-overlay: radial-gradient(ellipse at center, rgba(0,180,255,0.08) 0%, rgba(0,255,212,0.04) 40%, transparent 70%);

  --glow-accent: 0 0 20px rgba(0, 180, 255, 0.15);
  --glow-accent-hover: 0 0 30px rgba(0, 180, 255, 0.25), 0 0 30px rgba(0, 255, 212, 0.15);

  --chart-1: #00b4ff;
  --chart-2: #00ffd4;
  --chart-3: #67e8f9;
  --chart-4: #ff4d6a;
  --chart-5: #00d4ff;
  --chart-6: #33c3ff;
  --chart-7: #33ffdd;
  --chart-8: #80ecfa;
  --chart-9: #ff7088;
  --chart-10: #33ddff;
  --chart-other: #0a1a2e;

  --map-bg: #020c1a;
  --map-land: #0a1a30;
  --map-border: rgba(0, 180, 255, 0.22);
}


/* ═══ VIPER ═════════════════════════════════════════════════════════════ */

[data-theme="viper"] {
  /* Backgrounds — neutral dark charcoal */
  --bg-primary: #0d0e12;
  --bg-secondary: #131519;
  --bg-surface: #1a1c22;
  --bg-card-hover: #21242c;
  --bg-input: #101218;

  /* Borders — subtle viper glow */
  --border-base: rgba(93, 193, 63, 0.11);
  --border-hover: rgba(93, 193, 63, 0.40);

  /* Text — clean neutral whites */
  --text-primary: rgba(235, 237, 242, 0.92);
  --text-secondary: rgba(165, 172, 190, 0.62);
  --text-muted: rgba(125, 132, 152, 0.46);
  --text-strong: rgba(242, 244, 248, 0.96);

  /* Accents — viper hero, icy cyan + amber complements */
  --accent-primary: #5DC13F;
  --accent-alt: #B2FFFF;
  --accent-green: #66BB6A;
  --accent-red: #E8636C;
  --accent-yellow: #D4B86A;

  /* Status */
  --status-connected: #66BB6A;
  --status-unscanned: #D4B86A;
  --status-disconnected: rgba(125, 132, 152, 0.46);

  /* Gradients */
  --gradient-text: linear-gradient(135deg, #5DC13F, #B2FFFF);
  --gradient-cta: linear-gradient(135deg, #3a8a28 0%, #5DC13F 50%, #7ecf44 100%);
  --gradient-statsbar: linear-gradient(90deg, rgba(93,193,63,0.06) 0%, transparent 30%, transparent 70%, rgba(178,255,255,0.05) 100%);
  --gradient-storage-blue: linear-gradient(90deg, #3a8a28, #5DC13F);
  --gradient-storage-yellow: linear-gradient(90deg, #b09030, #D4B86A);
  --gradient-storage-red: linear-gradient(90deg, #b84550, #E8636C);
  --gradient-card: linear-gradient(135deg, rgba(93,193,63,0.03) 0%, rgba(178,255,255,0.02) 100%);
  --gradient-card-hover: linear-gradient(135deg, rgba(93,193,63,0.07) 0%, rgba(178,255,255,0.04) 100%);
  --gradient-overlay: radial-gradient(ellipse at center, rgba(93,193,63,0.06) 0%, rgba(178,255,255,0.03) 40%, transparent 70%);

  /* Effects */
  --glow-accent: 0 0 20px rgba(93, 193, 63, 0.15);
  --glow-accent-hover: 0 0 30px rgba(93, 193, 63, 0.25), 0 0 25px rgba(178, 255, 255, 0.12);

  /* Chart segment colors — viper, cyan, amber palette */
  --chart-1: #5DC13F;
  --chart-2: #B2FFFF;
  --chart-3: #D4B86A;
  --chart-4: #66BB6A;
  --chart-5: #E8636C;
  --chart-6: #7ecf44;
  --chart-7: #80E8E8;
  --chart-8: #C4A85A;
  --chart-9: #88D48C;
  --chart-10: #F08888;
  --chart-other: #1a1c22;

  /* Map */
  --map-bg: #0d0e12;
  --map-land: #1a1c22;
  --map-border: rgba(93, 193, 63, 0.20);
}