/* ====================================================================
   theme.css — the machine-readable token layer for docs/09 - Design.md
   (issue #147 — the canonical beatFIAT terminal design system).

   SINGLE SOURCE OF TRUTH for the visual layer: every value below is
   declared 1:1 by name in the `docs/09 - Design.md` front-matter —
   colors / spacing / rounded / typography. test/test_design_tokens.js
   asserts the 1:1 mapping, so this file and the doc cannot drift.

   Conventions:
   * CSS custom properties here are the source; the JS side must NOT
     duplicate hex values — it mirrors them through theme-tokens.js
     (`themeColor('btc-primary')` resolves THIS file at runtime), so
     one edit here changes CSS + ApexCharts/canvas consumers together.
   * This file declares tokens ONLY — no element styles — so it is
     safe to include on pages that still carry legacy page-local
     styles (per-page migrations are follow-up tickets).
   * Raw hex literals belong in this file ONLY (plus the rgba() values
     in box-shadow signatures, which carry no color data). Pages and
     shared styles reference tokens via var(--...).

   Elevation model (doc "Elevation & Depth"): hairline borders +
   surface nesting, NOT drop shadows — only drawers/modals carry the
   documented occlusion shadow. Active-glow box-shadow signatures use
   the *-glow color tokens: `box-shadow: 0 0 14px var(--btc-glow)`.
   ==================================================================== */

