/* Leverage — shared design tokens (popup, options, setups, multitf).
   Import this file in every extension UI surface. Page-specific layout
   stays in each HTML file; colors, type, and geometry live here. */

:root {
  color-scheme: dark;

  /* —— surfaces —— */
  --bg:        #0a0c10;
  --surface:   #11151c;
  --surface-2: #181d26;
  --surface-3: #20262f;

  /* —— borders —— */
  --line:        #1f242e;
  --line-strong: #2c3340;

  /* —— ink —— */
  --ink:   #f5f6f8;
  --ink-2: #a7afba;
  --ink-3: #6a7280;
  --ink-4: #464c57;

  /* —— brand accent —— */
  --accent:      #7c83ff;
  --accent-2:    #9da3ff;
  --accent-soft: rgba(124, 131, 255, 0.10);
  --accent-mid:  rgba(124, 131, 255, 0.40);
  --accent-ink:  #0b0d2a;

  /* —— semantic state (trading) —— */
  --take:      #4dd29a;
  --take-soft: rgba(77, 210, 154, 0.11);
  --take-mid:  rgba(77, 210, 154, 0.40);
  --wait:      #d3ad67;
  --wait-soft: rgba(211, 173, 103, 0.10);
  --wait-mid:  rgba(211, 173, 103, 0.40);
  --stop:      #e57373;
  --stop-soft: rgba(229, 115, 115, 0.11);
  --stop-mid:  rgba(229, 115, 115, 0.40);
  --mute:      #8b94a0;
  --mute-soft: rgba(139, 148, 160, 0.10);
  --user:      #8bb8e8;
  --user-soft: rgba(139, 184, 232, 0.10);

  /* —— geometry —— */
  --r-sm:   4px;
  --r:      6px;
  --r-md:   8px;
  --r-lg:   10px;
  --r-pill: 999px;

  /* —— typography scale —— */
  --fs-h1:   15px;
  --fs-h2:   13px;
  --fs-body: 12px;
  --fs-sm:   11px;
  --fs-meta: 10px;
  --fs-mini:  9px;

  /* —— typography stacks —— */
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;

  /* —— legacy aliases (full-tab pages: setups, multitf) ——
     Keeps existing page CSS working while everything != migrate every var name. */
  --panel:     var(--surface);
  --panel-hi:  var(--surface-2);
  --border:    var(--line);
  --border-hi: var(--line-strong);
  --text:      var(--ink);
  --muted:     var(--ink-3);
  --soft:      var(--ink-4);
  --green:     var(--take);
  --red:       var(--stop);
  --gold:      var(--wait);
  --blue:      var(--user);
  --silver:    var(--ink-2);
  --amber:     var(--wait);
  --purple:    #c084fc;

  /* Leverage Design System V2
     These are product-level material, depth, and motion primitives. Existing
     semantic tokens above remain the source of truth for trading states. */
  --lv-void:          #05070a;
  --lv-graphite-950:  #070a0e;
  --lv-graphite-900:  #0b0f14;
  --lv-graphite-850:  #10151c;
  --lv-graphite-800:  #151b23;
  --lv-stone:         #111820;
  --lv-brushed:       #27313d;
  --lv-walnut:        #251a14;
  --lv-glass:         rgba(126, 157, 188, 0.12);
  --lv-blue:          #63aef2;
  --lv-violet:        #858bff;
  --lv-gold:          #c6a05e;
  --lv-emerald:       #4dd29a;
  --lv-red:           #e57373;

  --lv-border-soft:   rgba(133, 151, 176, 0.14);
  --lv-border:        rgba(133, 151, 176, 0.22);
  --lv-border-focus:  rgba(112, 166, 222, 0.42);
  --lv-shadow-panel:  0 18px 54px rgba(0, 0, 0, 0.38);
  --lv-shadow-modal:  0 30px 100px rgba(0, 0, 0, 0.68);
  --lv-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.035);

  --lv-ease-standard: cubic-bezier(0.2, 0.72, 0.2, 1);
  --lv-ease-settle:   cubic-bezier(0.16, 1, 0.3, 1);
  --lv-duration-fast: 140ms;
  --lv-duration:      220ms;
  --lv-duration-slow: 520ms;
}