/* ==========================================================================
   Theme variations. Space is the default in style.css.
   ========================================================================== */

html[data-theme="ocean"] {
  color-scheme: dark;
  --bg: #062d3a;
  --bg-deep: #021821;
  --bg-soft: #0a3f4e;
  --surface: rgba(12, 58, 70, 0.78);
  --surface-solid: #0c3a46;
  --surface-raised: rgba(18, 78, 92, 0.94);
  --surface-hover: rgba(24, 96, 110, 0.96);
  --line: rgba(125, 226, 214, 0.2);
  --line-strong: rgba(125, 226, 214, 0.42);

  --text: #f0fffc;
  --text-muted: #a6d5cf;
  --text-dim: #7eb3ae;
  --text-inverse: #03222b;

  --primary: #22b8a6;
  --primary-strong: #169883;
  --primary-soft: rgba(34, 184, 166, 0.18);
  --btn-primary: #0f766e;
  --btn-primary-hover: #0b6357;
  --success: #8fe36b;
  --success-soft: rgba(143, 227, 107, 0.16);
  --warning: #ffb347;
  --warning-soft: rgba(255, 179, 71, 0.16);
  --danger: #ff6f8d;
  --danger-strong: #cf2c54;
  --danger-soft: rgba(255, 111, 141, 0.14);
  --gold: #ffe066;
  --gold-soft: rgba(255, 224, 102, 0.14);
  --violet: #7fd4e8;
  --violet-soft: rgba(127, 212, 232, 0.16);
  --pink: #ff9bc0;
  --pink-soft: rgba(255, 155, 192, 0.16);

  --zone-add: #22b8a6;
  --zone-sub: #8fe36b;
  --zone-mult: #ffb347;
  --zone-div: #7fd4e8;

  --shadow-sm: 0 2px 8px rgba(0, 10, 14, 0.3);
  --shadow: 0 12px 32px rgba(0, 10, 14, 0.38);
  --shadow-lg: 0 24px 64px rgba(0, 10, 14, 0.5);
  --glow-blue: 0 0 0 1px rgba(34, 184, 166, 0.32), 0 14px 36px rgba(34, 184, 166, 0.22);
}

html[data-theme="ocean"] body {
  background:
    radial-gradient(1200px 700px at 50% -20%, rgba(34, 184, 166, 0.25), transparent 60%),
    radial-gradient(900px 600px at 100% 110%, rgba(127, 212, 232, 0.18), transparent 65%),
    radial-gradient(600px 400px at 0% 100%, rgba(143, 227, 107, 0.1), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}

html[data-theme="ocean"] body::before {
  background-image:
    radial-gradient(2px 2px at 15% 22%, rgba(210, 255, 250, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 12%, rgba(210, 255, 250, 0.4) 50%, transparent 51%),
    radial-gradient(2px 2px at 82% 48%, rgba(210, 255, 250, 0.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 62%, rgba(210, 255, 250, 0.4) 50%, transparent 51%),
    radial-gradient(2px 2px at 58% 82%, rgba(210, 255, 250, 0.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 24% 90%, rgba(210, 255, 250, 0.35) 50%, transparent 51%);
  opacity: 0.7;
}

html[data-theme="ocean"] .hero {
  background:
    radial-gradient(500px 280px at 88% -5%, rgba(34, 184, 166, 0.4), transparent 70%),
    linear-gradient(145deg, rgba(12, 66, 78, 0.94), rgba(4, 28, 36, 0.96));
}

html[data-theme="ocean"] .mission-hero,
html[data-theme="ocean"] .result-hero {
  background:
    radial-gradient(420px 220px at 92% -10%, rgba(34, 184, 166, 0.34), transparent 70%),
    linear-gradient(150deg, rgba(12, 66, 78, 0.92), rgba(4, 28, 36, 0.96));
}

html[data-theme="ocean"] .hero-logo,
html[data-theme="ocean"] .result-rocket {
  background: rgba(255, 224, 102, 0.1);
}

html[data-theme="ocean"] .rocket-track {
  background:
    radial-gradient(120px 180px at 50% 0%, rgba(34, 184, 166, 0.3), transparent 70%),
    linear-gradient(180deg, #06303c, #02171e 70%);
}

html[data-theme="ocean"] .status-bar,
html[data-theme="ocean"] .boot-screen {
  background:
    radial-gradient(circle at 50% 38%, rgba(34, 184, 166, 0.28), transparent 55%),
    var(--bg-deep);
}

html[data-theme="ocean"] .dot {
  background: var(--primary);
}

html[data-theme="ocean"] .rod {
  background: linear-gradient(180deg, #8ce8dd, var(--primary));
}

html[data-theme="ocean"] .cube {
  background: #b6f59a;
}