/* ═══════════════════════════════════════════════════════════════
   CBI DESIGN TOKENS v2.0 — Emerald Signal
   Single source of truth for the entire CBM platform.
   Import this file FIRST in every app.
   ═══════════════════════════════════════════════════════════════ */

/* ── COLOR PRIMITIVES ── */
:root {
  /* Backgrounds — dark-first layered surfaces */
  --bg-0: #06080d;
  --bg-1: #0b0f17;
  --bg-2: #111822;
  --bg-3: #181f2c;
  --bg-4: #202a3a;

  /* Surface overlays (glass / blur panels) */
  --surface-glass: rgba(6, 8, 13, 0.82);
  --surface-glass-heavy: rgba(6, 8, 13, 0.94);
  --surface-elevated: rgba(17, 24, 34, 0.92);

  /* Borders */
  --border: #1e2840;
  --border-2: #2e3d58;
  --border-subtle: rgba(46, 61, 88, 0.4);

  /* Text */
  --text-0: #e8edf8;   /* primary */
  --text-1: #8a9bc0;   /* secondary */
  --text-2: #4e6080;   /* muted */

  /* ── ACCENT (brand identity — Emerald Signal) ── */
  --accent:        #42d4ac;
  --accent-2:      #5de0bb;
  --accent-3:      #8aecd0;
  --accent-bg:     rgba(66, 212, 172, 0.08);
  --accent-border: rgba(66, 212, 172, 0.25);

  /* ── FUNCTIONAL COLORS (P&L — never overlap with accent) ── */
  --color-profit:  #22c55e;
  --color-profit-2:#4ade80;
  --color-profit-bg: rgba(34, 197, 94, 0.08);
  --color-loss:    #ef4444;
  --color-loss-2:  #f87171;
  --color-loss-bg: rgba(239, 68, 68, 0.08);

  /* ── BRAND PALETTE ── */
  --purple:  #9f7aea;
  --purple-2: #b794f4;
  --purple-3: #d6bcfa;
  --purple-bg: rgba(159, 122, 234, 0.08);
  --purple-border: rgba(159, 122, 234, 0.25);

  --blue:    #4ea8f5;
  --blue-2:  #7dc4ff;
  --blue-3:  #b3dcff;
  --blue-bg: rgba(78, 168, 245, 0.08);
  --blue-border: rgba(78, 168, 245, 0.25);

  --green:   #38c9a0;
  --green-2: #5de0bb;
  --green-3: #8aecd0;
  --green-bg: rgba(56, 201, 160, 0.08);
  --green-border: rgba(56, 201, 160, 0.25);

  --gold:    #c9a227;
  --gold-2:  #e0b84a;
  --gold-3:  #f0d06a;
  --gold-bg: rgba(201, 162, 39, 0.08);
  --gold-border: rgba(201, 162, 39, 0.25);

  --red:     #e84848;
  --red-2:   #f07070;
  --red-bg:  rgba(232, 72, 72, 0.08);
  --red-border: rgba(232, 72, 72, 0.25);

  --amber:   #f0a020;
  --amber-2: #ffc04d;
  --amber-bg: rgba(240, 160, 32, 0.08);
  --amber-border: rgba(240, 160, 32, 0.25);

  --cyan:    #2ac8d4;
  --cyan-2:  #5ae0ea;
  --cyan-bg: rgba(42, 200, 212, 0.08);
  --cyan-border: rgba(42, 200, 212, 0.25);

  /* ── GRADIENTS ── */
  --grad-brand: linear-gradient(135deg, var(--accent), var(--cyan));
  --grad-brand-130: linear-gradient(130deg, var(--accent) 10%, var(--cyan) 50%, var(--blue) 100%);
  --grad-gold: linear-gradient(135deg, var(--gold), var(--amber));
  --grad-green: linear-gradient(135deg, var(--green), var(--cyan));
  --grad-surface: linear-gradient(180deg, var(--bg-0), var(--bg-1));

  /* Ambient glow backgrounds */
  --ambient-default:
    radial-gradient(ellipse 70% 60% at 10% 0%,   rgba(66,212,172,.09)  0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 90% 80%,   rgba(42,200,212,.06)  0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 55% 40%,   rgba(78,168,245,.04)  0%, transparent 50%);

  /* Glows (for box-shadow / text-shadow) */
  --glow-purple: 0 0 20px rgba(159, 122, 234, 0.25);
  --glow-blue:   0 0 20px rgba(78, 168, 245, 0.25);
  --glow-green:  0 0 20px rgba(56, 201, 160, 0.25);
  --glow-gold:   0 0 20px rgba(201, 162, 39, 0.25);
  --glow-red:    0 0 20px rgba(232, 72, 72, 0.25);

  --glow-accent: 0 0 20px rgba(66, 212, 172, 0.25);

  /* ── TYPOGRAPHY ── */
  --font-head: 'Syne', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', monospace;

  /* Type scale (major-second 1.125) */
  --text-xs:   11px;
  --text-sm:   12.5px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  clamp(38px, 5.5vw, 64px);

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.18em;

  /* ── SPACING ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ── RADIUS ── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 100px;
  --r-full: 9999px;

  /* ── SHADOWS ── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl:  0 24px 80px rgba(0, 0, 0, 0.6);
  --shadow-glow-brand: 0 0 30px rgba(66, 212, 172, 0.3);

  /* ── TRANSITIONS ── */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.15s;
  --duration-base: 0.22s;
  --duration-slow: 0.4s;

  /* ── Z-INDEX SCALE ── */
  --z-base:    1;
  --z-sticky:  10;
  --z-header:  100;
  --z-dropdown: 200;
  --z-modal:   1000;
  --z-toast:   1100;
  --z-overlay: 900;

  /* ── LAYOUT ── */
  --max-w: 1200px;
  --max-w-lg: 1400px;
  --max-w-sm: 680px;
  --sidebar-w: 220px;
  --header-h: 64px;
  --ticker-h: 32px;
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── LIGHT MODE (Hub + Landing only) ── */
:root[data-theme="light"] {
  --bg-0: #f8f9fc;
  --bg-1: #f0f2f7;
  --bg-2: #e8ebf2;
  --bg-3: #dde1eb;
  --bg-4: #d0d5e2;

  --surface-glass: rgba(248, 249, 252, 0.82);
  --surface-glass-heavy: rgba(248, 249, 252, 0.94);
  --surface-elevated: rgba(255, 255, 255, 0.92);

  --border: #d0d5e2;
  --border-2: #b8c0d2;
  --border-subtle: rgba(176, 186, 210, 0.4);

  --text-0: #0f1729;
  --text-1: #4a5568;
  --text-2: #8a95aa;

  --accent:        #2ba880;
  --accent-2:      #239070;
  --accent-bg:     rgba(43, 168, 128, 0.06);
  --accent-border: rgba(43, 168, 128, 0.18);

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.10);
  --shadow-xl:  0 24px 80px rgba(0, 0, 0, 0.12);
  --shadow-glow-brand: 0 0 30px rgba(43, 168, 128, 0.15);

  --glow-accent: 0 0 20px rgba(43, 168, 128, 0.15);
  --glow-purple: 0 0 20px rgba(159, 122, 234, 0.12);
  --glow-blue:   0 0 20px rgba(78, 168, 245, 0.12);
  --glow-green:  0 0 20px rgba(56, 201, 160, 0.12);
  --glow-gold:   0 0 20px rgba(201, 162, 39, 0.12);

  --ambient-default:
    radial-gradient(ellipse 70% 60% at 10% 0%,   rgba(43,168,128,.05)  0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 90% 80%,   rgba(42,200,212,.03)  0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 55% 40%,   rgba(78,168,245,.02)  0%, transparent 50%);

  --grad-brand: linear-gradient(135deg, var(--accent), #2ac8d4);
  --grad-surface: linear-gradient(180deg, var(--bg-0), var(--bg-1));
}

/* ── GOOGLE FONTS IMPORT ──
   Each app should include this in <head> via <link>.
   Canonical URL:
   https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&display=swap
*/