/* ===== Nave Trading OS — Design System Tokens v2 — Bloomberg Terminal meets Modern Dark UI ===== */
/* Extracted from style.css — 2026-06-19 */

/* ===== Nave Trading OS — Design Tokens v2 ===== */
/* Bloomberg Terminal meets Modern Dark UI */

:root {
    /* ── Neutral Gray Scale (backgrounds, surfaces, borders) ── */
    --gray-0:    #080a0f;   /* Deepest background (body) */
    --gray-50:   #0c0f17;   /* Slightly elevated surface */
    --gray-100:  #11151e;   /* Card background */
    --gray-150:  #161b26;   /* Hovered card, active tab */
    --gray-200:  #1c2230;   /* Input background, table row */
    --gray-300:  #252b3a;   /* Border default */
    --gray-400:  #384152;   /* Border emphasis */
    --gray-500:  #4e586d;   /* Muted text / inactive */
    --gray-600:  #6b7284;   /* Secondary text */
    --gray-700:  #8c93a5;   /* Tertiary text */
    --gray-800:  #b8becb;   /* Primary text on dark */
    --gray-900:  #e2e6ef;   /* High-emphasis text */
    --gray-950:  #f0f2f7;   /* Maximum contrast text */

    /* ── Brand / Accent ── */
    --brand-400:  #2563eb;   /* Primary accent — deep corporate blue */
    --brand-500:  #3b82f6;   /* Hover state */
    --brand-600:  #60a5fa;   /* Active/selected */
    --brand-400-bg: rgba(37, 99, 235, 0.10);

    /* ── Semantic (data classification) ── */
    --green-400:    #15803d;   /* Positive values */
    --green-500:    #22c55e;   /* Win badges, buy */
    --green-400-bg: rgba(21, 128, 61, 0.12);
    --red-400:      #b91c1c;   /* Negative values */
    --red-500:      #ef4444;   /* Loss badges, sell */
    --red-400-bg:   rgba(185, 28, 28, 0.12);
    --amber-400:    #d97706;   /* Warning / neutral-outcome */
    --amber-500:    #f59e0b;   /* Warning emphasis */
    --amber-400-bg: rgba(217, 119, 6, 0.12);

    /* ── Chart accent (distinct from brand for visibility) ── */
    --chart-blue:   #38bdf8;   /* Equity line, chart controls */
    --chart-indigo: #818cf8;   /* Chart gradients, secondary lines */
    --chart-purple: #a855f7;   /* Monte Carlo / complementary */

    /* ── Shorthand aliases for backward compatibility ── */
    --bg-primary:    var(--gray-0);
    --bg-secondary:  var(--gray-50);
    --bg-card:       var(--gray-100);
    --bg-tertiary:   var(--gray-150);
    --card-bg:       var(--gray-100);
    --text-primary:  var(--gray-800);
    --text-secondary: var(--gray-600);
    --text-tertiary: var(--gray-500);
    --text:          var(--gray-800);
    --text-muted:    var(--gray-600);
    --accent:        var(--brand-400);
    --accent-hover:  var(--brand-500);
    --accent-gradient: linear-gradient(135deg, var(--brand-400), #6366f1);
    --accent-glow:   rgba(37, 99, 235, 0.15);
    --win:           var(--brand-400);
    --win-bg:        rgba(37, 99, 235, 0.10);
    --loss:          var(--gray-950);
    --loss-bg:       rgba(226, 232, 239, 0.06);
    --warning:       var(--amber-500);
    --border:        var(--gray-300);
    --border-card:       rgba(37, 99, 235, 0.10);
    --border-card-hover: rgba(37, 99, 235, 0.25);
    --glass-bg:      rgba(12, 15, 23, 0.65);
    --glass-bg-hover: rgba(12, 15, 23, 0.85);
    --glow-blue:     rgba(37, 99, 235, 0.4);
    --glow-white:    rgba(226, 232, 240, 0.3);
    --surface0:      var(--gray-0);
    --surface2:      var(--gray-50);
    --surface:       var(--gray-100);
    --border-subtle: var(--gray-300);
    --bg:            var(--gray-0);

    /* ── Typography ── */
    --font-sans: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    /* Type scale (major third, base 16px) */
    --text-xs:    0.6875rem;   /* 11px — labels, captions, axis ticks */
    --text-sm:    0.8125rem;   /* 13px — secondary body, table cells */
    --text-base:  1rem;        /* 16px — body, inputs */
    --text-lg:    1.25rem;     /* 20px — section headers */
    --text-xl:    1.5rem;      /* 24px — page titles */
    --text-2xl:   1.875rem;    /* 30px — hero / login title */
    --text-3xl:   2.25rem;     /* 36px — rarely, large displays */

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

    /* Line heights */
    --leading-tight:   1.15;   /* Headings, large numbers */
    --leading-normal:  1.4;    /* Body */
    --leading-relaxed: 1.6;    /* Long-form */

    /* Letter spacing */
    --tracking-tight:  -0.02em;  /* Headings */
    --tracking-normal:  0;
    --tracking-wide:    0.03em;  /* Labels, uppercase */
    --tracking-wider:   0.08em;  /* Tiny all-caps labels */

    /* ── Spacing (4px grid) ── */
    --space-0:  0;
    --space-1:  0.25rem;   /* 4px */
    --space-2:  0.5rem;    /* 8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */

    /* Backward compat spacing */
    --gap-xs: 0.35rem;
    --gap-sm: 0.5rem;
    --gap-md: 1rem;
    --gap-lg: 1.5rem;
    --gap-xl: 2rem;

    /* ── Border Radius ── */
    --radius-none: 0;
    --radius-xs:   2px;    /* Table cells, inline badges */
    --radius-sm:   4px;    /* Inputs, small cards */
    --radius-md:   6px;    /* Cards, modals */
    --radius-lg:   8px;    /* Large panels */
    --radius-xl:   12px;   /* Extra large */
    --radius-2xl:  16px;   /* Cards, modals */
    --radius-full: 9999px; /* Pills, badges, avatars */

    /* Cleopatra spacing aliases */
    --spacing-1: var(--space-1);
    --spacing-2: var(--space-2);
    --spacing-3: var(--space-3);
    --spacing-4: var(--space-4);
    --spacing-5: var(--space-5);
    --spacing-6: var(--space-6);
    --spacing-8: var(--space-8);
    --duration-150: var(--duration-fast);
    --duration-200: var(--duration-normal);

    /* ── Shadow / Elevation ── */
    --shadow-none: none;
    --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-xl:   0 12px 40px rgba(0, 0, 0, 0.7);

    /* ── Animation Tokens ── */
    --duration-instant: 100ms;
    --duration-fast:    150ms;
    --duration-normal:  250ms;
    --duration-slow:    400ms;
    --duration-glacial: 800ms;

    --ease-standard:   cubic-bezier(0.2, 0.0, 0, 1.0);
    --ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1.0);
    --ease-accelerate: cubic-bezier(0.3, 0.0, 1.0, 1.0);
    --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1.0);
}