/* ═══════════════════════════════════════════════════════════════════════════
   ViiSync Design System — tokens.css
   Extracted 1:1 from src/Client/wwwroot/css/viisync.css (the "ViiSync Database"
   IDE theme). Dark is the default; light mode is activated by setting
   `data-theme="light"` on the <html> element — every token auto-inverts.

   RULE FOR CONSUMERS: never hardcode a color, size, or radius that exists here.
   Use var(--token). The extended-accent section lists the only raw hex values
   the app uses outside the variables — treat them as named constants too.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Background layers (darkest → lightest) ─────────────────────────────
     bg      page + sidebar + main background (near-black)
     bg2     subtle alt surface (zebra rows, chart cards, dock footer)
     panel   cards, table headers, popovers, modals
     titlebar top title bar AND bottom status bar (darkest chrome)
     hover   universal hover wash
     sel     selected-row wash (translucent so it works on any layer)        */
  --bg:#0c0c0e; --bg2:#0e0e10; --panel:#101013; --titlebar:#0a0a0c; --hover:#1a1a1e;
  --sel:rgba(206,210,224,0.10);

  /* ── Elevated surfaces (used heavily by inline styles + dense views) ──── */
  --surf0:#131316; --surf1:#161619; --surf2:#1b1b1f; --chip:#26262a;

  /* ── Borders (softest → strongest) ──────────────────────────────────────
     border-soft  hairlines inside tables / panel splits (barely visible)
     border-tb    title-bar & table-header underline
     border       default card/table outline
     border2      inputs, popovers, modals (slightly stronger)
     border3/4    disabled-ish strokes, faint text-on-border uses            */
  --border:#242428; --border2:#2c2c31; --border-tb:#1d1d20; --border-soft:#161619;
  --border3:#3a3a40; --border4:#4c4c52;

  /* ── Text hierarchy ──────────────────────────────────────────────────────
     fg2       brightest (titles, primary cell values)
     fg        default body text
     fg-dim    secondary text
     fg-faint  labels, placeholders, muted meta
     tx2/tx-dim2/tx-faint2  the mono-table text ramp (rows, dim cells, empty) */
  --fg:#d6d6da; --fg2:#e8e8ec; --fg-dim:#9a9aa0; --fg-faint:#6e6e75;
  --tx2:#c8c8ce; --tx-dim2:#8a8a90; --tx-faint2:#5c5c62;

  /* ── Accent: monochrome silver. The brand has NO hue — the logo is the
        theme. accent = interactive/focus silver, accent2 = dimmer variant. */
  --accent:#c6c9d2; --accent2:#94969f;

  /* ── Status colors (the ONLY saturated colors in the chrome) ───────────── */
  --green:#3fb950; --green2:#2ea043; --gray:#6e7681; --yellow:#d29922; --red:#f06a6a;

  /* ── Chart line colors (monochrome ramp) ───────────────────────────────── */
  --chart-read:#c2c5cf; --chart-write:#8e9099; --chart-clients:#6c6e76;

  /* ── Brand: silver-sheen gradient + glow. Used for the active-tab strip,
        selected-node bar, primary buttons (with dark #15151a text), avatar. */
  --grad:linear-gradient(135deg,#eef0f4,#b4b6bd 52%,#7c7e85);
  --logo-ink:#9b9ea8; --logo-glow:rgba(190,196,212,0.16);
  --glow:rgba(226,229,239,0.45);

  /* ── Typography ──────────────────────────────────────────────────────────
     Sans for UI copy, mono for ALL data/labels/tables/terminal.             */
  --mono:"IBM Plex Mono","SF Mono",ui-monospace,Consolas,"Courier New",monospace;
}

