/* Ocean theme (built on the Sunrise layout). Loaded after style.css and
   chroma.css and overrides their tokens: cool porcelain paper, Playfair
   Display for the display sizes, a navy to azure to cyan gradient in place
   of the pastel spectrum, pill buttons and rounder cards. Market colours
   (up/down) stay semantic. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root{
  --paper:#f4f7fb;--paper-sunk:#e8eef6;
  --ink:#0f172a;--ink-2:#334155;--ink-3:#64748b;
  --rule:#d9e2ee;--rule-strong:#b9c8db;
  --accent:#0284c7;--accent-deep:#15803d;--accent-ink:#0c2a4a;--accent-wash:#dbeefe;--accent-bright:#38bdf8;
  --down:#b91c1c;
  --font-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --chroma:#0284c7;--chroma-ink:#1e3a8a;--chroma-wash:rgba(2,132,199,.12);
  --sun-b:#06b6d4;--sun-c:#67e8f9;
}
:root[data-theme="dark"]{
  --paper:#0b1220;--paper-sunk:#111a2b;
  --ink:#e6edf7;--ink-2:#b8c4d6;--ink-3:#8593a8;
  --rule:#1f2b3d;--rule-strong:#2d3c53;
  --accent:#38bdf8;--accent-deep:#6ee7a0;--accent-ink:#0b1220;--accent-wash:#0c2a4a;--accent-bright:#7dd3fc;
  --down:#ff7b7b;
  --chroma:#38bdf8;--chroma-ink:#7dd3fc;--chroma-wash:rgba(56,189,248,.14);
  --sun-b:#22d3ee;--sun-c:#a5f3fc;
}

/* the spectrum no longer breathes: one warm pair, still */
html.chroma-motion{animation:none}
body{background:
  radial-gradient(1000px 560px at 6% -8%,rgba(30,58,138,.09),transparent 65%),
  radial-gradient(850px 560px at 98% 3%,rgba(6,182,212,.09),transparent 65%),
  radial-gradient(800px 600px at 4% 70%,rgba(2,132,199,.05),transparent 65%),
  radial-gradient(850px 600px at 98% 90%,rgba(103,232,249,.09),transparent 65%),var(--paper)}
[data-theme="dark"] body{background:
  radial-gradient(1000px 560px at 6% -8%,rgba(56,189,248,.12),transparent 65%),
  radial-gradient(850px 560px at 98% 3%,rgba(34,211,238,.10),transparent 65%),var(--paper)}
header.top{background:rgba(255,255,255,.78)}
[data-theme="dark"] header.top{background:rgba(11,18,32,.78)}
footer{background:rgba(255,255,255,.62)}
[data-theme="dark"] footer{background:rgba(17,26,43,.62)}

/* type: Playfair for the display sizes, Geist for everything else */
.display{font-family:var(--font-serif);font-weight:500;letter-spacing:-.02em;line-height:1.04;font-size:clamp(36px,4.8vw,68px)}
.display em{font-style:italic;font-weight:500;color:transparent;
  background-image:linear-gradient(100deg,var(--chroma-ink),var(--chroma) 55%,var(--sun-b));
  background-size:100% 100%;-webkit-background-clip:text;background-clip:text;animation:none}
.lede{font-size:18px;line-height:1.55}
.stat-v,.price-big,.lcard-px b,.big,.grid-stats>div .v,.tre-cards .v,.coin-title h1,.docs h1{font-family:var(--font-serif);font-weight:500;letter-spacing:-.01em}
.stat-v{font-size:30px;line-height:1.1}
.price-big{font-size:40px}
.lcard-px b{font-size:20px}
h2{letter-spacing:-.02em}
.sec-head h2::after{background:linear-gradient(90deg,var(--chroma-ink),var(--chroma),var(--sun-b))}

/* shapes: pills and soft corners */
.btn{border-radius:999px;font-family:var(--font-sans);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;padding:9px 16px;border-color:var(--rule-strong);background:var(--paper)}
.btn.sm{padding:6px 12px;font-size:12px}
.btn.accent,.hero .btn.accent{background-image:linear-gradient(105deg,var(--chroma),var(--sun-b));background-color:var(--chroma);border-color:transparent;color:#fff}
.btn.accent:hover,.hero .btn.accent:hover{background-image:linear-gradient(105deg,var(--chroma-ink),var(--chroma));color:#fff}
[data-theme="dark"] .btn.accent{color:#0b1220}
[data-theme="dark"] .btn.accent:hover{color:#0b1220;background-image:linear-gradient(105deg,var(--sun-b),var(--sun-c))}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
[data-theme="dark"] .btn.primary:hover{background:var(--accent);color:#0b1220}
.tag{border-radius:999px;padding:2px 9px}
[data-theme="dark"] .tag{background:rgba(56,189,248,.10);border-color:rgba(125,211,252,.28);color:var(--ink-2)}
.tag.live{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-wash)}
[data-theme="dark"] .tag.live{color:var(--ink);background:var(--accent-wash)}
.lcard,.card-grid>*,.stats-row,.rates-grid,.panel,.modal-card,.tbl-wrap,.trade,.chart-box,.pool-box,.stat,.tre-cards>div,.fxs-card,.callout,.docs pre,.docs .tbl,.ccy-menu,.wallet-opt,.drop,.ca-card{border-radius:16px}
.lcard,.card-grid>*{background:#ffffff;box-shadow:0 12px 30px -24px rgba(15,23,42,.35)}
[data-theme="dark"] .lcard,[data-theme="dark"] .card-grid>*{background:var(--paper-sunk);box-shadow:0 12px 30px -24px rgba(0,0,0,.9)}
.rates-grid{background:#ffffff}
[data-theme="dark"] .rates-grid{background:var(--paper-sunk)}
.stats-row{background:#ffffff}
[data-theme="dark"] .stats-row{background:var(--paper-sunk)}
.modal-card{border-top:1px solid var(--rule-strong)}
.form input,.form select,.amt,.ccy-filter,.seg,.seg-sel{border-radius:12px}
.toast,.cookie-note .btn{border-radius:999px}
.cookie-note{border-radius:16px 16px 0 0}

/* progress: the gradient fills the bar */
.prog{height:4px;border-radius:2px;background:var(--paper-sunk);overflow:hidden}
.prog i{background-image:linear-gradient(90deg,var(--chroma-ink),var(--chroma),var(--sun-b));border-radius:2px}
.prog.hot i{background-image:linear-gradient(90deg,var(--chroma),var(--sun-b),var(--sun-c))}

/* the row images and flags keep their circles, the placeholder gets paper */
.row-img.ph,.lcard-img.ph{background:var(--paper-sunk);color:var(--ink-2);font-family:var(--font-serif)}
.flag{box-shadow:0 0 0 1px var(--rule-strong)}