/*
 * CoinBatmi Pro v16 — Design System
 * Light-first. Editorial clarity. Bloomberg-meets-The-Block.
 * Every token named for intent, not appearance.
 * ─────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════
   GOOGLE FONTS  (2 families only — Instrument Serif + Plus Jakarta Sans)
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — LIGHT MODE (default)
═══════════════════════════════════════════════════════════ */
:root {

  /* ── Typography ──────────────────────────── */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'Söhne Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Type Scale (no sub-11px labels in UI) */
  --text-2xs: 11px;   /* micro labels */
  --text-xs:  12px;   /* captions, meta */
  --text-sm:  13px;   /* secondary text */
  --text-base:15px;   /* body copy */
  --text-md:  17px;   /* card intro */
  --text-lg:  20px;   /* sub-headlines */
  --text-xl:  24px;   /* section titles */
  --text-2xl: 32px;   /* page headlines */
  --text-3xl: 42px;   /* hero */
  --text-4xl: clamp(36px, 5vw, 60px);

  /* ── Surface / Background ─────────────────── */
  --bg-canvas:   #f7f8fa;      /* page background */
  --bg-white:    #ffffff;      /* card surface */
  --bg-subtle:   #f2f4f7;      /* inset panels, alt rows */
  --bg-muted:    #eaecf1;      /* borders, dividers */
  --bg-overlay:  rgba(10,14,26,.55); /* modal backdrop */

  /* ── Text ─────────────────────────────────── */
  --text-primary:   #0d1117;   /* headings, prices */
  --text-secondary: #3d4a5c;   /* body copy */
  --text-muted:     #6b7a90;   /* labels, captions */
  --text-faint:     #9baab8;   /* placeholder, disabled */
  --text-inverse:   #ffffff;

  /* ── Accent — Sky Blue (trust + tech) ────── */
  --accent:       #0284c7;
  --accent-hover: #0369a1;
  --accent-light: #e0f2fe;
  --accent-mid:   rgba(2, 132, 199, .12);
  --accent-border:rgba(2, 132, 199, .25);
  --accent-glow:  rgba(2, 132, 199, .18);

  /* ── Market Colors ────────────────────────── */
  --bull:        #059669;   /* green — price up */
  --bull-light:  #d1fae5;
  --bull-mid:    rgba(5, 150, 105, .10);
  --bear:        #dc2626;   /* red — price down */
  --bear-light:  #fee2e2;
  --bear-mid:    rgba(220, 38, 38, .10);
  --neut:        #d97706;   /* amber — neutral */
  --neut-light:  #fef3c7;
  --bitcoin:     #f7931a;
  --bitcoin-light:#fff3e0;

  /* ── Border ───────────────────────────────── */
  --border:       #dde1e9;
  --border-hover: #c4cad6;
  --border-focus: var(--accent);

  /* ── Shadow ───────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.12), 0 8px 20px rgba(0,0,0,.07);
  --shadow-accent: 0 4px 20px var(--accent-glow);

  /* ── Radius ───────────────────────────────── */
  --r-xs:  4px;
  --r-sm:  6px;
  --r:     8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl:24px;
  --r-full:9999px;

  /* ── Layout ───────────────────────────────── */
  --max-w:    1360px;
  --col-gap:  24px;
  --section-gap: 56px;
  --header-h: 60px;
  --topbar-h: 36px;

  /* ── Motion ───────────────────────────────── */
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --t-fast: 0.15s;
  --t:      0.22s;
  --t-slow: 0.40s;
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE OVERRIDES
═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg-canvas:   #0f1117;
  --bg-white:    #171b24;
  --bg-subtle:   #1c2130;
  --bg-muted:    #242a38;
  --bg-overlay:  rgba(0,0,0,.70);

  --text-primary:   #eef1f6;
  --text-secondary: #9baab8;
  --text-muted:     #6b7a90;
  --text-faint:     #3d4a5c;

  --accent:       #38bdf8;
  --accent-hover: #7dd3fc;
  --accent-light: rgba(56, 189, 248, .08);
  --accent-mid:   rgba(56, 189, 248, .10);
  --accent-border:rgba(56, 189, 248, .20);
  --accent-glow:  rgba(56, 189, 248, .15);

  --bull:        #34d399;
  --bull-light:  rgba(52, 211, 153, .10);
  --bull-mid:    rgba(52, 211, 153, .08);
  --bear:        #f87171;
  --bear-light:  rgba(248, 113, 113, .10);
  --bear-mid:    rgba(248, 113, 113, .08);
  --neut:        #fbbf24;

  --border:       #242a38;
  --border-hover: #2e3648;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.40);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.45);
  --shadow-md: 0 4px 20px rgba(0,0,0,.50);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.55);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.60);
}

/* Prefer-color-scheme support */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-canvas:   #0f1117;
    --bg-white:    #171b24;
    --bg-subtle:   #1c2130;
    --bg-muted:    #242a38;
    --text-primary:   #eef1f6;
    --text-secondary: #9baab8;
    --text-muted:     #6b7a90;
    --text-faint:     #3d4a5c;
    --accent:       #38bdf8;
    --accent-hover: #7dd3fc;
    --accent-light: rgba(56, 189, 248, .08);
    --accent-mid:   rgba(56, 189, 248, .10);
    --accent-border:rgba(56, 189, 248, .20);
    --accent-glow:  rgba(56, 189, 248, .15);
    --bull:        #34d399;
    --bull-light:  rgba(52, 211, 153, .10);
    --bear:        #f87171;
    --bear-light:  rgba(248, 113, 113, .10);
    --border:       #242a38;
    --border-hover: #2e3648;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.45);
    --shadow-md: 0 4px 20px rgba(0,0,0,.50);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.55);
  }
}