/* FlowDesk design tokens — Gold Terminal (source of truth from design handoff)
 *
 * Matches FlowDesk-Complete-Design-Handoff.md + index.html prototype exactly.
 * Single source of truth. No hardcoded hex elsewhere.
 *
 * Palette: deep near-black ground, gold primary accent,
 * emerald/rose strictly for direction. Professional options desk.
 */

:root {
  /* ── Colour: ground and surfaces ────────────────────────────── */
  --fd-bg: #07090c;            /* main app background */
  --fd-rail: #0b0e13;          /* sidebar / topbar */
  --fd-surface: #0f131a;       /* cards / panels */
  --fd-bg-subtle: #141920;     /* nested / hover base */
  --fd-bg-soft: #0b0e13;
  --fd-bg-hover: #1a2029;

  --fd-border: rgba(255,255,255,0.06);
  --fd-border-soft: rgba(255,255,255,0.04);
  --fd-border-strong: rgba(255,255,255,0.10);

  /* ── Glass ──────────────────────────────────────────────────── */
  --fd-glass-bg: rgba(15, 19, 26, 0.85);
  --fd-glass-border: rgba(201, 162, 39, 0.12);
  --fd-glass-blur: 16px;

  /* ── Text ───────────────────────────────────────────────────── */
  --fd-text: #e2e8f0;
  --fd-text-soft: #94a3b8;
  --fd-text-dim: #64748b;
  --fd-muted: #3d4a5c;

  /* ── Brand: Gold ────────────────────────────────────────────── */
  --fd-accent: #c9a227;
  --fd-accent-hover: #e0b83a;
  --fd-accent-bright: #e0b83a;
  --fd-accent-dim: #9a7b1a;
  --fd-accent-soft: rgba(201, 162, 39, 0.12);
  --fd-accent-glow: rgba(201, 162, 39, 0.28);
  --fd-on-accent: #0a0c10;
  --fd-accent-grad-start: #e0b83a;
  --fd-accent-grad-end: #9a7b1a;
  --fd-accent-gradient: linear-gradient(165deg, #e0b83a 0%, #c9a227 45%, #9a7b1a 100%);
  --fd-accent-gradient-soft: linear-gradient(135deg, rgba(224,184,58,0.15) 0%, rgba(201,162,39,0.06) 100%);

  /* ── Secondary (kept for charts) ────────────────────────────── */
  --fd-cyan: #06b6d4;
  --fd-cyan-soft: rgba(6, 182, 212, 0.12);

  /* ── Direction (data, not decoration) ───────────────────────── */
  --fd-bull: #10b981;
  --fd-bull-rgb: 16, 185, 129;
  --fd-bull-soft: rgba(16, 185, 129, 0.12);
  --fd-bull-dim: #059669;
  --fd-bull-glow: rgba(16, 185, 129, 0.25);
  --fd-bull-bright: #34d399;

  --fd-bear: #f43f5e;
  --fd-bear-rgb: 244, 63, 94;
  --fd-bear-soft: rgba(244, 63, 94, 0.12);
  --fd-bear-dim: #e11d48;
  --fd-bear-glow: rgba(244, 63, 94, 0.25);
  --fd-bear-bright: #fb7185;

  --fd-warn: #f59e0b;
  --fd-warn-dim: #b45309;
  --fd-info: #64748b;
  --fd-neutral: #94a3b8;

  /* ── Depth ──────────────────────────────────────────────────── */
  --fd-shadow: 0 1px 0 0 rgba(255,255,255,0.03) inset, 0 1px 2px 0 rgba(0,0,0,0.4);
  --fd-shadow-md: 0 4px 24px -4px rgba(0,0,0,0.5), 0 1px 0 0 rgba(255,255,255,0.04) inset;
  --fd-shadow-lg: 0 8px 32px -8px rgba(0,0,0,0.6);
  --fd-shadow-glow: 0 0 0 1px rgba(201,162,39,0.3), 0 0 20px -4px rgba(201,162,39,0.25);

  /* ── Shape ──────────────────────────────────────────────────── */
  --fd-radius: 10px;
  --fd-radius-sm: 6px;
  --fd-radius-md: 8px;
  --fd-radius-lg: 12px;
  --fd-radius-xl: 14px;
  --fd-radius-pill: 999px;

  /* ── Layout ─────────────────────────────────────────────────── */
  --fd-sidebar-w: 200px;
  --fd-sidebar-w-collapsed: 64px;
  --fd-topbar-h: 56px;
  --fd-page-pad: 20px;
  --fd-card-pad: 16px;

  /* ── Type ───────────────────────────────────────────────────── */
  --fd-font-sans: 'Inter', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fd-font-mono: 'JetBrains Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, Consolas, monospace;

  /* ── Legacy aliases (keep old rules working) ────────────────── */
  --bg: var(--fd-bg);
  --card: var(--fd-surface);
  --ink: var(--fd-text);
  --gold: var(--fd-accent);
  --line: var(--fd-border);
  --muted: var(--fd-text-dim);
  --bull: var(--fd-bull);
  --bear: var(--fd-bear);
}

/* Light theme (optional, dark remains primary) */
:root[data-theme="light"] {
  --fd-bg: #f8fafc;
  --fd-rail: #ffffff;
  --fd-surface: #ffffff;
  --fd-bg-subtle: #f1f5f9;
  --fd-bg-soft: #ffffff;
  --fd-bg-hover: #f1f5f9;
  --fd-border: #e2e8f0;
  --fd-border-soft: #f1f5f9;
  --fd-border-strong: #cbd5e1;
  --fd-glass-bg: rgba(255, 255, 255, 0.85);
  --fd-glass-border: rgba(201, 162, 39, 0.15);
  --fd-text: #0f172a;
  --fd-text-soft: #475569;
  --fd-text-dim: #64748b;
  --fd-muted: #94a3b8;
  --fd-accent: #b45309;
  --fd-accent-hover: #c9a227;
  --fd-accent-bright: #e0b83a;
  --fd-accent-dim: #92400e;
  --fd-accent-soft: rgba(180, 83, 9, 0.08);
  --fd-accent-glow: rgba(180, 83, 9, 0.15);
  --fd-on-accent: #ffffff;
  --fd-bull: #059669;
  --fd-bull-soft: rgba(5, 150, 105, 0.1);
  --fd-bear: #e11d48;
  --fd-bear-soft: rgba(225, 29, 72, 0.1);
  --fd-shadow: 0 1px 2px rgba(0,0,0,0.04);
  --fd-shadow-md: 0 4px 12px -2px rgba(0,0,0,0.08);
  --fd-shadow-glow: 0 0 0 1px rgba(180,83,9,0.2), 0 0 16px -4px rgba(180,83,9,0.12);
}

/* System preference fallback when no data-theme set */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --fd-bg: #f8fafc;
    --fd-rail: #ffffff;
    --fd-surface: #ffffff;
    --fd-bg-subtle: #f1f5f9;
    --fd-text: #0f172a;
    --fd-text-soft: #475569;
    --fd-text-dim: #64748b;
    --fd-border: #e2e8f0;
    --fd-accent: #b45309;
    --fd-accent-hover: #c9a227;
  }
}