/* ═══════════════════════════════════════════════════════════════════════
   ASP TERMINAL — V15.0.0 DESIGN TOKENS  (Complete Website Recreation)
   NEW VISUAL IDENTITY: light institutional canvas + deep-navy command
   chrome + electric-blue accent + unambiguous trading semantics.
   Typography: IBM Plex Sans (UI) / IBM Plex Mono (data, prices, IDs).

   This file REDEFINES every legacy token name (--bg, --panel, --ink,
   --dim, --accent, --up, --down …) so all existing templates adopt the
   new identity without markup changes. tokens-v15.css loads AFTER
   tokens.css + tokens-v14.css and is the V15 single source of truth.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Canvas tiers — cool paper, flat, zero gradients ── */
  --bg:          #F3F5F9;   /* app canvas */
  --bg-2:        #ECF0F6;   /* recessed strata */
  --panel:       #FFFFFF;   /* surface-1 — cards & panels */
  --panel-2:     #F7F9FC;   /* wells, table alt rows */
  --panel-3:     #EDF1F7;   /* hover, secondary buttons */
  --panel-hover: #EDF1F7;
  --line:        #E2E7EF;   /* hairline grid */
  --line-2:      #C9D2E0;   /* machined edge — active dividers */
  --overlay:     rgba(12, 25, 48, 0.55);

  /* ── Ink ── */
  --ink:         #0C1930;   /* primary — deep navy ink */
  --ink-strong:  #060F22;
  --ink-2:       #33415C;   /* body copy */
  --dim:         #5D6B85;   /* secondary */
  --dimmer:      #8C97AC;   /* metadata, timestamps */
  --disabled:    #B6BECB;

  /* ── Accent — institutional electric blue ── */
  --accent:      #1F5EFF;
  --accent-2:    #1646C8;   /* pressed */
  --accent-3:    #4D7DFF;   /* hover / links */
  --accent-soft: rgba(31, 94, 255, 0.09);
  --accent-glow: transparent;
  --aurora-a:    #1F5EFF;
  --aurora-b:    #0EA5A5;
  --aurora-c:    #4D7DFF;

  /* ── Command chrome — the navy rail/topbar identity ── */
  --mdn-chrome:        #0C1B33;
  --mdn-chrome-2:      #122544;
  --mdn-chrome-line:   #22355A;
  --mdn-chrome-ink:    #E8EEF9;
  --mdn-chrome-dim:    #93A3C2;
  --mdn-chrome-active: rgba(77, 125, 255, 0.16);

  /* ── Trading semantics — strong, unambiguous, AA-checked ── */
  --up:          #067A47;   /* long / gains */
  --up-soft:     rgba(6, 122, 71, 0.10);
  --down:        #CF2A3E;   /* short / losses */
  --down-soft:   rgba(207, 42, 62, 0.09);
  --pos-buy:     var(--up);
  --pos-sell:    var(--down);
  --pnl-positive: var(--up);
  --pnl-negative: var(--down);

  /* ── Status colours ── */
  --blue:        #1F5EFF;
  --blue-soft:   rgba(31, 94, 255, 0.09);
  --cyan:        #0E8E8E;
  --amber:       #9A6B0B;
  --amber-soft:  rgba(154, 107, 11, 0.10);
  --red:         #CF2A3E;
  --red-soft:    rgba(207, 42, 62, 0.09);
  --purple:      #6D4AE0;
  --gold:        #9A7B1E;
  --teal:        #0E8E8E;
  --teal-2:      #0B7A7A;
  --teal-soft:   rgba(14, 142, 142, 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 ramp (legacy compat) ── */
  --brand-primary:      #0C1B33;
  --brand-primary-dark: #060F22;
  --brand-primary-light: #1F5EFF;
  --brand-accent:       #1F5EFF;
  --brand-accent-dark:  #1646C8;
  --brand-secondary:    #0E8E8E;
  --brand-gradient:     linear-gradient(135deg, #0C1B33 0%, #16386E 100%);
  --brand-gradient-accent: linear-gradient(135deg, #1F5EFF 0%, #1646C8 100%);
  --brand-glow:         none;

  /* ── Meridian token bridge (mdn-* layer reads these) ── */
  --mdn-canvas:    #F3F5F9;
  --mdn-surface:   #FFFFFF;
  --mdn-surface-2: #F7F9FC;
  --mdn-well:      #F1F4F9;
  --mdn-ink:       #0C1930;
  --mdn-ink-2:     #5D6B85;
  --mdn-ink-3:     #8C97AC;
  --mdn-hairline:  #E2E7EF;
  --mdn-hairline-2: #C9D2E0;
  --mdn-accent:    #1F5EFF;
  --mdn-accent-soft: rgba(31, 94, 255, 0.09);
  --mdn-buy:       #067A47;
  --mdn-sell:      #CF2A3E;
  --mdn-focus-ring: 0 0 0 3px rgba(31, 94, 255, 0.22);

  /* ── Glass retired — maps to flat surfaces ── */
  --glass-bg:        rgba(255, 255, 255, 0.96);
  --glass-bg-strong: #FFFFFF;
  --glass-blur:      0px;
  --glass-border:    var(--line);
  --glass-brd:       var(--line);
  --glass-highlight: transparent;

  /* ── Typography — NEW identity: IBM Plex ── */
  --sans: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --font-ui: var(--sans);
  --font-display: var(--sans);
  --font-mono: var(--mono);
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 700;

  --text-2xs: 10px;
  --text-xs: 11.5px;
  --text-sm: 12.5px;
  --text-base: 13.5px;
  --text-md: 14.5px;
  --text-lg: 16px;
  --text-xl: 19px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --display: 46px;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.03em;
  --tracking-wider: 0.06em;
  --tracking-widest: 0.1em;

  --leading-tight: 1.25;
  --leading-normal: 1.45;
  --leading-relaxed: 1.65;

  /* ── Geometry ── */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-pill: 999px;
  --r-xs: 3px; --r-sm: 4px; --r: 6px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px; --r-2xl: 12px; --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(12, 25, 48, 0.05);
  --shadow-sm: 0 1px 2px rgba(12, 25, 48, 0.06);
  --shadow-2: 0 2px 6px rgba(12, 25, 48, 0.07);
  --shadow-card: 0 1px 2px rgba(12, 25, 48, 0.06), 0 0 0 1px var(--line);
  --shadow-hover: 0 4px 14px rgba(12, 25, 48, 0.10);
  --shadow-md: 0 4px 14px rgba(12, 25, 48, 0.10);
  --shadow-3: 0 10px 30px rgba(12, 25, 48, 0.14);
  --shadow-lg: 0 10px 30px rgba(12, 25, 48, 0.14);
  --shadow-glow: none;
  --shadow-glow-card: none;
  --shadow-cta: 0 2px 8px rgba(31, 94, 255, 0.28);
  --shadow-premium: 0 10px 30px rgba(12, 25, 48, 0.14);
  --grad-glow: none;
  --grad-surface: none;
  --grad-1: linear-gradient(135deg, #0C1B33, #16386E);
  --grad-2: linear-gradient(135deg, #1F5EFF, #1646C8);
  --grad-3: linear-gradient(135deg, #0E8E8E, #0B7A7A);

  /* ── Layout metrics ── */
  --topbar-h: 52px;
  --rail-w: 252px;
  --rail-w-open: 252px;
  --sidebar-w: 252px;
  --sidebar-w-open: 252px;
  --sidebar-width: 252px;
  --sidebar-collapsed: 64px;
  --content-max: 1440px;
  --content-max-width: 1440px;
  --row-h: 40px;
  --row-h-lg: 48px;
  --cell-pad-x: 12px;

  /* ── Motion ── */
  --dur-fast: 120ms;
  --t-fast: 120ms;
  --dur: 180ms;
  --t-base: 180ms;
  --dur-slow: 280ms;
  --t-slow: 280ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ── Z stack ── */
  --z-sticky: 100;
  --z-header: 200;
  --z-topbar: 300;
  --z-sidebar: 400;
  --z-rail: 400;
  --z-dropdown: 500;
  --z-overlay: 600;
  --z-modal-bg: 700;
  --z-modal: 800;
  --z-palette: 900;
  --z-toast: 1000;
  --z-bottomnav: 450;

  /* ── Spacing (unchanged scale) ── */
  --space-0: 0;  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px;
  --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px;
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK VARIANT of the NEW identity (theme toggle → "Terminal Night").
   Same ASP TERMINAL language, inverted: navy-black canvas, navy chrome.
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:          #0B1220;
  --bg-2:        #0E1728;
  --panel:       #101B2E;
  --panel-2:     #0D1626;
  --panel-3:     #16233A;
  --panel-hover: #16233A;
  --line:        #1D2C46;
  --line-2:      #2B3D5C;
  --overlay:     rgba(4, 9, 18, 0.72);

  --ink:         #EDF2FA;
  --ink-strong:  #FFFFFF;
  --ink-2:       #C4CEE0;
  --dim:         #8A99B5;
  --dimmer:      #64748E;
  --disabled:    #3A4A66;

  --accent:      #5B8CFF;
  --accent-2:    #3E6FE8;
  --accent-3:    #8CACFF;
  --accent-soft: rgba(91, 140, 255, 0.13);

  --mdn-chrome:      #081226;
  --mdn-chrome-2:    #0C1B33;
  --mdn-chrome-line: #1D2C46;
  --mdn-chrome-ink:  #E8EEF9;
  --mdn-chrome-dim:  #8A99B5;

  --up:        #2ABE6D;
  --up-soft:   rgba(42, 190, 109, 0.12);
  --down:      #F0516A;
  --down-soft: rgba(240, 81, 106, 0.12);
  --amber:     #E3A21A;
  --amber-soft: rgba(227, 162, 26, 0.12);
  --red:       #F0516A;
  --red-soft:  rgba(240, 81, 106, 0.12);

  --mdn-canvas:    #0B1220;
  --mdn-surface:   #101B2E;
  --mdn-surface-2: #0D1626;
  --mdn-well:      #0E1728;
  --mdn-ink:       #EDF2FA;
  --mdn-ink-2:     #8A99B5;
  --mdn-ink-3:     #64748E;
  --mdn-hairline:  #1D2C46;
  --mdn-hairline-2: #2B3D5C;
  --mdn-accent:    #5B8CFF;
  --mdn-accent-soft: rgba(91, 140, 255, 0.13);
  --mdn-buy:       #2ABE6D;
  --mdn-sell:      #F0516A;

  --glass-bg: rgba(16, 27, 46, 0.96);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--line);
  --shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-premium: 0 10px 30px rgba(0, 0, 0, 0.5);
}