/* ============================================================
   OCEAN  ·  "Abyssal"
   Deep-sea dark. Ink-teal depths, aqua light filtering down,
   a bright cyan current for accents. Calm, cool, legible.
   ============================================================ */
[data-theme="ocean"] {
  color-scheme: dark;
  --bg:#06171d; --bg-2:#0b2530; --bg-3:#123644; --bg-inset:#08202a;
  --text:#e6f4f4; --text-2:#9fc4c8; --text-3:#5f8a90;
  --border:#164452; --border-2:#205e6f; --bw:1px;

  --primary:#22b8cf; --primary-2:#3fd0e0; --on-primary:#04161a;
  --accent:#2dd4bf; --on-accent:#04161a;
  --success:#3ddc97; --warning:#ffcf5b; --danger:#ff6b7d; --info:#22b8cf;
  --ring: color-mix(in srgb,#22b8cf 45%, transparent);

  --font-body:"Inter", system-ui, sans-serif;
  --font-head:"Inter", system-ui, sans-serif;
  --fw-normal:400; --fw-medium:500; --fw-bold:600; --fw-head:700;
  --tracking-head:-0.015em; --leading:1.6; --fs-base:15px;

  --radius:12px; --radius-sm:8px; --radius-lg:16px;
  --shadow:0 8px 26px -12px rgba(0,0,0,.62); --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 24px 52px -16px rgba(0,0,0,.74);
  --density:1.0;

  --btn-radius:12px; --btn-weight:600; --btn-shadow:none;
  --card-bg:#0b2530; --card-radius:16px; --card-border:1px solid #164452;
  --card-shadow:0 8px 26px -14px rgba(0,0,0,.55);
  --input-bg:#08202a; --input-radius:10px; --input-border:1px solid #205e6f;
  --sidenav-bg:#08202a; --topbar-bg:color-mix(in srgb,#06171d 82%, transparent);
  --nav-bg:color-mix(in srgb,#06171d 82%, transparent); --menu-bg:#0b2530;
}
[data-theme="ocean"] .btn.primary { color:#04161a; }