/* ═══════════════════════════════════════════════════════════════════════
   MERIDIAN PRO → CLEAN SLATE v2 — V14.1.1 DESIGN TOKENS  (TradeBrahma refresh)
   Institutional trading terminal · near-black neutral foundation ·
   single restrained blue accent · unambiguous green/red trading
   semantics · hairline borders · compact data density.

   This file is the SINGLE SOURCE OF TRUTH for the visual language.
   Legacy property names (--bg, --panel, --ink, --dim, --accent, --up,
   --down …) are preserved as the compatibility contract so every
   template keeps rendering — but their VALUES are the new institutional
   palette. The mdn-* layer beneath is the V14.1 component vocabulary.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Canvas tiers — pure neutral black (no cast), no gradients ── */
  --bg:          #0A0A0A;   /* app canvas — TradeBrahma pure neutral */
  --bg-2:        #0F0F0F;   /* rail / topbar stratum */
  --panel:       #0F0F0F;   /* surface-1 — cards & panels */
  --panel-2:     #121212;   /* recessed — table alt rows, wells */
  --panel-3:     #1A1A1A;   /* surface-2 — hover, secondary buttons */
  --panel-hover: #1F1F1F;
  --line:        #262626;   /* hairline grid */
  --line-2:      #3F3F3F;   /* machined edge — active dividers */
  --overlay:     rgba(10, 10, 10, 0.88);

  /* ── Ink ── */
  --ink:         #FFFFFF;   /* primary — clean white */
  --ink-strong:  #FFFFFF;
  --ink-2:       #E5E7EB;   /* near-white body copy */
  --dim:         #9CA3AF;   /* secondary — neutral grey-400 */
  --dimmer:      #6B7280;   /* metadata, timestamps */
  --disabled:    #404040;

  /* ── Accent — TradeBrahma sky blue, gradient CTAs ── */
  --accent:      #64C8FF;   /* primary CTA / active / focus */
  --accent-2:    #3B82F6;   /* pressed */
  --accent-3:    #A5E3FF;   /* hover / links */
  --accent-soft: rgba(100, 200, 255, 0.11);
  --accent-glow: transparent;             /* glow stays retired */
  --aurora-a:    #3B82F6;                 /* legacy props remapped */
  --aurora-b:    #22D3EE;
  --aurora-c:    #64C8FF;

  /* ── Trading semantics — strong, unambiguous, WCAG-checked ── */
  --up:          #22C55E;   /* long / gains — TradeBrahma green-500 */
  --up-soft:     rgba(34, 197, 94, 0.12);
  --down:        #EF4444;   /* short / losses — red-500 */
  --down-soft:   rgba(239, 68, 68, 0.12);
  --pos-buy:     var(--up);
  --pos-sell:    var(--down);
  --pnl-positive: var(--up);
  --pnl-negative: var(--down);

  /* ── Status colours ── */
  --blue:        #60A5FA;
  --blue-soft:   rgba(96, 165, 250, 0.12);
  --cyan:        #22D3EE;
  --amber:       #F59E0B;
  --amber-soft:  rgba(245, 158, 11, 0.12);
  --red:         #EF4444;
  --red-soft:    rgba(239, 68, 68, 0.12);
  --purple:      #A78BFA;
  --gold:        #D4AF37;
  --teal:        #22D3EE;
  --teal-2:      #06B6D4;
  --teal-soft:   rgba(34, 211, 238, 0.10);

  /* Semantic aliases */
  --color-primary:      var(--accent);
  --color-primary-dark: var(--accent-2);
  --color-primary-light: var(--accent-3);
  --color-primary-soft: var(--accent-soft);
  --color-secondary:    var(--blue);
  --color-secondary-soft: var(--blue-soft);
  --color-success:      var(--up);
  --color-success-soft: var(--up-soft);
  --color-warning:      var(--amber);
  --color-warning-soft: var(--amber-soft);
  --color-danger:       var(--red);
  --color-danger-soft:  var(--red-soft);
  --color-info:         var(--blue);
  --color-info-soft:    var(--blue-soft);

  /* Brand aliases — flat fills + TradeBrahma signature gradient */
  --brand-primary:       var(--accent);
  --brand-primary-dark:  var(--accent-2);
  --brand-primary-light: var(--accent-3);
  --brand-accent:        var(--cyan);
  --brand-accent-dark:   var(--teal-2);
  --brand-secondary:     var(--blue);
  --brand-gradient:      linear-gradient(135deg, #3B82F6 0%, #64C8FF 100%);
  --brand-gradient-accent: linear-gradient(135deg, #64C8FF 0%, #A5E3FF 100%);
  --brand-glow:          transparent;
  --accent-glow-color:   transparent;

  /* ── Structure lines — flat hairlines, no gradient seams ── */
  --seam:        linear-gradient(0deg, #3F3F3F, #3F3F3F);
  --seam-wide:   linear-gradient(0deg, var(--line), var(--line));
  --aurora-ribbon: linear-gradient(0deg, #3F3F3F, #3F3F3F);
  --aurora-ribbon-wide: linear-gradient(0deg, var(--line), var(--line));

  /* ── Depth — crisp elevation, no glass blur ── */
  --glass-blur:  0px;
  --glass-bg:    #0F0F0F;
  --glass-border: #262626;
  --shadow-1:    0 1px 2px rgba(0, 0, 0, 0.50);
  --shadow-2:    0 4px 14px rgba(0, 0, 0, 0.55);
  --shadow-3:    0 12px 34px rgba(0, 0, 0, 0.62);

  /* ── Typography ── */
  --font-ui:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-display: var(--font-ui);
  --text-2xs:    10px;
  --text-xs:     11px;
  --text-sm:     12px;
  --text-md:     13px;
  --text-lg:     14px;
  --text-xl:     16px;
  --text-2xl:    18px;
  --text-3xl:    22px;
  --text-4xl:    26px;

  /* ── Spacing — 4px base grid ── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-7: 32px; --space-8: 40px; --space-9: 56px;

  /* ── Radii — restrained, terminal-grade ── */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-pill: 999px;

  /* ── Layout ── */
  --rail-w:        60px;
  --rail-w-open:   248px;
  --topbar-h:      48px;
  --content-max:   1560px;
  --sidebar-w:     var(--rail-w);        /* legacy prop → rail */
  --sidebar-w-open: var(--rail-w-open);

  /* ── Density ── */
  --row-h:         34px;   /* compact table row */
  --row-h-lg:      42px;
  --cell-pad-x:    10px;

  /* ── Motion — functional only ── */
  --ease:      cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast:  120ms;
  --dur:       180ms;
  --dur-slow:  280ms;

  /* ── Z-index ladder ── */
  --z-sticky:  100;
  --z-topbar:  200;
  --z-rail:    210;
  --z-overlay: 900;
  --z-palette: 1000;
  --z-toast:   1100;

  /* ══════════════════════════════════════════════════════════════════
     V14.1 COMPONENT VOCABULARY (mdn-*) — consumed by meridian.css
     ══════════════════════════════════════════════════════════════════ */
  --mdn-canvas:      var(--bg);
  --mdn-chrome:      var(--bg-2);
  --mdn-surface:     var(--panel);
  --mdn-surface-2:   var(--panel-3);
  --mdn-well:        var(--panel-2);
  --mdn-hairline:    var(--line);
  --mdn-hairline-2:  var(--line-2);
  --mdn-ink:         var(--ink);
  --mdn-ink-2:       var(--dim);
  --mdn-ink-3:       var(--dimmer);
  --mdn-accent:      var(--accent);
  --mdn-accent-soft: var(--accent-soft);
  --mdn-buy:         var(--up);
  --mdn-sell:        var(--down);
  --mdn-focus-ring:  0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* Light theme (Bone) — legacy theme toggle keeps working, remapped to a
   paper-terminal light scheme with the same structural rules. */
[data-theme="light"] {
  --bg:          #F9FAFB;
  --bg-2:        #FFFFFF;
  --panel:       #FFFFFF;
  --panel-2:     #F3F4F6;
  --panel-3:     #E5E7EB;
  --panel-hover: #E9EBEE;
  --line:        #E5E7EB;
  --line-2:      #D1D5DB;
  --overlay:     rgba(17, 24, 39, 0.45);
  --ink:         #111827;
  --ink-strong:  #000000;
  --ink-2:       #1F2937;
  --dim:         #6B7280;
  --dimmer:      #9CA3AF;
  --disabled:    #D1D5DB;
  --accent:      #2563EB;
  --accent-2:    #1D4ED8;
  --accent-3:    #3B82F6;
  --accent-soft: rgba(37, 99, 235, 0.10);
  --up:          #16A34A;
  --up-soft:     rgba(22, 163, 74, 0.10);
  --down:        #DC2626;
  --down-soft:   rgba(220, 38, 38, 0.10);
  --blue:        #2563EB;
  --blue-soft:   rgba(37, 99, 235, 0.10);
  --amber:       #B45309;
  --amber-soft:  rgba(180, 83, 9, 0.12);
  --red:         #DC2626;
  --red-soft:    rgba(220, 38, 38, 0.10);
  --glass-bg:    #FFFFFF;
  --glass-border: #E5E7EB;
  --shadow-1:    0 1px 2px rgba(17, 24, 39, 0.08);
  --shadow-2:    0 4px 14px rgba(17, 24, 39, 0.10);
  --shadow-3:    0 12px 34px rgba(17, 24, 39, 0.14);
  --mdn-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--accent);
}

/* Tabular numerals are the default for the whole terminal. */
html { -webkit-text-size-adjust: 100%; }
body { font-variant-numeric: tabular-nums; }
.mdn-num, .mono, table, .fx-table, .pm-table { font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════
   LEGACY PROPERTY CONTRACT (tokens.css vocabulary) — mapped onto the new
   institutional system so every legacy component renders coherently
   without carrying any "AI demo" values (glow, aurora, glass blur).
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* legacy font stacks / weights */
  --sans: var(--font-ui);
  --mono: var(--font-mono);
  --display: var(--font-ui);
  --font-normal: 400; --font-medium: 500; --font-semibold: 600;
  --font-bold: 700; --font-extrabold: 800;
  --text-base: 13px;
  --leading-tight: 1.3; --leading-normal: 1.55; --leading-relaxed: 1.7;
  --tracking-normal: 0; --tracking-tight: -0.2px; --tracking-wide: 0.4px;
  --tracking-wider: 0.7px; --tracking-widest: 1.1px;

  /* legacy radii */
  --r: var(--radius); --r-sm: var(--radius-sm); --r-md: var(--radius);
  --r-lg: var(--radius-lg); --r-xl: var(--radius-xl); --r-2xl: var(--radius-xl);
  --r-full: var(--radius-pill);
  --radius-md: var(--radius);

  /* legacy spacing scale (full) */
  --space-0: 0; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* legacy shadows — flat institutional depth */
  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-2);
  --shadow-lg: var(--shadow-3);
  --shadow-card: var(--shadow-1);
  --shadow-hover: var(--shadow-2);
  --shadow-premium: var(--shadow-2);
  --shadow-glow: none;
  --shadow-glow-card: none;
  --shadow-cta: var(--shadow-2);

  /* gradients retired → flat fills */
  --grad-1: linear-gradient(135deg, #3B82F6, #64C8FF);
  --grad-2: linear-gradient(0deg, #0F0F0F, #0F0F0F);
  --grad-3: linear-gradient(0deg, #1A1A1A, #1A1A1A);
  --grad-glow: none;
  --grad-surface: linear-gradient(0deg, #0F0F0F, #0F0F0F);

  /* glass retired → solid surfaces with hairlines */
  --glass-bg-strong: #0F0F0F;
  --glass-brd: var(--line);
  --glass-highlight: none;

  /* borders */
  --border-color: var(--line);
  --border-color-2: var(--line-2);
  --border-default: var(--line);
  --border-strong: var(--line-2);

  /* layout */
  --content-max-width: var(--content-max);
  --sidebar-width: var(--rail-w);
  --sidebar-collapsed: 60px;
  --header-height: var(--topbar-h);

  /* motion */
  --t-fast: var(--dur-fast); --t-base: var(--dur); --t-slow: var(--dur-slow);
  --ease-out: var(--ease); --ease-spring: var(--ease);

  /* z-index (legacy ladder → new ladder) */
  --z-dropdown: 300; --z-header: var(--z-topbar); --z-sidebar: var(--z-rail);
  --z-overlay: var(--z-overlay); --z-modal: 950; --z-modal-bg: 940; --z-toast: var(--z-toast);
}