/* ═══════════════════════════════════════════════════════════════════════════
   ExtremeHedge Design System v2 — tokens.css
   The dark, lime-accented ExtremeHedge theme — the SAME token set declared at
   the top of UI-REDESIGN-VIISYNC-V5.html and BACKEND-IMPLEMENTATION-PLAN.html.
   (This replaces the monochrome ViiSync base the skeleton was seeded with —
   the brand IS lime; the logo is the ExtremeHedge mark.)

   RULE FOR CONSUMERS: never hardcode a color, size, or radius that exists here.
   Use var(--token). Two color ramps never mix: price direction uses
   --tick-up/--tick-dn; P/L and status use --green/--red (via the status ramp).
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Brand ───────────────────────────────────────────────────────────────
     lime is the interactive/brand hue; deep is the ink used on lime fills.    */
  --brand-lime:#c0f74d; --brand-olive:#759b00; --brand-teal:#2dddd7; --brand-deep:#29350c;

  /* ── Background layers (darkest → lightest), warm near-black green ───────── */
  --bg:#0c0d09; --bg2:#0e0f0b; --panel:#10120c; --titlebar:#0a0b07; --hover:#1a1c14;
  --sel:rgba(192,247,77,0.09);

  /* ── Elevated surfaces ─────────────────────────────────────────────────── */
  --surf0:#13150e; --surf1:#161810; --surf2:#1b1d14; --chip:#262a1c;

  /* ── Borders (softest → strongest) ─────────────────────────────────────── */
  --border:#24281c; --border2:#2c3122; --border-tb:#1d2016; --border-soft:#161810;
  --border3:#3a402c; --border4:#4c5439;

  /* ── Text hierarchy ────────────────────────────────────────────────────── */
  --fg:#d7dacd; --fg2:#e9ecdf; --fg-dim:#9aa08b; --fg-faint:#6e755c;
  --tx2:#c9cebb; --tx-dim2:#8a9078; --tx-faint2:#5c624b;

  /* ── Accent: brand lime (interactive/focus), accent2 = dimmer olive-lime ── */
  --accent:#c0f74d; --accent2:#9ec840;

  /* ── Status colors (the saturated ramp for P/L + connection state) ──────── */
  --green:#4caf50; --green2:#388e3c; --gray:#6e7681; --yellow:#ff9800; --red:#f44336;
  --teal:#2dddd7;
  --conn-on:#4caf50; --conn-off:#757575; --conn-wait:#ffc107; --conn-retry:#ff9800;

  /* ── Chart line colors ─────────────────────────────────────────────────── */
  --chart-read:#c0f74d; --chart-write:#2dddd7; --chart-clients:#759b00;

  /* ── Brand gradient + glow. Active-tab strip, selected-node bar, primary
        buttons (with deep-hedge ink), avatar, logo drop-shadow. ───────────── */
  --grad:linear-gradient(135deg,#d4ff6b,#c0f74d 52%,#9ec840);
  --logo-ink:#c0f74d; --logo-glow:rgba(192,247,77,0.16);
  --glow:rgba(192,247,77,0.40);

  /* ── Typography ────────────────────────────────────────────────────────── */
  --mono:"IBM Plex Mono","SF Mono",ui-monospace,Consolas,"Courier New",monospace;
  --sans:"IBM Plex Sans",system-ui,sans-serif;

  /* ── Extended accents — domain / data-viz tints ────────────────────────── */
  --acc-bid:#e0a24a;       /* bid price column */
  --acc-ask:#4ecfca;       /* ask price column */
  --acc-violet:#9b7cff;    /* symbol-mapping arrows, mapped counts */
  --acc-lavender:#9b8cff;  /* entity pickers, routing icons */
  --acc-gold:#d8b24a;      /* folder icons, symbols/watchlists */
  --acc-amber:#e0b64a;     /* tree section icon variant */
  --acc-copper:#c8915f;    /* venues */
  --acc-teal:#2dddd7;      /* charts & ticks */
  --acc-aqua:#7fe9e3;      /* tree leaf icons */
  --acc-steel:#5fb0c8;     /* data feeds */
  --acc-purple:#b07fd6;    /* chat / misc */
  --acc-lime:#c0f74d;      /* lime accent alias */
  --acc-olive:#759b00;     /* olive accent alias */
  --live-green:#7ef0a6;    /* "· LIVE" pulse text/dot */
  --soft-green:#7ee0a0;    /* green pill text, id-pill */
  --pnl-long:#5fbf86;      /* long-exposure bar */
  --pnl-short:#e2607a;     /* short-exposure bar / danger hover */
  --tick-up:#1fcf6d;       /* price uptick chevron */
  --tick-dn:#ff4d5e;       /* price downtick chevron */
  --err-soft:#e06a6a;      /* modal / form error text */
  --on-grad-ink:#29350c;   /* text color on top of --grad (deep hedge ink) */

  /* ── Type scale (px sizes; base 13px on <body>) ────────────────────────── */
  --fs-micro:9.5px; --fs-label:10.5px; --fs-th:11px; --fs-meta:11.5px;
  --fs-row:12px; --fs-body-s:12.5px; --fs-body:13px; --fs-dialog:14px;
  --fs-modal-h:16px; --fs-title:20px; --fs-stat:23px; --fs-stat-lg:30px;

  /* ── Chrome dimensions (fixed rows of the shell) ───────────────────────── */
  --h-titlebar:36px; --h-tab:30px; --h-bar:34px; --h-statusbar:24px; --h-node:23px;
  --h-dock:228px; --w-sidebar:300px; --w-rightpanel:340px; --w-scope-rail:188px;

  /* ── Radii ─────────────────────────────────────────────────────────────── */
  --r-xs:4px; --r-sm:6px; --r-input:7px; --r-btn:8px; --r-menu:9px;
  --r-card:10px; --r-table:11px; --r-pop:12px; --r-modal:14px;

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  --sh-pop:0 16px 48px rgba(0,0,0,.5);
  --sh-menu:0 16px 48px rgba(0,0,0,.55);
  --sh-modal:0 24px 64px rgba(0,0,0,.6);
  --sh-glow:0 0 10px var(--glow);
  --sh-glow-lg:0 0 12px var(--glow);
  --overlay:rgba(0,0,0,.55);

  /* ── Spacing ───────────────────────────────────────────────────────────── */
  --gap-icon:2px; --gap-inline:8px; --gap-form:10px; --gap-grid:12px;
  --gap-grid-lg:14px; --pad-cell:16px; --pad-card:16px 18px;
  --pad-content:24px 28px 40px 34px;
}

