/**
 * CSS Custom Properties - Design Tokens
 * "Bloomberg with a UX team" - dark terminal theme, fluid scaling
 */

html {
  font-size: clamp(14px, 0.5vw + 13px, 16px);
}

:root {
  /* ========================================================================
     Color System - Dark terminal aesthetic
     ======================================================================== */

  /* Backgrounds - layered depth */
  --bg-0: hsl(218, 24%, 7%);        /* #0e1116 - Darkest (body) */
  --bg-1: hsl(218, 20%, 10%);       /* #141922 - Dark (panels) */
  --bg-2: hsl(222, 24%, 10%);       /* #101624 - Medium (inputs) */
  --bg-3: hsl(220, 30%, 8%);        /* #0a0f18 - Elevated (hover) */

  /* Text colors - hierarchy */
  --ink-1: hsl(216, 33%, 92%);      /* #e6edf6 - Primary text */
  --ink-2: hsl(217, 20%, 71%);      /* #a5b3c9 - Secondary text */
  --ink-3: hsl(217, 14%, 57%);      /* #7f8aa1 - Tertiary/muted */

  /* Borders - subtle definition */
  --line: hsl(218, 20%, 18%);       /* #1f2734 - Default border */
  --line-hover: hsl(218, 20%, 25%); /* Hover state border */

  /* Theme colors (backwards compat) */
  --theme-background: var(--bg-0);
  --theme-surface: var(--bg-1);
  --theme-surface-elevated: var(--bg-3);
  --theme-text: var(--ink-1);
  --theme-text-muted: var(--ink-3);
  --theme-border: var(--line);
  --theme-border-strong: var(--line-hover);

  /* Accent colors */
  --accent: hsl(206, 100%, 70%);         /* #66b7ff - Primary accent */
  --accent-hover: hsl(206, 100%, 65%);   /* Hover state */
  --ok: hsl(153, 80%, 62%);              /* #5ee6a8 - Success/bull */
  --bad: hsl(355, 100%, 76%);            /* #ff7f8c - Error/bear */
  --warn: hsl(38, 100%, 70%);            /* #ffc868 - Warning */

  /* Market colors (backwards compat) */
  --color-bull: var(--ok);
  --color-bear: var(--bad);
  --color-neutral: var(--ink-2);
  --color-warning: var(--warn);
  --color-accent: var(--accent);

  /* Chart colors - vibrant against dark */
  --chart-line-1: hsl(210, 100%, 65%);  /* Blue - S&P 500 */
  --chart-line-2: hsl(285, 70%, 65%);   /* Purple - VIX */
  --chart-line-3: hsl(45, 100%, 60%);   /* Yellow - Oil */
  --chart-line-4: hsl(330, 90%, 68%);   /* Bright magenta - AAPL */
  --chart-line-5: hsl(15, 100%, 65%);   /* Bright coral - JPM */
  --chart-line-6: hsl(195, 100%, 65%);  /* Bright sky blue - NVDA */
  --chart-grid: hsl(220, 13%, 25%);

  /* Market-specific colors - single source of truth */
  --market-sp500: #5dadec;
  --market-shanghai: #b87fec;
  --market-usd-cny: #45b7aa;
  --market-vix: #ffc107;
  --market-oil: #52b788;

  /* Typography - scales with base font size */
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 'Consolas', monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 0.9375rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;

  /* Spacing - scales with base font size */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Layout */
  --container-max-width: 1600px;
  --header-height: 4rem;
  --gap-cards: var(--space-lg);

  /* Visual effects */
  --border-radius-sm: 0.25rem;
  --border-radius: 0.5rem;
  --border-radius-lg: 0.75rem;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.6);

  --transition-fast: 100ms ease;
  --transition-base: 150ms ease;
  --transition-slow: 300ms ease;

  /* ========================================================================
     Chat Interface Tokens
     ======================================================================== */

  /* Bubbles */
  --bubble-assistant: hsl(220, 30%, 12%);  /* #10182b */
  --bubble-user: hsl(220, 30%, 14%);       /* #121c32 */

  /* Component sizing */
  --avatar-size: 28px;
  --composer-height: 72px;  /* Approximate */
  --chat-max-width: 1200px;

  /* ========================================================================
     Drawer / Sheet Tokens
     ======================================================================== */

  /* Sizing */
  --drawer-width: min(560px, 92vw);
  --handle-bar-width: 48px;
  --handle-bar-height: 5px;

  /* ========================================================================
     Animation System
     ======================================================================== */

  /* Durations */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* Easing functions - feel natural */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ========================================================================
     Effects
     ======================================================================== */

  /* Blur (glassmorphism) */
  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 12px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* Shadows - layered depth */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.45);
  --shadow-drawer: -24px 0 48px rgba(0, 0, 0, 0.38);

  /* ========================================================================
     Z-Index Scale - Layering system
     ======================================================================== */

  --z-base: 1;
  --z-ticker: 10;
  --z-composer: 30;
  --z-header: 100;
  --z-overlay: 200;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ========================================================================
     Typography - Line heights
     ======================================================================== */

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ========================================================================
     Breakpoints - Mobile-first
     ======================================================================== */

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* Light theme override */
[data-theme="light"] {
  --theme-background: hsl(0, 0%, 98%);
  --theme-surface: hsl(0, 0%, 100%);
  --theme-surface-elevated: hsl(0, 0%, 97%);
  --theme-text: hsl(0, 0%, 10%);
  --theme-text-muted: hsl(0, 0%, 50%);
  --theme-border: hsl(0, 0%, 88%);
  --theme-border-strong: hsl(0, 0%, 75%);

  --chart-grid: hsl(0, 0%, 90%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
}