/* ═══════════════════════════════════════
   THEME TOKENS — 4 combos: dark-reef, dark-fresh, light-reef, light-fresh
   Dark mode uses deep navy (#030D17), never pure black.
   Light mode uses soft pastels, never pure white backgrounds.
   ═══════════════════════════════════════ */

/* DARK REEF (default) */
[data-theme="dark"][data-tank="reef"] {
  --bg0:        #030D17;
  --bg1:        #061626;
  --bg2:        #0A2338;
  --card-bg:    rgba(10,35,56,0.6);
  --card-border:rgba(0,220,255,0.18);
  --text:       #D8F4FF;
  --text-muted: rgba(160,220,255,0.6);
  --accent:     #00E5FF;
  --accent2:    #00B4CC;
  --accent-glow:rgba(0,229,255,0.35);
  --btn-text:   #020A12;
  --nav-bg:     rgba(3,13,23,0.8);
  --ray-color:  rgba(0,200,255,0.10);
  --bubble-border:rgba(0,229,255,0.25);
  --stat-color: #00E5FF;
  --result-bg:  rgba(3,13,23,0.7);
  --cost-grad:  linear-gradient(135deg,rgba(0,80,140,0.7),rgba(0,50,100,0.9));
  --toggle-bg:  rgba(0,229,255,0.1);
  --toggle-icon:#00E5FF;
  --size-sel-border: var(--accent);
}

/* DARK FRESHWATER */
[data-theme="dark"][data-tank="fresh"] {
  --bg0:        #050F08;
  --bg1:        #091A0D;
  --bg2:        #0F2914;
  --card-bg:    rgba(12,35,16,0.65);
  --card-border:rgba(60,220,100,0.2);
  --text:       #D4F5DC;
  --text-muted: rgba(140,220,160,0.65);
  --accent:     #39E87A;
  --accent2:    #27B85A;
  --accent-glow:rgba(57,232,122,0.35);
  --btn-text:   #040C06;
  --nav-bg:     rgba(5,15,8,0.82);
  --ray-color:  rgba(50,200,80,0.08);
  --bubble-border:rgba(57,232,122,0.22);
  --stat-color: #39E87A;
  --result-bg:  rgba(5,12,6,0.7);
  --cost-grad:  linear-gradient(135deg,rgba(20,80,35,0.7),rgba(10,50,20,0.9));
  --toggle-bg:  rgba(57,232,122,0.1);
  --toggle-icon:#39E87A;
  --size-sel-border: var(--accent);
}

/* LIGHT REEF */
[data-theme="light"][data-tank="reef"] {
  --bg0:        #E8F6FF;
  --bg1:        #D0EEFA;
  --bg2:        #B8E5F5;
  --card-bg:    rgba(255,255,255,0.75);
  --card-border:rgba(0,150,200,0.25);
  --text:       #042A3F;
  --text-muted: rgba(0,80,130,0.65);
  --accent:     #007BAF;
  --accent2:    #005F8A;
  --accent-glow:rgba(0,123,175,0.25);
  --btn-text:   #FFFFFF;
  --nav-bg:     rgba(220,242,252,0.88);
  --ray-color:  rgba(0,150,220,0.08);
  --bubble-border:rgba(0,150,200,0.3);
  --stat-color: #0070A0;
  --result-bg:  rgba(255,255,255,0.8);
  --cost-grad:  linear-gradient(135deg,rgba(0,100,160,0.85),rgba(0,70,120,0.95));
  --toggle-bg:  rgba(0,123,175,0.12);
  --toggle-icon:#007BAF;
  --size-sel-border: var(--accent);
}

/* LIGHT FRESHWATER */
[data-theme="light"][data-tank="fresh"] {
  --bg0:        #EBF8ED;
  --bg1:        #D5F2DA;
  --bg2:        #BDE9C4;
  --card-bg:    rgba(255,255,255,0.78);
  --card-border:rgba(30,160,70,0.25);
  --text:       #06260E;
  --text-muted: rgba(20,100,40,0.65);
  --accent:     #1A8C42;
  --accent2:    #137030;
  --accent-glow:rgba(26,140,66,0.25);
  --btn-text:   #FFFFFF;
  --nav-bg:     rgba(215,242,220,0.88);
  --ray-color:  rgba(30,160,70,0.06);
  --bubble-border:rgba(30,160,70,0.28);
  --stat-color: #187035;
  --result-bg:  rgba(255,255,255,0.8);
  --cost-grad:  linear-gradient(135deg,rgba(20,100,40,0.85),rgba(10,70,25,0.95));
  --toggle-bg:  rgba(26,140,66,0.12);
  --toggle-icon:#1A8C42;
  --size-sel-border: var(--accent);
}

/* ═══════════════════════════════════════
   BACKGROUND GRADIENTS — per theme combo
   ═══════════════════════════════════════ */
[data-theme="dark"][data-tank="reef"] .ocean-bg {
  background:
    radial-gradient(ellipse 80% 60% at 15% 5%,  rgba(0,100,180,0.4) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 85% 90%, rgba(0,50,120,0.35) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 55% 35%, rgba(0,180,220,0.07) 0%, transparent 50%),
    linear-gradient(180deg, #030D17 0%, #061626 50%, #040E1E 100%);
}
[data-theme="dark"][data-tank="fresh"] .ocean-bg {
  background:
    radial-gradient(ellipse 80% 60% at 15% 5%,  rgba(20,100,40,0.35) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 85% 90%, rgba(10,70,25,0.3) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 55% 35%, rgba(50,180,80,0.06) 0%, transparent 50%),
    linear-gradient(180deg, #050F08 0%, #091A0D 50%, #060E07 100%);
}
[data-theme="light"][data-tank="reef"] .ocean-bg {
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(180,230,255,0.9) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(100,190,240,0.4) 0%, transparent 55%),
    linear-gradient(180deg, #D8F0FD 0%, #C5E8F8 40%, #B0DFF3 100%);
}
[data-theme="light"][data-tank="fresh"] .ocean-bg {
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(180,240,195,0.9) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(100,210,130,0.4) 0%, transparent 55%),
    linear-gradient(180deg, #DDF5E2 0%, #C8EDD0 40%, #B5E4C0 100%);
}

/* ═══════════════════════════════════════
   THEME-DEPENDENT OVERRIDES
   ═══════════════════════════════════════ */

/* Light mode door adjustments */
[data-theme="light"] .door-content {
  background: linear-gradient(0deg, rgba(240,248,255,0.95) 0%, rgba(240,248,255,0.7) 70%, transparent 100%);
}
[data-theme="light"] .door-title { color: var(--text); text-shadow: none; }
[data-theme="light"] .door-desc { color: var(--text-muted); }