/* ============================================================
   OCEAN Design System — Colors & Typography
   ============================================================
   Source: ocean_portal storybook tokens, ocean-style-guide brand
   book, and extracted runtime CSS variables from production.

   OCEAN has two visual "modes":
   - MARKETING / BRAND (Navy + Blue, bold editorial) — used on
     the website hero, getstarted, about, press pages.
   - APPLICATION / DASHBOARD (dark minimal with Bitcoin orange
     accent) — used on the live pool dashboard, stats, blocks.
   Both share the Inter family and ocean-cool palette.
============================================================ */

/* --- Fonts --- */
@font-face {
  font-family: 'InterVariable';
  src: url('fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'InterVariable';
  src: url('fonts/InterVariable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'InterDisplay';
  src: url('fonts/InterDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'InterDisplay';
  src: url('fonts/InterDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'InterDisplay';
  src: url('fonts/InterDisplay-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'InterDisplay';
  src: url('fonts/InterDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'InterDisplay';
  src: url('fonts/InterDisplay-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* Geist Mono — first-party */
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Brand Colors (marketing / style-guide) ── */
  --ocean-blue:           #1137F5;
  --ocean-blue-darker:    #0D2DC4;
  --ocean-blue-light:     #4D6BFF;
  --ocean-blue-lighter:   #8FA3FF;
  --ocean-blue-subtle:    #E8ECFF;
  --ocean-navy:           #02092D;  /* primary dark */
  --ocean-navy-mid:       #0A1347;
  --ocean-navy-light:     #1A2563;

  /* ── Ocean accent hues (used in gradients) ── */
  --ocean-teal:           #17D9D5;
  --ocean-cyan:           #1489EE;
  --ocean-mint:           #06FFD2;

  /* ── Bitcoin orange (dashboard accent) ── */
  --btc-orange:           #f7931a;
  --btc-orange-dim:       rgba(247, 147, 26, 0.08);
  --btc-orange-glow:      rgba(247, 147, 26, 0.15);

  /* ── Neutrals (brand book scale) ── */
  --white:     #FFFFFF;
  --gray-50:   #F8F9FC;
  --gray-100:  #F0F2F7;
  --gray-200:  #E2E5EF;
  --gray-300:  #C5CAD9;
  --gray-400:  #9BA2B8;
  --gray-500:  #6B7494;
  --gray-600:  #4A5270;
  --gray-700:  #333B54;
  --gray-800:  #1E2438;
  --gray-900:  #0F1320;

  /* ── Functional ── */
  --success:   #22c55e;
  --warning:   #FFB300;
  --error:     #ef4444;
  --alert:     oklch(83.7% 0.128 66.29);

  /* ── Semantic (light theme — marketing default) ── */
  --fg-primary:    var(--ocean-navy);
  --fg-secondary:  var(--gray-600);
  --fg-tertiary:   var(--gray-500);
  --fg-muted:      var(--gray-400);
  --fg-inverse:    var(--white);
  --fg-link:       var(--ocean-blue);

  --bg-primary:    var(--white);
  --bg-secondary:  var(--gray-50);
  --bg-tertiary:   var(--gray-100);
  --bg-inverse:    var(--ocean-navy);

  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --border-subtle: rgba(2, 9, 45, 0.06);

  /* ── Typography ── */
  --font-sans:    'InterVariable', 'InterDisplay', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'InterDisplay', 'InterVariable', 'Inter', -apple-system, sans-serif;
  --font-mono:    'Geist Mono', 'SF Mono', ui-monospace, monospace;

  /* Base size scale (dashboard tokens) */
  --type-display:   3.75rem;   /* 60 */
  --type-h1:        1.875rem;  /* 30 */
  --type-h2:        1.25rem;   /* 20 */
  --type-h3:        1.125rem;  /* 18 */
  --type-body:      1rem;      /* 16 */
  --type-body-sm:   0.875rem;  /* 14 */
  --type-caption:   0.75rem;   /* 12 */
  --type-micro:     0.625rem;  /* 10 */
  --type-mono-lg:   1.875rem;
  --type-mono-md:   1rem;
  --type-mono-sm:   0.75rem;
  --type-mono-xs:   0.625rem;

  /* Marketing / editorial size scale */
  --type-hero:      clamp(56px, 8vw, 120px);
  --type-section:   clamp(36px, 5vw, 64px);
  --type-subsection:clamp(24px, 3vw, 36px);

  /* Weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Line heights & letter spacing */
  --lh-tight: 0.95;
  --lh-snug:  1.15;
  --lh-base:  1.6;
  --lh-loose: 1.75;

  --ls-display: -0.03em;
  --ls-heading: -0.02em;
  --ls-body:    0;
  --ls-caps:    0.08em;

  /* ── Spacing (brand scale) ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;
  --space-6xl: 192px;

  /* ── Radii ── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 9999px;

  /* ── Shadows ── */
  --shadow-sm:    0 1px 2px rgba(2, 9, 45, 0.04);
  --shadow-md:    0 4px 12px rgba(2, 9, 45, 0.06);
  --shadow-lg:    0 12px 32px rgba(2, 9, 45, 0.10);
  --shadow-blue:  0 4px 20px rgba(17, 55, 245, 0.30);
  --shadow-inner: inset 0 0 0 1px rgba(255,255,255,0.06);

  /* ── Signature gradients ── */
  --gradient-hero: radial-gradient(87.41% 72.81% at 33.33% 21.53%, rgba(0, 76, 190, 0.7) 0%, rgba(0, 139, 217, 0) 100%),
                   radial-gradient(50% 50% at 50% 50%, rgba(6, 255, 210, 0.3) 0%, rgba(0, 255, 163, 0) 100%),
                   radial-gradient(169.35% 71.62% at 7.21% 79.74%, rgba(20, 39, 244, 0.8) 0%, rgba(69, 255, 222, 0) 100%),
                   radial-gradient(104.59% 89.67% at 96.88% 85.99%, rgba(24, 25, 243, 0.7) 0%, rgba(157, 197, 237, 0) 76.56%),
                   radial-gradient(191.67% 136.64% at 0% 0%, #1137f5 0%, #17d9d5 0%, #1489ee 100%);

  --gradient-soft: radial-gradient(107.84% 322.29% at 21.3% 183.33%,
                                   rgba(17, 55, 245, 0.3) 27.23%,
                                   rgba(20, 137, 238, 0.3) 66.15%,
                                   rgba(23, 217, 213, 0.3) 94.29%), #fff;

  --gradient-cta:  #06ffd2;  /* mint flat panel, with blue text */

  /* ── Motion ── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     0.15s;
  --dur-base:     0.2s;
  --dur-slow:     0.4s;
}

/* ── Dark / Dashboard theme (black-white default) ── */
[data-theme="dashboard"],
[data-theme="dark"] {
  --bg-primary:   #09090b;
  --bg-secondary: #0f0f11;
  --bg-tertiary:  #131316;
  --bg-card:      #131316;
  --bg-card-hover:#18181c;

  --fg-primary:   #fafafa;
  --fg-secondary: #a1a1aa;
  --fg-tertiary:  #71717a;
  --fg-muted:     #63636e;

  --border:        #1e1e23;
  --border-strong: #2a2a30;
  --border-subtle: #16161a;

  --accent:       var(--btc-orange);
  --accent-dim:   var(--btc-orange-dim);
  --accent-glow:  var(--btc-orange-glow);

  --nav-blur-bg:  rgba(9, 9, 11, 0.85);
}

/* ── Semantic type classes (use freely) ── */
.t-display {
  font-family: var(--font-display);
  font-size: var(--type-hero);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.t-h1 {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -2px;
  line-height: 1;
}
.t-h2 {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: var(--fw-extrabold);
  letter-spacing: -1.5px;
  line-height: 1.1;
}
.t-h3 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: var(--fw-bold);
  letter-spacing: -1px;
  line-height: 1.15;
}
.t-h4 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.5px;
  line-height: 1.3;
}
.t-body {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--type-body-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
}
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg-tertiary);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--type-mono-sm);
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
}
.t-mono-lg {
  font-family: var(--font-mono);
  font-size: var(--type-mono-lg);
  font-weight: var(--fw-medium);
  letter-spacing: -0.02em;
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ocean-blue);
}