/**
 * Insider Transactions palette (source: dashboard-next)
 * - Body: bg-slate-950 (#020617), text slate-200/400
 * - Cards/borders: slate-900/800/700 (Tailwind)
 * - Charts: lib/sicColor.ts — CHART_BLUE #0173B2, CHART_AMBER #DE8F05, grant #10b981
 * - Grid/axis: #334155, #94a3b8 (Zone2Macro Recharts)
 *
 * --hedge-* are aliases for tabs that already reference them.
 */
html {
  --suite-content-max: 1680px;
  --suite-page-pad-x: 20px;
  /** Padded shell max-width: inner content width matches Insider (main px-5 + max-w-[1680px]). */
  --suite-page-outer-max: calc(var(--suite-content-max) + 2 * var(--suite-page-pad-x));
  --suite-page-pad-y-top: 16px;
  --suite-page-pad-y-bottom: 40px;
  --suite-stack-gap: 28px;
  --suite-section-radius: 10px;
  --suite-h1-size: 22px;
  --suite-h1-weight: 700;
  --suite-h1-tracking: -0.02em;
  --suite-filter-label-size: 10px;
  --suite-filter-label-weight: 600;
  --suite-filter-label-tracking: 0.07em;
  /** Panel / card section title (e.g. Ownership Overlap “Manager crowding”) — below page H1, above filters. */
  --suite-panel-title-size: 17px;
  --suite-panel-title-weight: 600;
  --suite-panel-title-tracking: -0.02em;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --suite-scrollbar-thumb: #475569;
  --suite-scrollbar-track: #020617;
  --insider-bg: #020617;
  --insider-surface: rgba(15, 23, 42, 0.4);
  --insider-surface-elevated: rgba(15, 23, 42, 0.85);
  --insider-border: #1e293b;
  --insider-border-muted: rgba(51, 65, 85, 0.65);
  --insider-text: #e2e8f0;
  --insider-text-secondary: #cbd5e1;
  --insider-muted: #94a3b8;
  --insider-faint: #64748b;
  --insider-chart-blue: #0173b2;
  --insider-chart-amber: #de8f05;
  --insider-chart-green: #10b981;
  --insider-chart-grid: #334155;
  --insider-chart-axis: #94a3b8;
  --insider-treemap-stroke: #0f172a;
  --insider-accent: #0173b2;
  /** Tailwind amber-500 — same fill as Insider Next “Apply filters” (dashboard-next). */
  --insider-cta-amber: #f59e0b;
  --insider-accent-secondary: #de8f05;
  --insider-shell-glass: rgba(15, 23, 42, 0.92);
  --insider-tab-well: rgba(255, 255, 255, 0.04);
  --insider-tab-border: rgba(30, 41, 59, 0.9);
  --insider-tab-active: rgba(1, 115, 178, 0.12);
  --insider-spinner-track: rgba(148, 163, 184, 0.15);

  --hedge-bg: var(--insider-bg);
  --hedge-card-bg: var(--insider-surface-elevated);
  --hedge-card-border: rgba(148, 163, 184, 0.2);
  --hedge-text: var(--insider-text);
  --hedge-muted: var(--insider-muted);
  --hedge-heading: #f8fafc;
  --hedge-amber: var(--insider-chart-amber);
  --hedge-amber-dim: #92400e;
  --suite-error: #f87171;
  --suite-error-muted: rgba(251, 113, 133, 0.35);
  /** Focus ring + floating HUD panels (Crowding 3D, shared with data tabs). */
  --suite-focus-ring: 0 0 0 3px color-mix(in srgb, var(--insider-chart-blue) 30%, transparent);
  --suite-hud-shadow: 0 8px 28px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  --suite-hud-shadow-tip: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 20px rgba(1, 115, 178, 0.08);
  /** Leaderboard rank accents (Crowding Universe HUD). */
  --suite-rank-gold: #facc15;
  --suite-rank-silver: #e2e8f0;
  --suite-rank-bronze: #ea580c;
}

/**
 * Primary page title on suite iframe tabs (HF Portfolio, Crowding overview, etc.).
 */
.tab-top-heading {
  color: var(--insider-cta-amber);
  font-size: var(--suite-h1-size);
  font-weight: var(--suite-h1-weight);
  letter-spacing: var(--suite-h1-tracking);
  line-height: 1.2;
  margin: 0 0 10px;
}

