/* ============================================================
   FINANCA - Design Tokens v2
   Liquid Finance canonical tokens.
   Theme defaults live in :root; dark overrides live in [data-theme="dark"].
   ============================================================ */

:root {
  color-scheme: light;

  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-ui: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace;

  --bg-base: #f7f7fb;
  --bg-surface: #ffffff;
  --bg-elevated: #f0f1f8;
  --bg-glass: rgba(255, 255, 255, 0.72);
  --border-glass: rgba(10, 10, 15, 0.10);
  --border-subtle: rgba(10, 10, 15, 0.06);

  --accent-primary: #675dff;
  --accent-primary-hover: #574cf2;
  --accent-success: #00a978;
  --accent-danger: #e34d4d;
  --accent-amber: #c97914;
  --accent-info: #3978ff;

  --text-primary: #17151f;
  --text-secondary: rgba(23, 21, 31, 0.68);
  --text-muted: rgba(23, 21, 31, 0.44);
  --text-inverse: #ffffff;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  --fs-display: 3.5rem;
  --fs-h1: 2rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.125rem;
  --fs-body: 0.875rem;
  --fs-sm: 0.8125rem;
  --fs-xs: 0.75rem;
  --fs-xxs: 0.6875rem;
  --fs-kpi: 1.75rem;
  --fs-kpi-sm: 1.35rem;
  --fs-kpi-label: 0.75rem;

  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  --ls-tight: 0;
  --ls-normal: 0;
  --ls-wide: 0;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 150ms var(--ease-standard);
  --transition-base: 200ms var(--ease-standard);
  --transition-slow: 300ms var(--ease-standard);
  --motion-sidebar: 300ms var(--ease-standard);

  --shadow-glass: 0 18px 60px rgba(25, 22, 50, 0.12);
  --shadow-glass-hover: 0 24px 72px rgba(25, 22, 50, 0.16);

  --bg-root: var(--bg-base);
  --bg-primary: var(--bg-glass);
  --bg-secondary: rgba(255, 255, 255, 0.56);
  --surface-hover: rgba(103, 93, 255, 0.08);
  --surface-raised: var(--bg-surface);

  --tx-primary: var(--text-primary);
  --tx-secondary: var(--text-secondary);
  --tx-tertiary: var(--text-muted);
  --tx-link: var(--accent-primary);
  --tx-on-accent: var(--text-inverse);

  --bd-primary: var(--border-glass);
  --bd-secondary: var(--border-subtle);
  --bd-subtle: var(--border-subtle);

  --ac: var(--accent-primary);
  --ac-hover: var(--accent-primary-hover);
  --ac-soft: rgba(103, 93, 255, 0.12);
  --ac-rgb: 103, 93, 255;

  --green: var(--accent-success);
  --green-soft: rgba(0, 169, 120, 0.12);
  --green-rgb: 0, 169, 120;
  --red: var(--accent-danger);
  --red-soft: rgba(227, 77, 77, 0.12);
  --red-rgb: 227, 77, 77;
  --amber: var(--accent-amber);
  --amber-soft: rgba(201, 121, 20, 0.14);
  --amber-rgb: 201, 121, 20;
  --info: var(--accent-info);
  --info-soft: rgba(57, 120, 255, 0.12);
  --info-rgb: 57, 120, 255;

  --sh-none: none;
  --sh-sm: 0 1px 2px rgba(25, 22, 50, 0.06);
  --sh-md: 0 8px 24px rgba(25, 22, 50, 0.10);
  --sh-lg: 0 18px 48px rgba(25, 22, 50, 0.14);
  --sh-xl: 0 28px 80px rgba(25, 22, 50, 0.18);
  --sh-card: var(--shadow-glass);
  --sh-card-hover: var(--shadow-glass-hover);

  --inp-bg: rgba(255, 255, 255, 0.72);
  --inp-bd: var(--border-glass);
  --inp-tx: var(--text-primary);
  --inp-ph: var(--text-muted);

  --nav-bg: rgba(255, 255, 255, 0.78);
  --nav-bd: var(--border-glass);
  --nav-tx: var(--text-primary);
  --nav-tx-dim: var(--text-muted);

  --chat-bg: var(--bg-base);
  --chat-surface: var(--bg-glass);
  --chat-bubble-user: var(--accent-primary);
  --chat-bubble-ai: rgba(255, 255, 255, 0.82);
  --chat-input-bg: var(--inp-bg);
  --chat-input-bd: var(--inp-bd);
  --chat-ctx-bar: rgba(255, 255, 255, 0.54);

  --insight-positive-bg: var(--green-soft);
  --insight-positive-tx: var(--green);
  --insight-positive-bd: rgba(var(--green-rgb), 0.18);
  --insight-negative-bg: var(--red-soft);
  --insight-negative-tx: var(--red);
  --insight-negative-bd: rgba(var(--red-rgb), 0.18);
  --insight-warning-bg: var(--amber-soft);
  --insight-warning-tx: var(--amber);
  --insight-warning-bd: rgba(var(--amber-rgb), 0.18);
  --insight-info-bg: var(--info-soft);
  --insight-info-tx: var(--info);
  --insight-info-bd: rgba(var(--info-rgb), 0.18);
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg-base: #0a0a0f;
  --bg-surface: #111118;
  --bg-elevated: #1a1a28;
  --bg-glass: rgba(255, 255, 255, 0.06);
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.05);

  --accent-primary: #7c6fff;
  --accent-primary-hover: #8f84ff;
  --accent-success: #00e5a0;
  --accent-danger: #ff5e5e;
  --accent-amber: #ffb347;
  --accent-info: #58a6ff;

  --text-primary: #f0eff8;
  --text-secondary: rgba(240, 239, 248, 0.60);
  --text-muted: rgba(240, 239, 248, 0.35);
  --text-inverse: #ffffff;

  --shadow-glass: 0 24px 80px rgba(0, 0, 0, 0.36);
  --shadow-glass-hover: 0 30px 96px rgba(0, 0, 0, 0.46);

  --bg-root: var(--bg-base);
  --bg-primary: var(--bg-glass);
  --bg-secondary: rgba(255, 255, 255, 0.045);
  --bg-elevated: #1a1a28;
  --surface-hover: rgba(255, 255, 255, 0.08);
  --surface-raised: rgba(255, 255, 255, 0.075);

  --tx-primary: var(--text-primary);
  --tx-secondary: var(--text-secondary);
  --tx-tertiary: var(--text-muted);
  --tx-link: var(--accent-primary);
  --tx-on-accent: var(--text-inverse);

  --bd-primary: var(--border-glass);
  --bd-secondary: var(--border-subtle);
  --bd-subtle: var(--border-subtle);

  --ac: var(--accent-primary);
  --ac-hover: var(--accent-primary-hover);
  --ac-soft: rgba(124, 111, 255, 0.16);
  --ac-rgb: 124, 111, 255;

  --green: var(--accent-success);
  --green-soft: rgba(0, 229, 160, 0.15);
  --green-rgb: 0, 229, 160;
  --red: var(--accent-danger);
  --red-soft: rgba(255, 94, 94, 0.15);
  --red-rgb: 255, 94, 94;
  --amber: var(--accent-amber);
  --amber-soft: rgba(255, 179, 71, 0.15);
  --amber-rgb: 255, 179, 71;
  --info: var(--accent-info);
  --info-soft: rgba(88, 166, 255, 0.14);
  --info-rgb: 88, 166, 255;

  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
  --sh-md: 0 10px 32px rgba(0, 0, 0, 0.30);
  --sh-lg: 0 24px 64px rgba(0, 0, 0, 0.36);
  --sh-xl: 0 34px 96px rgba(0, 0, 0, 0.48);
  --sh-card: var(--shadow-glass);
  --sh-card-hover: var(--shadow-glass-hover);

  --inp-bg: rgba(255, 255, 255, 0.04);
  --inp-bd: var(--border-glass);
  --inp-tx: var(--text-primary);
  --inp-ph: var(--text-muted);

  --nav-bg: rgba(17, 17, 24, 0.76);
  --nav-bd: var(--border-glass);
  --nav-tx: var(--text-primary);
  --nav-tx-dim: var(--text-muted);

  --chat-bg: var(--bg-base);
  --chat-surface: var(--bg-glass);
  --chat-bubble-user: rgba(124, 111, 255, 0.20);
  --chat-bubble-ai: rgba(255, 255, 255, 0.07);
  --chat-input-bg: var(--inp-bg);
  --chat-input-bd: var(--inp-bd);
  --chat-ctx-bar: rgba(255, 255, 255, 0.05);

  --insight-positive-bg: var(--green-soft);
  --insight-positive-tx: var(--green);
  --insight-positive-bd: rgba(var(--green-rgb), 0.22);
  --insight-negative-bg: var(--red-soft);
  --insight-negative-tx: var(--red);
  --insight-negative-bd: rgba(var(--red-rgb), 0.22);
  --insight-warning-bg: var(--amber-soft);
  --insight-warning-tx: var(--amber);
  --insight-warning-bd: rgba(var(--amber-rgb), 0.22);
  --insight-info-bg: var(--info-soft);
  --insight-info-tx: var(--info);
  --insight-info-bd: rgba(var(--info-rgb), 0.22);
}