/* ── RightBonds design tokens (Binance-derived system) ─────────────────────────
   Single source of truth for color / radius / spacing / type tokens.
   DARK IS THE DEFAULT: :root carries the dark (marketing) palette; the
   [data-theme="light"] attribute flips to the light transactional palette.
   Pages consume ONLY the --bn-* names (or map their legacy vars onto them).
   Rules of the system: one accent (yellow), black text on yellow, flat color
   blocks, 1px hairlines, no shadows/gradients/glass.                       */

:root {
  /* Brand accent — the only brand color */
  --bn-primary: #f5a623;
  --bn-primary-active: #d18a10;
  --bn-primary-disabled: #3a311c;
  --bn-on-primary: #181a20;   /* black-on-yellow: the signature CTA combo */

  /* Surfaces (dark marketing canvas) */
  --bn-canvas: #0b0e11;       /* page floor */
  --bn-card: #1e2329;         /* cards, nav dropdowns, table card */
  --bn-elevated: #2b3139;     /* nested cards, hover states */
  --bn-hairline: #2b3139;     /* 1px borders on dark */

  /* Text */
  --bn-text: #ffffff;         /* high-contrast headlines */
  --bn-body: #eaecef;         /* running text on dark */
  --bn-muted: #707a8a;        /* captions, column heads, footer links */
  --bn-muted-strong: #929aa5; /* emphasized muted labels */

  /* Semantics */
  --bn-up: #0ecb81;           /* price/yield up — text color only */
  --bn-down: #f6465d;         /* price/yield down — text color only */
  --bn-info: #3b82f6;         /* info + focus ring base */

  /* Constants that do NOT flip with theme */
  --bn-ink: #181a20;            /* strongest text on light surfaces */
  --bn-soft-light: #fafafa;     /* light footer / soft light surface */
  --bn-hairline-light: #eaecef; /* 1px borders on light surfaces */

  /* Radius scale */
  --bn-r-sm: 4px;
  --bn-r-md: 6px;    /* buttons */
  --bn-r-lg: 8px;    /* inputs, content cards, trust badges */
  --bn-r-xl: 12px;   /* elevated containers, CTA bands */
  --bn-r-pill: 9999px;

  /* Spacing (4px scale) */
  --bn-s-1: 4px;
  --bn-s-2: 8px;
  --bn-s-3: 12px;
  --bn-s-4: 16px;
  --bn-s-6: 24px;
  --bn-s-8: 32px;
  --bn-s-12: 48px;
  --bn-section: 80px;
  --bn-section-mobile: 48px;

  /* Focus ring */
  --bn-focus-ring: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

/* Light transactional theme — same yellow CTAs, same up/down colors */
[data-theme="light"] {
  --bn-canvas: #ffffff;
  --bn-card: #ffffff;   /* DESIGN.md: light-mode cards use canvas-light; #fafafa is footer/disabled only */
  --bn-elevated: #f5f5f5;
  --bn-hairline: #eaecef;

  --bn-text: #181a20;
  --bn-body: #181a20;
  /* --bn-muted / --bn-muted-strong work on both canvases — unchanged */

  --bn-primary-disabled: #f0e3c0;
}

/* ── Lucide inline-icon helper ──────────────────────────────────────────────
   Shared sizing for every inline <svg class="lu"> icon (Lucide 24x24 stroke
   set, stroke="currentColor" so it inherits text color / theme automatically).
   Site-wide so bond/facet/hub/guide/best pages (built from BOND_CSS) and the
   main app pages (index/plan/portfolio/privacy) get one consistent icon size. */
.lu { width: 18px; height: 18px; vertical-align: -3px; flex-shrink: 0; }
.lu-sm { width: 14px; height: 14px; vertical-align: -2px; }