/**
 * In-panel section title (HF Portfolio uses 11px uppercase .section-head for stripes;
 * data tabs with a prominent H2 per card use this 17px title instead).
 */
.suite-panel-title {
  margin: 0;
  font-size: var(--suite-panel-title-size);
  font-weight: var(--suite-panel-title-weight);
  letter-spacing: var(--suite-panel-title-tracking);
  line-height: 1.25;
  color: var(--hedge-heading);
}

html[data-theme="light"] {
  color-scheme: light;
  --suite-scrollbar-thumb: #cbd5e1;
  --suite-scrollbar-track: #f1f5f9;
  --insider-bg: #f8fafc;
  --insider-surface: rgba(255, 255, 255, 0.92);
  --insider-surface-elevated: #ffffff;
  --insider-border: #e2e8f0;
  --insider-border-muted: rgba(148, 163, 184, 0.5);
  --insider-text: #0f172a;
  --insider-text-secondary: #1e293b;
  --insider-muted: #64748b;
  --insider-faint: #94a3b8;
  --insider-chart-blue: #0173b2;
  --insider-chart-amber: #b45309;
  --insider-chart-green: #059669;
  --insider-chart-grid: #cbd5e1;
  --insider-chart-axis: #475569;
  --insider-treemap-stroke: #e2e8f0;
  --insider-accent: #0173b2;
  --insider-cta-amber: #f59e0b;
  --insider-accent-secondary: #b45309;
  --insider-shell-glass: rgba(255, 255, 255, 0.94);
  --insider-tab-well: rgba(15, 23, 42, 0.05);
  --insider-tab-border: rgba(148, 163, 184, 0.45);
  --insider-tab-active: rgba(1, 115, 178, 0.1);
  --insider-spinner-track: rgba(15, 23, 42, 0.08);

  --hedge-bg: var(--insider-bg);
  --hedge-card-bg: var(--insider-surface-elevated);
  --hedge-card-border: rgba(0, 0, 0, 0.08);
  --hedge-text: var(--insider-text);
  --hedge-muted: var(--insider-muted);
  --hedge-heading: #020617;
  --hedge-amber: var(--insider-chart-amber);
  --hedge-amber-dim: #92400e;
  --suite-input-bg-light: #fff;
  --suite-error: #dc2626;
  --suite-error-muted: rgba(220, 38, 38, 0.25);
  --suite-focus-ring: 0 0 0 3px color-mix(in srgb, var(--insider-chart-blue) 24%, transparent);
  --suite-hud-shadow: 0 8px 24px rgba(15, 23, 42, 0.1), 0 1px 0 rgba(255, 255, 255, 0.85) inset;
  --suite-hud-shadow-tip: 0 12px 32px rgba(15, 23, 42, 0.12);
  --suite-rank-gold: #ca8a04;
  --suite-rank-silver: #475569;
  --suite-rank-bronze: #c2410c;
}

/**
 * Viewport scrollbar — matches Insider Next (color-scheme + thin slate thumb; fixes bright default in some iframe/OS combos).
 * Suite iframe pages often scroll `body` (overflow-y: auto), so style both html and body.
 */
html[data-theme="dark"],
html[data-theme="light"],
html[data-theme="dark"] body,
html[data-theme="light"] body {
  scrollbar-width: thin;
  scrollbar-color: var(--suite-scrollbar-thumb) var(--suite-scrollbar-track);
}

html[data-theme="dark"]::-webkit-scrollbar,
html[data-theme="light"]::-webkit-scrollbar,
html[data-theme="dark"] body::-webkit-scrollbar,
html[data-theme="light"] body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html[data-theme="dark"]::-webkit-scrollbar-track,
html[data-theme="light"]::-webkit-scrollbar-track,
html[data-theme="dark"] body::-webkit-scrollbar-track,
html[data-theme="light"] body::-webkit-scrollbar-track {
  background: var(--suite-scrollbar-track);
}

html[data-theme="dark"]::-webkit-scrollbar-thumb,
html[data-theme="light"]::-webkit-scrollbar-thumb,
html[data-theme="dark"] body::-webkit-scrollbar-thumb,
html[data-theme="light"] body::-webkit-scrollbar-thumb {
  background: var(--suite-scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid var(--suite-scrollbar-track);
}

html[data-theme="dark"]::-webkit-scrollbar-thumb:hover,
html[data-theme="light"]::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] body::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] body::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--suite-scrollbar-thumb) 88%, var(--insider-text));
}