/* ============================================================
 * BullsnBearsTrading -- Design System Tokens
 * Pillar 5 of the platform blueprint.
 *
 * One source of truth for color, type, spacing, radii, motion.
 * Pages should reference these tokens (var(--bnb-*)) instead of
 * hardcoded hex codes.
 *
 * Loaded BEFORE any page-specific CSS on every page.
 * ============================================================ */

:root {
  /* ----- Color: surfaces (dark-first) ----- */
  --bnb-bg:           #0d1117;   /* page background -- near-black, not pure */
  --bnb-bg-elev:      #11161f;   /* slightly raised surface */
  --bnb-surface:      #161b22;   /* card backgrounds */
  --bnb-surface-alt:  #1c222b;   /* secondary surfaces */
  --bnb-surface-hi:   #21262d;   /* hover / active row */
  --bnb-border:       #21262d;   /* default border */
  --bnb-border-hi:    #30363d;   /* prominent border */
  --bnb-overlay:      rgba(13,17,23,0.78);  /* modal scrim */

  /* ----- Color: text ----- */
  --bnb-text:         #e6edf3;   /* primary text */
  --bnb-text-muted:   #8b949e;   /* secondary text, helper copy */
  --bnb-text-faint:   #6e7681;   /* tertiary text, captions */
  --bnb-text-on-accent: #0d1117; /* text that sits ON a mint button */

  /* ----- Color: brand accents (used SPARINGLY) ----- */
  --bnb-mint:         #00E59B;   /* primary accent -- CTAs, active tabs */
  --bnb-mint-hi:      #1cf0a8;   /* hover state */
  --bnb-cyan:         #00C7E5;   /* secondary accent -- links, info */
  --bnb-cyan-hi:      #2cd5ef;
  --bnb-gradient:     linear-gradient(135deg, var(--bnb-mint), var(--bnb-cyan));

  /* ----- Color: semantic status ----- */
  --bnb-success:      #6DAA45;
  --bnb-success-bg:   rgba(109,170,69,0.12);
  --bnb-warn:         #F59E0B;
  --bnb-warn-bg:      rgba(245,158,11,0.12);
  --bnb-error:        #EF4444;
  --bnb-error-bg:     rgba(239,68,68,0.12);
  --bnb-info:         var(--bnb-cyan);
  --bnb-info-bg:      rgba(0,199,229,0.10);

  /* ----- Color: trading semantics ----- */
  --bnb-up:           #22C55E;   /* gains, bullish */
  --bnb-up-bg:        rgba(34,197,94,0.12);
  --bnb-down:         #EF4444;   /* losses, bearish */
  --bnb-down-bg:      rgba(239,68,68,0.12);
  --bnb-neutral:      #8b949e;

  /* ----- Typography ----- */
  --bnb-font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bnb-font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bnb-font-mono:    "JetBrains Mono", Menlo, Consolas, "Courier New", monospace;

  /* Type scale -- 1rem = 16px floor */
  --bnb-text-xs:   0.75rem;   /* 12px -- labels, captions */
  --bnb-text-sm:   0.875rem;  /* 14px -- body small */
  --bnb-text-base: 1rem;      /* 16px -- body */
  --bnb-text-lg:   1.125rem;  /* 18px -- emphasized body */
  --bnb-text-xl:   1.25rem;   /* 20px -- h4 */
  --bnb-text-2xl:  1.5rem;    /* 24px -- h3 */
  --bnb-text-3xl:  1.875rem;  /* 30px -- h2 */
  --bnb-text-4xl:  2.25rem;   /* 36px -- h1 */
  --bnb-text-hero: 3rem;      /* 48px -- hero */

  --bnb-leading-tight: 1.18;
  --bnb-leading-snug:  1.35;
  --bnb-leading-normal: 1.5;
  --bnb-leading-relaxed: 1.65;

  --bnb-weight-normal: 400;
  --bnb-weight-medium: 500;
  --bnb-weight-semibold: 600;
  --bnb-weight-bold: 700;
  --bnb-weight-extrabold: 800;

  --bnb-tracking-tight:  -0.01em;
  --bnb-tracking-normal: 0;
  --bnb-tracking-wide:   0.06em;
  --bnb-tracking-wider:  0.16em;

  /* ----- Spacing ----- */
  --bnb-space-1: 4px;
  --bnb-space-2: 8px;
  --bnb-space-3: 12px;
  --bnb-space-4: 16px;
  --bnb-space-5: 20px;
  --bnb-space-6: 24px;
  --bnb-space-8: 32px;
  --bnb-space-10: 40px;
  --bnb-space-12: 48px;
  --bnb-space-16: 64px;

  /* ----- Radii ----- */
  --bnb-radius-sm:   4px;
  --bnb-radius:      8px;
  --bnb-radius-lg:   12px;
  --bnb-radius-xl:   16px;
  --bnb-radius-full: 999px;

  /* ----- Elevation (shadows) ----- */
  --bnb-shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --bnb-shadow:     0 4px 14px rgba(0,0,0,0.35);
  --bnb-shadow-lg:  0 12px 32px rgba(0,0,0,0.45);
  --bnb-shadow-glow: 0 0 24px rgba(0,229,155,0.18);

  /* ----- Motion ----- */
  --bnb-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --bnb-ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --bnb-duration-fast:  0.15s;
  --bnb-duration:       0.22s;
  --bnb-duration-slow:  0.4s;

  /* ----- Layout ----- */
  --bnb-content-width:    1200px;
  --bnb-content-narrow:   720px;
  --bnb-touch-target-min: 44px;

  /* ----- Z-index scale ----- */
  --bnb-z-base:    0;
  --bnb-z-raised:  10;
  --bnb-z-sticky:  100;
  --bnb-z-overlay: 1000;
  --bnb-z-modal:   2000;
  --bnb-z-toast:   3000;
  --bnb-z-pill:    2147483640;  /* the EN|ES floating pill */
}

/* ============================================================
 * Numeric values (tables, KPI cards, ticker strips) should use
 * tabular-nums so columns align cleanly.
 * ============================================================ */
.bnb-num, .price, .pct, .stat-value, .metric-value, [data-num] {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ============================================================
 * Up / down trading semantics -- helper classes for inline use.
 * ============================================================ */
.bnb-up    { color: var(--bnb-up); }
.bnb-down  { color: var(--bnb-down); }
.bnb-neutral { color: var(--bnb-neutral); }

/* ============================================================
 * Focus visibility (a11y) -- one consistent ring everywhere.
 * ============================================================ */
:focus-visible {
  outline: 2px solid var(--bnb-mint);
  outline-offset: 2px;
  border-radius: var(--bnb-radius-sm);
}

/* ============================================================
 * Reduced motion -- respect the user's OS setting.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
 * Base body styles -- minimum legible defaults.
 * ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 16px;  /* type-scale base */
}
body {
  font-family: var(--bnb-font-body);
  font-size: var(--bnb-text-base);
  line-height: var(--bnb-leading-normal);
  color: var(--bnb-text);
  background: var(--bnb-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}