/* Optional light theme — same token names, lime accent retained. The app ships
   dark by default (V5 is a dark IDE console); light is a convenience only. */
html[data-theme="light"]{
  --bg:#fbfbf7; --bg2:#f3f4ec; --panel:#f7f8f0; --titlebar:#eef0e6; --hover:#edefe3; --sel:rgba(117,155,0,0.10);
  --border:#e6e8dc; --border2:#dde0d0; --border-tb:#e7eadd; --border-soft:#f0f1e8;
  --surf0:#f0f1e8; --surf1:#eef1e5; --surf2:#e9ece0; --chip:#e0e3d4;
  --border3:#d6dac8; --border4:#c8ccb8;
  --tx2:#3b3f34; --tx-dim2:#767c66; --tx-faint2:#a8ae98;
  --fg:#2a2d24; --fg2:#1f2218; --fg-dim:#646953; --fg-faint:#9aa080;
  --accent:#6f9e10; --accent2:#8bbf2a; --gray:#9aa086;
  --chart-read:#6f9e10; --chart-write:#1f9d97; --chart-clients:#8a9a3a;
  --grad:linear-gradient(135deg,#a7d94a,#8bbf2a 52%,#6f9e10);
  --logo-ink:#6f9e10; --logo-glow:transparent;
  --glow:rgba(117,155,0,0.14);
  --on-grad-ink:#1a2207;
}
html[data-theme="light"] .logo{filter:none}

/* ── Base element setup ─────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:var(--sans);background:var(--bg);color:var(--fg);font-size:13px;line-height:normal;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.mono{font-family:var(--mono)}
button{font-family:inherit;cursor:pointer}