/* ============================================================
   TradeSafe Charting — Design Tokens
   Mirrors the Command Center's token vocabulary (tradesafe-app/src/master.css).
   RULE (same as Command Center): never hard-code colors/spacing in components —
   always reference a token from this file.
   ============================================================ */

:root {
  /* ---- Reference neutrals ---- */
  --ref-neutral-0: #000000;   /* pure black */
  --ref-neutral-4: #0a0a0a;
  --ref-neutral-8: #141414;
  --ref-neutral-20: #333333;
  --ref-neutral-40: #666666;
  --ref-neutral-60: #999999;
  --ref-neutral-90: #e6e6e6;
  --ref-neutral-100: #ffffff;

  /* ---- Brand accents ---- */
  --ref-primary: #f39c12;     /* gold — TradeSafe primary */
  --ref-secondary: #00d9ff;   /* cyan */
  --ref-tertiary: #a855f7;    /* purple */
  --ref-success: #22c55e;     /* green (up / profit) */
  --ref-error:   #ef4444;     /* red (down / loss) */
  --ref-warning: #f59e0b;
  --ref-info:    #3b82f6;

  /* Interactive accent. NOTE: gold (not red) on purpose — a red accent would
     collide with red down-candles and hurt chart readability. One var to flip. */
  --accent: var(--ref-primary);
  --accent-rgb: 243,156,18;
  --accent-bright: #f5b041;
  --accent-10: rgba(var(--accent-rgb),.10);
  --accent-20: rgba(var(--accent-rgb),.20);
  --accent-30: rgba(var(--accent-rgb),.30);
  --accent-40: rgba(var(--accent-rgb),.40);

  /* ---- Surfaces (pure-black system) ---- */
  --bg-primary:   var(--ref-neutral-0);   /* #000 main background */
  --bg-secondary: var(--ref-neutral-4);   /* raised surface */
  --bg-tertiary:  var(--ref-neutral-8);   /* elevated */
  --bg-hover: #1a1a1a;
  --bg-popover: #16161b;                   /* deep elevated surface for popups/dialogs/menus */
  --bg-field:   #24242b;                    /* fields (inputs/selects) — lighter than popover, never black-on-gray */
  --border-popover: rgba(255,255,255,.12);

  /* ---- Text ---- */
  --text-primary:   var(--ref-neutral-90);
  --text-secondary: var(--ref-neutral-60);
  --text-muted:     var(--ref-neutral-40);

  /* ---- Borders ---- */
  --border-color:  rgba(230,230,230,.12);
  --border-hover:  rgba(230,230,230,.22);
  --border-subtle: rgba(230,230,230,.06);

  /* ---- Brand gradient (green → gold → red) ---- */
  --gradient-full: linear-gradient(90deg,#22c55e,#f39c12,#ef4444);

  /* ---- Typography ---- */
  --font-display: 'Orbitron', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Space Mono', SFMono-Regular, Menlo, monospace;

  --text-xs: 10px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;

  /* ---- Spacing ---- */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;

  /* ---- Radius ---- */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.15);
  --shadow-md: 0 4px 20px rgba(0,0,0,.25);

  /* ---- Motion ---- */
  --transition-fast: 120ms cubic-bezier(0.2, 0, 0, 1);
  --transition-normal: 220ms cubic-bezier(0.2, 0, 0, 1);
  --transition-reveal: 480ms cubic-bezier(0.16, 1, 0.3, 1);  /* buttery ease-out for reveals */
  --transition-select: 200ms cubic-bezier(0.34, 1.56, 0.64, 1); /* slight spring for selections */

  /* ---- Layout ---- */
  --titlebar-height: 52px;
  --sidebar-w: 224px;          /* live-updated by Sidebar.js via JS */
  --transition-sidebar: 180ms cubic-bezier(0.2, 0, 0, 1);
}