/* ══════════════════════════════════════════════════════════════
   TenK Pulse — Shared Design Tokens (Phase 0)
   Additive only. Does not override styles.css or any page's
   inline <style> block. Safe to <link> alongside existing CSS.

   Naming: all tokens/classes are prefixed `--ds-` / `.ds-` so
   they never collide with existing `--bg`, `.btn`, `.card`, etc.
   Future phases (Watchlist, custom indicator, chart notes,
   Replay, Alert Center) should build on these `.ds-*` classes
   instead of inventing page-local styles.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ---- Typography (already loaded via Google Fonts in all pages) ---- */
  --ds-font-display:'Vazirmatn','Segoe UI','Tahoma',system-ui,sans-serif;
  --ds-font-data:'JetBrains Mono','Courier New',monospace;

  /* ---- Radius / spacing (unified across styles.css + ta.html values) ---- */
  --ds-radius-sm:9px;
  --ds-radius:12px;
  --ds-radius-lg:18px;
  --ds-gap:14px;
  --ds-ease:cubic-bezier(.4,0,.2,1);

  /* ---- Base palette (dark theme — matches current panel default) ---- */
  --ds-bg:#0b0e11;
  --ds-bg2:#0f1216;
  --ds-surface:#161a1e;
  --ds-surface2:#1a1e24;
  --ds-border:#242830;
  --ds-text:#e8eaed;
  --ds-muted:#8a919e;

  /* ---- Semantic colors ---- */
  --ds-accent:#3b82f6;
  --ds-accent2:#8b5cf6;
  --ds-accent-ct:#ffffff;
  --ds-success:#26a69a;
  --ds-danger:#ef5350;
  --ds-warning:#d97706;
}

/* Light theme variant — mirrors body.light-mode in ta.html */
[data-ds-theme="light"], body.light-mode{
  --ds-bg:#f4f5f7;
  --ds-bg2:#eef0f3;
  --ds-surface:#ffffff;
  --ds-surface2:#e8eaed;
  --ds-border:#e2e5ea;
  --ds-text:#1a1d21;
  --ds-muted:#6b7280;
}

/* ── Buttons ─────────────────────────────────────────────── */
.ds-btn{
  font-family:var(--ds-font-display);
  border:1px solid var(--ds-border);
  background:var(--ds-surface2);
  color:var(--ds-text);
  padding:9px 16px;
  border-radius:var(--ds-radius-sm);
  font-size:.86rem;
  font-weight:600;
  cursor:pointer;
  transition:filter .15s var(--ds-ease), transform .1s var(--ds-ease);
}
.ds-btn:hover{ filter:brightness(1.1); }
.ds-btn:active{ transform:scale(.98); }
.ds-btn.ds-primary{
  background:var(--ds-accent);
  border-color:transparent;
  color:var(--ds-accent-ct);
}
.ds-btn.ds-ghost{ background:transparent; }
.ds-btn.ds-ghost:hover{ background:var(--ds-surface2); }
.ds-btn.ds-danger{ background:var(--ds-danger); border-color:transparent; color:#fff; }
.ds-btn.ds-sm{ padding:6px 12px; font-size:.78rem; border-radius:8px; }
.ds-btn.ds-block{ width:100%; }

/* ── Cards ───────────────────────────────────────────────── */
.ds-card{
  background:var(--ds-surface);
  border:1px solid var(--ds-border);
  border-radius:var(--ds-radius);
  padding:16px;
}
.ds-card h3{
  font-family:var(--ds-font-display);
  font-size:1rem;
  font-weight:700;
  margin:0 0 12px;
  color:var(--ds-text);
}

/* ── Modal ───────────────────────────────────────────────── */
.ds-modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:none; align-items:center; justify-content:center; z-index:100;
}
.ds-modal-backdrop.ds-open{ display:flex; }
.ds-modal{
  background:var(--ds-surface);
  border:1px solid var(--ds-border);
  border-radius:var(--ds-radius-lg);
  padding:20px;
  width:min(340px,90vw);
  text-align:center;
  font-family:var(--ds-font-display);
  color:var(--ds-text);
}
.ds-modal h3{ margin:0 0 6px; font-size:1.05rem; }
.ds-modal p{ color:var(--ds-muted); margin:0 0 16px; font-size:.85rem; }

/* ── Tabs ────────────────────────────────────────────────── */
.ds-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--ds-border); }
.ds-tab{
  font-family:var(--ds-font-display);
  padding:9px 14px;
  font-size:.85rem;
  font-weight:600;
  color:var(--ds-muted);
  background:transparent;
  border:none;
  border-bottom:2px solid transparent;
  cursor:pointer;
}
.ds-tab.ds-active{ color:var(--ds-text); border-bottom-color:var(--ds-accent); }

/* ── Badge / Pill ────────────────────────────────────────── */
.ds-badge{
  display:inline-block;
  font-family:var(--ds-font-data);
  padding:3px 10px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
}
.ds-badge.ds-success{ background:rgba(38,166,154,.15); color:var(--ds-success); }
.ds-badge.ds-danger{ background:rgba(239,83,80,.15); color:var(--ds-danger); }
.ds-badge.ds-warning{ background:rgba(217,119,6,.15); color:var(--ds-warning); }
.ds-badge.ds-neutral{ background:var(--ds-surface2); color:var(--ds-muted); }

/* ══════════════════════════════════════════════════════════
   PROFESSIONAL EXTENSIONS — 2026.08.24
   ══════════════════════════════════════════════════════════ */

/* ── Tabular numerals for financial data ── */
.ds-tabular, .ds-price, .ds-data, .ds-chip, .ds-badge {
  font-variant-numeric: tabular-nums;
}

/* ── Chip component: used for watchlist items, tabs ── */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ds-surface2);
  border: 1.5px solid var(--ds-border);
  border-radius: 10px;
  padding: 8px 14px;
  white-space: nowrap;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-muted);
  transition: all .15s var(--ds-ease);
}
.ds-chip:hover {
  background: var(--ds-surface);
  color: var(--ds-text);
  border-color: rgba(59,130,246,.35);
}
.ds-chip.ds-active {
  border-color: var(--ds-accent);
  color: var(--ds-accent);
  background: rgba(59,130,246,.08);
  box-shadow: 0 0 0 1px rgba(59,130,246,.12);
}

/* ── Data chip: for symbol names (monospace) ── */
.ds-data-chip {
  font-family: var(--ds-font-data);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* ── Interactive subtle shadow ── */
.ds-shadow {
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.ds-shadow:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* ── Focus ring (consistent across all controls) ── */
.ds-focus:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
}