:root {
  /* ---- docs/09 `colors` — 1:1 by name ---- */
  --surface: #121318;
  --surface-dim: #121318;
  --surface-bright: #38393f;
  --surface-container-lowest: #0d0e13;
  --surface-container-low: #1a1b21;
  --surface-container: #1e1f25;
  --surface-container-high: #292a2f;
  --surface-container-highest: #34343a;
  --on-surface: #e3e1e9;
  --on-surface-variant: #dbc2ae;
  --inverse-surface: #e3e1e9;
  --inverse-on-surface: #2f3036;
  --outline: #a38d7b;
  --outline-variant: #554335;
  --surface-tint: #ffb874;
  --primary: #ffb874;
  --on-primary: #4b2800;
  --primary-container: #f7931a;
  --on-primary-container: #603500;
  --inverse-primary: #8c4f00;
  --secondary: #d4bbff;
  --on-secondary: #3f0d83;
  --secondary-container: #59309d;
  --on-secondary-container: #c8aaff;
  --tertiary: #4edea3;
  --on-tertiary: #003824;
  --tertiary-container: #26c289;
  --on-tertiary-container: #004930;
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffdad6;
  --primary-fixed: #ffdcbf;
  --primary-fixed-dim: #ffb874;
  --on-primary-fixed: #2d1600;
  --on-primary-fixed-variant: #6b3b00;
  --secondary-fixed: #ebdcff;
  --secondary-fixed-dim: #d4bbff;
  --on-secondary-fixed: #260058;
  --on-secondary-fixed-variant: #562d9a;
  --tertiary-fixed: #6ffbbe;
  --tertiary-fixed-dim: #4edea3;
  --on-tertiary-fixed: #002113;
  --on-tertiary-fixed-variant: #005236;
  --background: #121318;
  --on-background: #e3e1e9;
  --surface-variant: #34343a;

  /* Obsidian tiering (doc "Colors" §Foundation) */
  --surface-base: #090a0f;          /* root canvas            */
  --surface-canvas: #0d0f14;        /* card containers        */
  --surface-card: #12151c;          /* elevated control panels */
  --surface-elevated: #181c24;      /* modals / drawers       */
  --surface-modal: #1f2430;         /* inset interactive wells */

  /* Hairline structural borders */
  --border-subtle: #1e2430;         /* resting outline        */
  --border-interactive: #272e3d;    /* interactive hover      */
  --border-active: #3d485e;         /* focused control border */

  /* Text roles */
  --text-primary: #f1f5f9;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  /* Per-asset theme modes (doc "Colors" §Multi-Dashboard Theme Modes) */
  --btc-primary: #f7931a;
  --btc-secondary: #f59e0b;
  --btc-glow: rgba(247, 147, 26, 0.25);
  --eth-primary: #8c65d3;
  --eth-secondary: #a855f7;
  --eth-glow: rgba(140, 101, 211, 0.25);
  --hype-primary: #10b981;
  --hype-secondary: #00e676;
  --hype-glow: rgba(16, 185, 129, 0.25);

  /* Telemetry spectrum */
  --buyer-dot: #f7931a;
  --seller-dot: #3b82f6;
  --metric-positive: #10b981;
  --metric-danger: #ef4444;
  --metric-warning: #f59e0b;
  --leverage-debt: #6366f1;

  /* Chain badges */
  --chain-arbitrum: #f59e0b;
  --chain-base: #ec4899;
  --chain-import: #22c55e;
  --chain-cyan: #06b6d4;
  --chain-hyperevm: #a855f7;

  /* Lending-platform brand identities (docs/09 §5 Add Wallet modal —
     the tile fills). Issue #149: the tiles must be token-driven, so the
     two brand colors live here like every other literal. */
  --platform-aave: #9896ff;
  --platform-hyperlend: #caeae5;

  /* ---- docs/09 `spacing` — 1:1 by name ---- */
  --gutter: 1rem;
  --gutter-lg: 1.5rem;
  --margin: 1rem;
  --margin-md: 1.5rem;
  --margin-lg: 2rem;
  --space-2xs: 0.125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1.25rem;
  --space-xl: 1.75rem;
  --space-2xl: 2.5rem;
  /* docs/09 spacing `chart-body` (issue #201): chart-card body height.
     ONE source for the unified dashboard's six chart cards, the
     transactions bubble chart, the ApexCharts JS heights
     (dcChartBodyHeight()) and the empty-state overlay sizing
     (leaf #204). Value = 1.5 x the old h-52 (208px) -> 312px. */
  --chart-body: 312px;
  /* docs/09 spacing `chart-body-wide` (issue #275): the wide-layout
     chart-card body height — the pre-#201 production height (h-52).
     The unified dashboard's 2/3/4-column grids resolve --chart-body
     to this value (wallet-ui.css override on
     #charts-grid[data-chart-cols="2|3|4"]); the 1-column layout, the
     empty state and the transactions bubble chart keep --chart-body. */
  --chart-body-wide: 208px;

  /* ---- docs/09 `rounded` — 1:1 by name ---- */
  --rounded-sm: 0.25rem;
  --rounded-DEFAULT: 0.5rem;
  --rounded-md: 0.75rem;
  --rounded-lg: 1rem;
  --rounded-xl: 1.5rem;
  --rounded-full: 9999px;

  /* ---- docs/09 `typography` — triple-font hierarchy ---- */
  /* The three families as standalone roles (doc "Typography"): */
  --font-family-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-family-ui: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  /* Per-style tokens (family / size / weight / line-height / tracking),
     flattened 1:1 from every docs/09 typography entry. */
  --type-display-lg-font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --type-display-lg-font-size: 36px;
  --type-display-lg-font-weight: 700;
  --type-display-lg-line-height: 44px;
  --type-display-lg-letter-spacing: -0.03em;
  --type-display-lg-mobile-font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --type-display-lg-mobile-font-size: 26px;
  --type-display-lg-mobile-font-weight: 700;
  --type-display-lg-mobile-line-height: 32px;
  --type-display-lg-mobile-letter-spacing: -0.02em;
  --type-headline-lg-font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --type-headline-lg-font-size: 24px;
  --type-headline-lg-font-weight: 700;
  --type-headline-lg-line-height: 32px;
  --type-headline-lg-letter-spacing: -0.02em;
  --type-headline-md-font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --type-headline-md-font-size: 18px;
  --type-headline-md-font-weight: 600;
  --type-headline-md-line-height: 24px;
  --type-headline-sm-font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --type-headline-sm-font-size: 15px;
  --type-headline-sm-font-weight: 600;
  --type-headline-sm-line-height: 20px;
  --type-body-lg-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --type-body-lg-font-size: 15px;
  --type-body-lg-font-weight: 400;
  --type-body-lg-line-height: 22px;
  --type-body-md-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --type-body-md-font-size: 13px;
  --type-body-md-font-weight: 400;
  --type-body-md-line-height: 18px;
  --type-body-sm-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --type-body-sm-font-size: 11px;
  --type-body-sm-font-weight: 400;
  --type-body-sm-line-height: 16px;
  --type-metric-xl-font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --type-metric-xl-font-size: 28px;
  --type-metric-xl-font-weight: 700;
  --type-metric-xl-line-height: 34px;
  --type-metric-xl-letter-spacing: -0.03em;
  --type-metric-lg-font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --type-metric-lg-font-size: 20px;
  --type-metric-lg-font-weight: 600;
  --type-metric-lg-line-height: 26px;
  --type-metric-lg-letter-spacing: -0.02em;
  --type-metric-md-font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --type-metric-md-font-size: 14px;
  --type-metric-md-font-weight: 600;
  --type-metric-md-line-height: 20px;
  --type-label-mono-sm-font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --type-label-mono-sm-font-size: 11px;
  --type-label-mono-sm-font-weight: 500;
  --type-label-mono-sm-line-height: 14px;
  --type-label-mono-sm-letter-spacing: 0.02em;
  --type-label-caps-font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --type-label-caps-font-size: 10px;
  --type-label-caps-font-weight: 700;
  --type-label-caps-line-height: 14px;
  --type-label-caps-letter-spacing: 0.08em;

  /* ---- Elevation signatures (doc "Elevation & Depth") ---- */
  /* Level 3 — the only documented occlusion shadow (drawers/modals). */
  --shadow-occlusion: 0 20px 48px -8px rgba(0, 0, 0, 0.85), 0 0 0 1px #272e3d;
  /* Active-glow signatures are composed from the per-asset glow
     tokens: box-shadow: 0 0 14px var(--btc-glow) etc. */
}