/* ═══════════════════════════════════════════════════════════════════════════
   QUANTUM TRADER — Design Tokens
   All CSS custom properties derived from DSS-001 specification.
   Every value below is consumed by the component/utility layers.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Primary Brand (Teal) ─────────────────────────────────────────── */
  --color-primary-50:  #e0faf4;
  --color-primary-100: #b3f2e3;
  --color-primary-200: #80ebd1;
  --color-primary-300: #4de3bf;
  --color-primary-400: #26ddb1;
  --color-primary-500: #00d4aa;
  --color-primary-600: #00bf9c;
  --color-primary-700: #00a68a;
  --color-primary-800: #008d78;
  --color-primary-900: #006554;

  /* ─── Secondary Brand (Blue) ───────────────────────────────────────── */
  --color-secondary-50:  #e6f0f9;
  --color-secondary-100: #c2d8f0;
  --color-secondary-200: #9abfe5;
  --color-secondary-300: #70a5da;
  --color-secondary-400: #5291d2;
  --color-secondary-500: #347cc9;
  --color-secondary-600: #2e6eb5;
  --color-secondary-700: #265d9c;
  --color-secondary-800: #1f4d84;
  --color-secondary-900: #163462;

  /* ─── Neutral / Gray ───────────────────────────────────────────────── */
  --color-neutral-50:  #f6f7f8;
  --color-neutral-100: #ecedef;
  --color-neutral-200: #d2d4d8;
  --color-neutral-300: #b0b3b9;
  --color-neutral-400: #878b93;
  --color-neutral-500: #60646c;
  --color-neutral-600: #4b4f56;
  --color-neutral-700: #393c42;
  --color-neutral-800: #282b30;
  --color-neutral-900: #16181c;

  /* ─── Semantic Colors ──────────────────────────────────────────────── */
  --color-success: #12b76a;
  --color-warning: #f5a623;
  --color-error:   #ff3b30;

  /* ─── Background & Surface ─────────────────────────────────────────── */
  --color-background:     #0a0b0e;
  --color-surface:        #16181c;
  --color-surface-hover:  #1f2126;

  /* ─── Text ─────────────────────────────────────────────────────────── */
  --color-text-primary:   #e8eaed;
  --color-text-secondary: #b0b3b9;

  /* ─── Borders & Chart ──────────────────────────────────────────────── */
  --color-border:      #2c2e34;
  --color-chart-grid:  #2c2e34;
  --color-chart-line:  #00d4aa;

  /* ─── Typography ─────────────────────────────────────────────────────── */
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono:   'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line heights */
  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ─── Spacing Scale ─────────────────────────────────────────────────── */
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* ─── Border Radius ─────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   0.125rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.75rem;
  --radius-full: 9999px;

  /* ─── Shadows ────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.7);

  /* ─── Animation ──────────────────────────────────────────────────────── */
  --duration-instant: 0ms;
  --duration-fast:    100ms;
  --duration-normal:  200ms;
  --duration-slow:    400ms;
  --easing-linear:    linear;
  --easing-in:        cubic-bezier(0.4, 0, 1, 1);
  --easing-out:       cubic-bezier(0, 0, 0.2, 1);
  --easing-in-out:    cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Breakpoints (for reference; used in responsive system) ───────── */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* ─── Light Theme Overrides (set by theme-provider.js) ──────────────── */
  --theme-bg:            var(--color-background);
  --theme-surface:       var(--color-surface);
  --theme-surface-hover: var(--color-surface-hover);
  --theme-text:          var(--color-text-primary);
  --theme-text-secondary: var(--color-text-secondary);
  --theme-border:        var(--color-border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Light Theme — activated via [data-theme="light"] on <html>
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --theme-bg:            #f6f7f8;
  --theme-surface:       #ffffff;
  --theme-surface-hover: #ecedef;
  --theme-text:          #16181c;
  --theme-text-secondary: #60646c;
  --theme-border:        #d2d4d8;

  /* Shadows are lighter in light mode */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.12);
}

/* Dark Theme (default) — already set in :root above */
[data-theme="dark"] {
  --theme-bg:            #0a0b0e;
  --theme-surface:       #16181c;
  --theme-surface-hover: #1f2126;
  --theme-text:          #e8eaed;
  --theme-text-secondary: #b0b3b9;
  --theme-border:        #2c2e34;
}