/* ============================================================
   sbpex — Design Tokens v2.0
   Source of truth: sbpex_handoff/DESIGN_SYSTEM.md (§1–4, §7)
   Apple-inspired fintech. Light theme by default; dark tokens
   defined for the system but the Mini App stays light.
   ============================================================ */

:root {
  /* ── Brand (§1 / §7) ─────────────────────────────────────── */
  --blue:        #0066FF;   /* primary — CTA, mark, links, active */
  --blue-deep:   #0047B3;   /* press / hover depth on blue */
  --blue-soft:   #EAF1FF;   /* tint background (icons, highlights) */
  --white:       #FFFFFF;

  /* Cool neutrals */
  --ink:         #0A0E14;   /* primary text; dark-theme bg */
  --ink-2:       #1A2230;   /* headings on light */
  --graphite:    #5A6577;   /* secondary text / body */
  --mist:        #6B7785;   /* labels, placeholders, timestamps — 4.6:1 on white (AA) */
  --paper:       #F6F8FB;   /* section bg, metric cards */
  --line:        rgba(10, 20, 40, 0.08);  /* hairline borders */

  /* Status */
  --up:          #16B364;   /* growth / success */
  --down:        #E5484D;   /* drop / error */

  /* SBP spectrum — ACCENT ONLY (thin 4–6px hairline). Never a fill/background. */
  --sbp-indigo:  #1F1F5C;
  --sbp-violet:  #5B2A86;
  --sbp-magenta: #D6006D;
  --sbp-amber:   #F9A01B;
  --sbp-gradient: linear-gradient(90deg, #0066FF 0%, #5B2A86 55%, #D6006D 78%, #F9A01B 100%);

  /* ── Typography (§2) ─────────────────────────────────────── */
  /* System SF Pro stack — no web-font files. Weights 400 / 500 / 600 only. */
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Manrope", system-ui, sans-serif;
  --font-mono:   ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  /* Scale (§2) */
  --text-h1:   40px;
  --text-h2:   28px;
  --text-h3:   22px;
  --text-h4:   18px;
  --text-body: 15px;
  --text-sm:   14px;
  --text-xs:   12px;
  --text-xxs:  11px;

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.65;

  /* ── Spacing — 4px step (§4) ─────────────────────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* ── Radii (§4 / §7) — Apple-scale ───────────────────────── */
  --radius-pill:    999px;
  --radius-card:    24px;
  --radius-input:   16px;
  --radius-tile-sm: 12px;
  --radius-logo:    14px;

  /* ── Effects (§4) ────────────────────────────────────────── */
  --shadow-lift: 0 24px 60px rgba(10, 30, 80, 0.10);  /* functional, soft only */
  --ring-focus:  0 0 0 3px rgba(0, 102, 255, 0.25);

  /* ── Back-compat aliases ─────────────────────────────────── */
  /* styles.css references these --color-* names; mapping them re-skins it. */
  --color-blue:        var(--blue);
  --color-blue-dark:   var(--ink);          /* dark pills / toast */
  --color-teal:        #0F6E56;             /* USDT marker (per Mini App reference) */
  --color-teal-light:  #E8F4F1;
  --color-surface:     var(--white);
  --color-surface-2:   var(--paper);
  --color-surface-3:   #EBEEF3;
  --color-surface-dark:#0A2847;
  --color-text:        var(--ink);
  --color-text-2:      var(--graphite);
  --color-text-3:      var(--mist);
  --color-text-inv:    #FFFFFF;
  --color-text-inv-2:  rgba(255, 255, 255, 0.65);
  --color-border:      var(--line);
  --color-border-dark: rgba(255, 255, 255, 0.10);
  --color-green:       var(--up);
  --color-red:         var(--down);
}

/* ── Dark theme (defined in the system; opt-in via data-theme="dark") ──
   The Mini App does not auto-switch — it stays light. These tokens make the
   dark theme available for any surface that sets data-theme="dark". */
:root[data-theme="dark"] {
  --bg:    #0A0E14;
  --card:  #141A24;
  --card-2:#1B2330;
  --line:  rgba(255, 255, 255, 0.10);
  --text:  rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.52);

  --color-surface:    var(--card);
  --color-surface-2:  var(--card-2);
  --color-surface-3:  #222C3A;
  --color-text:       var(--text);
  --color-text-2:     var(--muted);
  --color-text-3:     var(--muted);
  --color-border:     var(--line);
  --color-blue-dark:  #1B2330;
  --color-teal-light: rgba(15, 110, 86, 0.18);
}