/* ============================================================
   Theme: Ocean
   Soft teal and cyan. Finance, SaaS, corporate, education.
   Overrides tokens only; layout stays in main.css.
   ============================================================ */

[data-theme="ocean"]{
  --accent:#0891b2;
  --accent-ink:#ffffff;
  --bg:#ffffff;
  --bg-alt:#f0fdfa;
  --bg-sunk:#ccfbf1;
  --surface:#ffffff;
  --border:#cbeef0;
  --border-strong:#7dd3dc;
  --ink:#0c1f26;
  --ink-soft:#3f5c66;
  --ink-mute:#88a5ae;
  --radius:10px;
  --radius-sm:6px;
  --radius-lg:16px;
  --accent-soft:color-mix(in srgb, var(--accent) 12%, transparent);
}

[data-theme="ocean"][data-mode="dark"]{
  --bg:#04141a;
  --bg-alt:#082027;
  --bg-sunk:#0b2c35;
  --surface:#082027;
  --border:#123b46;
  --border-strong:#1e5a6b;
  --ink:#e0f7fa;
  --ink-soft:#95c9d4;
  --ink-mute:#4d7c8a;
}

[data-theme="ocean"] .site-header{border-bottom:1px solid var(--border)}
[data-theme="ocean"] .card{box-shadow:0 2px 8px rgb(8 145 178 / .05)}
[data-theme="ocean"] .card:hover{box-shadow:0 10px 28px rgb(8 145 178 / .13)}
[data-theme="ocean"] .hero__overlay{background:linear-gradient(90deg,rgb(4 20 26 / .85) 0%,rgb(4 20 26 / .5) 50%,rgb(4 20 26 / .1) 100%)}