/* TIDEVAR v4 · docs/brand-strategy/BRAND-GUIDE.md */
:root {
  color-scheme: dark;
  --tidevar-bg: #10151b;
  --tidevar-surface: #19212a;
  --tidevar-text: #f2f1e9;
  --tidevar-muted: #afbbc6;
  --tidevar-brand: #73d6e8;
  --tidevar-on-brand: #10151b;
  --tidevar-line: #34414f;
  --tidevar-buy: #63cfa2;
  --tidevar-sell: #ed8b93;
  --tidevar-event: #eab46b;
  --tidevar-font: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", sans-serif;
  --tidevar-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --bg: var(--tidevar-bg);
  --panel: var(--tidevar-surface);
  --panel-raised: #202a35;
  --text: var(--tidevar-text);
  --muted: var(--tidevar-muted);
  --accent: var(--tidevar-brand);
  --accent-soft: #73d6e814;
  --line: var(--tidevar-line);
  --line-strong: #4a5c6d;
  --buy: var(--tidevar-buy);
  --buy-soft: #63cfa219;
  --sell: var(--tidevar-sell);
  --sell-soft: #ed8b9319;
  --pending: var(--tidevar-event);
  --pending-soft: #eab46b19;
  --radius: 10px;
  font-family: var(--tidevar-font);
}

/* Radar uses deeper, neutral surfaces while keeping the shared brand accents. */
:root:has(body.radar-page) {
  --tidevar-bg: #090b0e;
  --tidevar-surface: #111419;
  --tidevar-muted: #98a2b0;
  --tidevar-line: #252b33;
  --panel-raised: #181d24;
  --panel-inset: #0c0f13;
  --line-strong: #343c47;
}
:where(.radar-page) .ambient { display: none; }
:where(.radar-page) :is(.status-panel, .search, .sort-control, .preferences-open, .filter-bar, .preferences-dialog, .radar-alerts) { background: var(--panel); }
:where(.radar-page) :is(.advanced-filters-panel, .trade-details, .filter-presets-field input, .filter-presets-field select, .time-range-relation select) { background: var(--panel-raised); }
:where(.radar-page) .token-card { background: linear-gradient(145deg, #171b21, #101318); }
:where(.radar-page) .token-card.pending { background: linear-gradient(145deg, #191c21, #111419); }
:where(.radar-page) .metric { background: var(--panel-inset); }
:where(.radar-page) .graduation-toast { background: linear-gradient(110deg, #73d6e811, transparent 65%), var(--panel-raised); }
:where(.radar-page) .radar-footer { background: var(--bg); }

[hidden] { display: none !important; }
.product-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; border-bottom: 1px solid var(--line); }
.product-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-size: 15px; font-weight: 650; letter-spacing: .13em; flex-shrink: 0; }
.product-brand img { display: block; width: 40px; height: 40px; object-fit: contain; }
.product-brand small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: .06em; }
.product-nav-links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.product-nav-links a, .product-back { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; font-size: 13px; }
.product-nav-links a:hover, .product-back:hover, .product-nav-links a[aria-current="page"] { color: var(--accent); }
.product-brand:focus-visible, .product-nav a:focus-visible, .product-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 4px; }
.workspace-nav { margin: 0 24px; }
.workspace-nav ~ .shell { padding-top: 32px; }
.brand-name { display: flex; align-items: center; gap: 6px; }
.brand-beta { display: inline-flex; padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font: 9px/1.5 var(--tidevar-mono); letter-spacing: .04em; }
.workspace-nav .product-brand { flex-wrap: wrap; }
.brand-footer-links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.brand-footer-links a { color: var(--muted); font-size: 12px; text-decoration: none; padding-block: 10px; }
.brand-footer-links a:hover { color: var(--accent); }
@media (max-width: 600px) {
  .product-nav { gap: 16px; min-height: 76px; }
  .product-nav-links { gap: 16px; }
  .product-brand { gap: 8px; font-size: 13px; }
  .product-brand small { font-size: 11px; }
  .product-nav-links a, .product-back { font-size: 12px; }
  .workspace-nav { margin: 0 16px; flex-wrap: wrap; padding-block: 16px; }
}