/* ═══════════════════════════════════════════════════════════════════════
   KINETIC CARBON — DESIGN TOKENS
   Graphite canvas · Signal-lime accent · Machined alloy surfaces
   One signature motion: the signal-pulse line on active nav + live cards.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Canvas tiers — warm graphite carbon, machined alloy depth ── */
  --bg:          #121316;   /* app canvas — graphite carbon, warm not blue */
  --bg-2:        #17181C;   /* sidebar / topbar — slightly raised */
  --panel:       #1A1C20;   /* surface-1 — brushed alloy card base */
  --panel-2:     #15171A;   /* alt row — recessed */
  --panel-3:     #22252B;   /* surface-2 — hover / secondary btn */
  --panel-hover: #22252B;
  --line:        #2D3036;   /* hairline — graph-paper grid */
  --line-2:      #3A3E46;   /* active divider — machined edge */
  --overlay:     rgba(18, 19, 22, 0.88);

  /* ── Ink — high legibility on carbon ── */
  --ink:         #EDEFF2;   /* primary text — cool white, not pure */
  --ink-strong:  #FFFFFF;
  --ink-2:       #EDEFF2;
  --dim:         #9CA1AC;   /* secondary — neutral grey */
  --dimmer:      #6B7178;   /* muted — metadata, timestamps */
  --disabled:    #44474E;

  /* ── Signature accent — SIGNAL LIME (the "live data" color) ── */
  --accent:      #C6F24E;   /* signal lime — primary CTA / brand / live */
  --accent-2:    #A8D43E;   /* pressed — darker lime */
  --accent-3:    #DBFF7A;   /* hover/light — focus ring */
  --accent-soft: rgba(198, 242, 78, 0.12);
  --accent-glow: #C6F24E;   /* glow — same lime */
  --aurora-a:    #C6F24E;   /* lime (replaces violet) */
  --aurora-b:    #34D399;   /* emerald (replaces cyan) — gradient pair */
  --aurora-c:    #C6F24E;   /* lime (used sparingly) */

  /* ── Directional — gains emerald, losses warm coral ── */
  --up:          #34D399;   /* gains — crisp emerald */
  --up-soft:     rgba(52, 211, 153, 0.14);
  --down:        #F87171;   /* losses — warm coral */
  --down-soft:   rgba(248, 113, 113, 0.14);
  --pos-buy:     var(--up);
  --pos-sell:    var(--down);
  --pnl-positive: var(--up);
  --pnl-negative: var(--down);

  /* ── Status colours — distinct, colorblind-safe ── */
  --blue:        #60A5FA;   /* info — soft blue */
  --blue-soft:   rgba(96, 165, 250, 0.14);
  --cyan:        #22D3EE;   /* kept for legacy refs */
  --amber:       #FBBF24;   /* warning — warm amber */
  --amber-soft:  rgba(251, 191, 36, 0.14);
  --red:         #F87171;   /* danger — same as losses */
  --red-soft:    rgba(248, 113, 113, 0.14);
  --purple:      #A78BFA;   /* kept for legacy refs */
  --gold:        #D4AF37;
  --teal:        #34D399;   /* alias for --up */
  --teal-2:      #10B981;
  --teal-soft:   var(--up-soft);

  /* 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 */
  --brand-primary:      var(--accent);
  --brand-primary-dark: var(--accent-2);
  --brand-primary-light: var(--accent-3);
  --brand-accent:       var(--up);
  --brand-accent-dark:  var(--teal-2);
  --brand-secondary:    var(--blue);
  --brand-gradient:     linear-gradient(135deg, var(--accent) 0%, var(--up) 100%);
  --brand-gradient-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);
  --brand-glow:         rgba(198, 242, 78, 0.4);
  --accent-glow-color:  rgba(198, 242, 78, 0.3);

  /* ── Signal seam — lime→emerald, the signature pulse line ── */
  --seam:        linear-gradient(90deg, var(--accent) 0%, var(--up) 100%);
  --seam-wide:   linear-gradient(90deg, transparent 0%, var(--accent) 15%, var(--up) 85%, transparent 100%);
  --aurora-ribbon: linear-gradient(90deg, var(--accent) 0%, var(--up) 50%, var(--accent) 100%);
  --aurora-ribbon-wide: linear-gradient(90deg, transparent 0%, var(--accent) 20%, var(--up) 50%, var(--accent) 80%, transparent 100%);

  /* ── Glass + depth — machined alloy, not frosted violet ── */
  --glass-blur:  16px;
  --glass-bg:    rgba(26, 28, 32, 0.65);
  --glass-bg-strong: rgba(26, 28, 32, 0.82);
  --glass-brd:   rgba(255, 255, 255, 0.05);
  --glass-highlight: rgba(255, 255, 255, 0.03);

  /* ── Shadows — machined depth, tighter ── */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:   0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-1:    0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-2:    0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 40px rgba(0, 0, 0, 0.6);
  --shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 0 1px var(--accent-soft), 0 4px 24px rgba(198, 242, 78, 0.2);
  --shadow-card: var(--shadow-1);
  --shadow-hover: var(--shadow-2);
  --shadow-cta:  0 4px 14px rgba(198, 242, 78, 0.25);
  --shadow-premium: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 28px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-glow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 32px rgba(198, 242, 78, 0.06), 0 2px 6px rgba(0, 0, 0, 0.3);

  /* ── Gradients ── */
  --grad-1:      linear-gradient(135deg, var(--accent) 0%, var(--up) 100%);
  --grad-2:      linear-gradient(135deg, var(--blue) 0%, var(--up) 100%);
  --grad-3:      linear-gradient(135deg, var(--amber) 0%, var(--red) 100%);
  --grad-glow:   radial-gradient(circle at 50% 0%, rgba(198, 242, 78, 0.15), transparent 60%);
  --grad-surface: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);

  /* ── Typography — tabular numbers non-negotiable ── */
  --mono:        "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display:     "Space Grotesk", "Inter", sans-serif;

  --text-2xs:    11px;
  --text-xs:     12px;
  --text-sm:     13px;
  --text-base:   15px;      /* body text */
  --text-md:     17px;
  --text-lg:     20px;
  --text-xl:     26px;
  --text-2xl:    34px;
  --text-3xl:    44px;
  --text-4xl:    60px;

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

  --leading-tight:   1.15;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* ── Spacing (4px base) ── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Radius — slightly tighter for machined feel ── */
  --r-sm:   6px;
  --r:      8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-2xl:  28px;
  --r-full: 9999px;
  --radius-sm: var(--r-sm);
  --radius:    var(--r);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);

  /* ── Motion — calm, one signature pulse ── */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:  0.12s var(--ease);
  --t-base:  0.2s var(--ease-out);
  --t-slow:  0.35s var(--ease-out);

  /* ── Z-Index ── */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-header:    300;
  --z-sidebar:   400;
  --z-overlay:   500;
  --z-modal-bg:  1000;
  --z-modal:     1100;
  --z-toast:     1200;

  /* ── Layout ── */
  --header-height:   56px;
  --sidebar-width:   248px;
  --sidebar-collapsed: 56px;
  --content-max:     1680px;
  --content-max-width: var(--content-max);

  /* Legacy aliases */
  --border-color:   var(--line);
  --border-color-2: var(--line-2);
  --border-default: 1px solid var(--line);
  --border-strong:  1px solid var(--line-2);
}

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT THEME — "Warm Paper"
   Warm off-white canvas, same signal-lime accent (darker for AA contrast)
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:          #F5F4F1;   /* warm paper — not cold white */
  --bg-2:        #FFFFFF;
  --panel:       #FFFFFF;
  --panel-2:     #ECEAE5;
  --panel-3:     #E0DDD7;
  --panel-hover: #E0DDD7;
  --line:        #D8D5CE;
  --line-2:      #C4C0B6;
  --overlay:     rgba(245, 244, 241, 0.90);

  --ink:         #1A1C20;   /* same graphite ink */
  --ink-strong:  #000000;
  --ink-2:       #1A1C20;
  --dim:         #5A5F6B;
  --dimmer:      #7A7F8B;
  --disabled:    #B0B4BC;

  /* Accent — darker lime for AA contrast on white */
  --accent:      #7BB52E;
  --accent-2:    #6BA325;
  --accent-3:    #9BC934;
  --accent-soft: rgba(123, 181, 46, 0.12);

  /* Directional — slightly darker for white bg */
  --up:          #10B981;
  --up-soft:     rgba(16, 185, 129, 0.12);
  --down:        #DC2626;
  --down-soft:   rgba(220, 38, 38, 0.10);

  --glass-bg:    rgba(255, 255, 255, 0.75);
  --glass-bg-strong: rgba(255, 255, 255, 0.88);
  --glass-brd:   rgba(0, 0, 0, 0.06);

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-1:    0 1px 0 rgba(0, 0, 0, 0.02) inset, 0 2px 10px rgba(0, 0, 0, 0.06);
  --shadow-2:    0 1px 0 rgba(0, 0, 0, 0.02) inset, 0 8px 28px rgba(0, 0, 0, 0.10);
  --shadow-glow: 0 0 0 1px rgba(123, 181, 46, 0.25), 0 4px 20px rgba(123, 181, 46, 0.12);
  --shadow-cta:  0 4px 14px rgba(123, 181, 46, 0.2);

  /* Gradients adjust to darker accent */
  --grad-1:      linear-gradient(135deg, var(--accent) 0%, var(--up) 100%);
  --brand-gradient: linear-gradient(135deg, var(--accent) 0%, var(--up) 100%);
}

/* Legacy theme aliases — all map to the default Kinetic Carbon dark */
[data-theme="dark"]     { /* same as default kinetic carbon */ }
[data-theme="binance"]  { /* alias dark */ }
[data-theme="ocean"]    { /* alias dark */ }
[data-theme="midnight"] { /* alias dark */ }
[data-theme="rose"]     { /* alias dark */ }