html[data-theme="light"]{
  /* "Light" theme = Nord Frost · muted arctic. A soft, low-contrast arctic-slate
     palette (lighter than the graphite dark default). Same token names; values flip. */
  --bg:#20242e; --bg2:#242a35; --panel:#2a303c; --titlebar:#1b1f27; --hover:#353d4b; --sel:rgba(136,192,208,0.16);
  --border:#3a4250; --border2:#454e5e; --border-tb:#333b47; --border-soft:#2f3642;
  --surf0:#2e3542; --surf1:#333b48; --surf2:#3a4350; --chip:#455066;
  --border3:#4a5364; --border4:#5a6478;
  --tx2:#cbd2de; --tx-dim2:#8b96a8; --tx-faint2:#5e6878;
  --fg:#d8dee9; --fg2:#eceff4; --fg-dim:#9aa5b5; --fg-faint:#6d7789;
  --accent:#88c0d0; --accent2:#6a97a5; --gray:#7a8496;
  --green:#a3be8c; --green2:#8fa878; --yellow:#ebcb8b; --red:#bf616a;
  --chart-read:#cbd2de; --chart-write:#9aa5b5; --chart-clients:#6d7789;
  --grad:linear-gradient(135deg,#aee0e0,#88c0d0 52%,#5e97a8);
  /* Nord logo: soft arctic tint, no glow. */
  --logo-ink:#88c0d0; --logo-glow:rgba(136,192,208,0.16);
  --glow:rgba(136,192,208,0.30);
}
/* the dark theme adds a drop-shadow glow filter on .logo; light removes it */
html[data-theme="light"] .logo{filter:none}

/* ═══════════════════════════════════════════════════════════════════════════
   The tokens below are NOT custom properties in the source file — the app uses
   these literal values directly in its rules. They are promoted to variables
   here (values unchanged, extracted from usage) so new code can reference them.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── Extended accents — the only raw hexes used outside the variables.
        Data-viz / domain tints, all low-saturation to sit on the mono theme. */
  --acc-bid:#74c7be;       /* bid price column (.tk-r .c-bid) — faded turquoise */
  --acc-ask:#a68fd6;       /* ask price column, wallet tree icons — faded purple */
  --acc-violet:#9b7cff;    /* symbol-mapping arrows, mapped counts, DM user */
  --acc-lavender:#9b8cff;  /* tree section icons (execution flows, routing), form select values */
  --acc-peri:#7c9cf0;      /* numeric form values (execution-flow editor) */
  --acc-gold:#d8b24a;      /* tree section icons (symbols, watchlists, …) */
  --acc-amber:#e0b64a;     /* tree section icon variant */
  --acc-copper:#c8915f;    /* tree section icons (venues) */
  --acc-teal:#5ad0c8;      /* tree section icons (charts & ticks) */
  --acc-aqua:#7fd9d0;      /* tree leaf icons */
  --acc-steel:#5fb0c8;     /* tree section icons (data feeds) */
  --acc-purple:#b07fd6;    /* chat tree icons */
  --live-green:#7ef0a6;    /* "· LIVE" pulse text/dot (brighter than --green) */
  --soft-green:#7ee0a0;    /* green pill text (rolepill.green, id-pill) */
  --pnl-long:#74c7be;      /* long-exposure bar — faded turquoise (up) */
  --pnl-short:#a68fd6;     /* short-exposure bar / danger hover — faded purple (down) */
  --tick-up:#74c7be;       /* price uptick chevron (.dirchip.up) — faded turquoise */
  --tick-dn:#a68fd6;       /* price downtick chevron (.dirchip.dn) — faded purple */
  --err-soft:#e06a6a;      /* modal error text */
  --on-grad-ink:#15151a;   /* text color on top of --grad buttons/pills */

  /* ── Type scale (px sizes actually used; base is 13px on <body>) ────────
     8.5/9/9.5/10 dense-rail micro-labels · 10.5 section labels (uppercase,
     letter-spaced) · 11/11.5 table headers, meta · 12/12.5 table rows, body
     small · 13 body/base · 14–16 dialog headings · 20 view title · 22–26
     stat values · 30 big stat. Weights: 400 body · 500 labels · 600 headings,
     buttons, emphasized cells · 700 stats, key identifiers.                 */
  --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;
  --sans:"IBM Plex Sans",system-ui,sans-serif;

  /* ── Chrome dimensions (fixed rows of the shell) ─────────────────────── */
  --h-titlebar:36px;   /* .titlebar */
  --h-tab:30px;        /* .tab inside the title bar */
  --h-bar:34px;        /* .crumbs, .side-head, .dock-head, .mdp-head */
  --h-statusbar:24px;  /* .statusbar */
  --h-node:23px;       /* .node tree row */
  --h-dock:228px;      /* .dock default; 380px in .dock.trade */
  --w-sidebar:300px;   /* .sidebar (min 230 / max 520, user-resizable) */
  --w-rightpanel:340px;/* .rightpanel (min 280 / max 560, user-resizable) */
  --w-scope-rail:188px;/* .dock-scope right rail inside the dock */

  /* ── Radii (as used; smaller = denser element) ───────────────────────────
     4 tab-close hover · 5 tiny hover chips · 6 icon buttons, menu items ·
     7 inputs, small buttons, pills · 8 buttons, search boxes · 9 toggles,
     context menu · 10 cards, tables · 11 list tables · 12 popover, stat
     cards · 14 modal, identity card.                                        */
  --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);    /* popover */
  --sh-menu:0 16px 48px rgba(0,0,0,.55);  /* context menu */
  --sh-modal:0 24px 64px rgba(0,0,0,.6);  /* modal */
  --sh-glow:0 0 10px var(--glow);         /* primary silver CTA glow */
  --sh-glow-lg:0 0 12px var(--glow);      /* large CTA glow */
  --overlay:rgba(0,0,0,.55);              /* modal backdrop */

  /* ── Spacing — the app uses no strict scale; these are the recurring
        values, extracted from usage. Gaps: 2 (icon clusters) · 6–8 (inline
        icon+text) · 10 (form rows) · 12 (card grids) · 14 (grid2/grid3) ·
        16 (statusbar groups). Paddings: 0 16px (table rows) · 7px 10px
        (inputs) · 16px 18px (stat cards) · 16px 20px (modal head) ·
        24px 28px 40px 34px (main content).                                  */
  --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;
}

/* ── Base element setup (copied from the app) ──────────────────────────── */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:"IBM Plex Sans",system-ui,sans-serif;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}

/* Fonts are loaded from Google Fonts in the app:
   https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap */
