/* Design tokens — docs/design-system.md §3.4. Change values there first. */
:root {
  --color-bg:#F8FAFC; --color-surface:#FFFFFF; --color-surface-muted:#F1F5F9;
  --color-text:#0F172A; --color-text-muted:#475569;
  --color-border:#E2E8F0; --color-border-input:#64748B;
  --color-primary:#1E40AF; --color-primary-hover:#1E3A8A; --color-on-primary:#FFFFFF; --color-primary-subtle:#EFF6FF;
  --color-accent:#D97706; --color-on-accent:#000000; --color-ring:#1E40AF;
  --color-danger:#B91C1C; --color-on-danger:#FFFFFF; --color-danger-subtle:#FEF2F2; --color-danger-text:#991B1B;
  --color-warning-subtle:#FFFBEB; --color-warning-text:#92400E;
  --color-success-subtle:#F0FDF4; --color-success-text:#166534;
  --color-info-subtle:#EFF6FF; --color-info-text:#1E40AF;
  --color-surface-glass:rgba(255,255,255,0.80);
  /* Chart marks (dataviz validator: in lightness band, ≥3:1 vs surface) */
  --color-chart-1:#2563EB; --color-chart-other:#64748B;
  /* Vendor slots 1–4 (dataviz reference palette, adjacent-pair validated) */
  --color-vendor-1:#2a78d6; --color-vendor-2:#eb6834; --color-vendor-3:#1baf7a; --color-vendor-4:#eda100;
  --gradient-page:
    radial-gradient(1100px 560px at 0% -10%, rgba(30,64,175,0.10), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(67,56,202,0.08), transparent 60%),
    linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
  --header-height:56px;
}
[data-theme="dark"] {
  color-scheme: dark;   /* native controls, scrollbars, autofill in dark */
  --color-bg:#0F172A; --color-surface:#1B2336; --color-surface-muted:#272F42;
  --color-text:#F8FAFC; --color-text-muted:#94A3B8;
  --color-border:#334155; --color-border-input:#64748B;
  --color-primary:#60A5FA; --color-primary-hover:#93C5FD; --color-on-primary:#0F172A; --color-primary-subtle:#1E293B;
  --color-accent:#FBBF24; --color-on-accent:#0F172A; --color-ring:#93C5FD;
  --color-danger:#F87171; --color-on-danger:#0F172A; --color-danger-subtle:#3B1D24; --color-danger-text:#FCA5A5;
  --color-warning-subtle:#3A2E14; --color-warning-text:#FCD34D;
  --color-success-subtle:#14301F; --color-success-text:#86EFAC;
  --color-info-subtle:#172554; --color-info-text:#93C5FD;
  --color-surface-glass:rgba(27,35,54,0.72);
  --color-chart-1:#3B82F6; --color-chart-other:#64748B;
  --color-vendor-1:#3987e5; --color-vendor-2:#d95926; --color-vendor-3:#199e70; --color-vendor-4:#c98500;
  /* Glows stay ≤ 40 % so muted text keeps ≥ 4.5:1 everywhere (design-system §3.5) */
  --gradient-page:
    radial-gradient(1100px 560px at 0% -10%, rgba(30,64,175,0.40), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, rgba(67,56,202,0.28), transparent 60%),
    radial-gradient(800px 480px at 50% 110%, rgba(217,119,6,0.10), transparent 60%),
    linear-gradient(180deg, #0F172A 0%, #0B1120 100%);
}
html { scroll-padding-top: calc(var(--header-height) + 16px); }   /* focus-not-obscured (A3) */
body { background: var(--color-bg); color: var(--color-text); }
/* Fixed gradient layer: doesn't scroll, no background-attachment jank on mobile */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--gradient-page); }
.accent-bar { height: 3px; background: linear-gradient(90deg, var(--color-primary) 0%, #6366F1 55%, var(--color-accent) 100%); }  /* decorative only */
.glass { background: var(--color-surface-glass); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); }
.num { font-family: "Fira Code", ui-monospace, monospace; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.htmx-added { opacity: 0; }
.htmx-settling { opacity: 1; transition: opacity 150ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Stacked vendor bars: 2px surface gap between segments, 4px rounded data end (dataviz marks) */
.vendor-bar { display: flex; gap: 2px; height: 12px; }
.vendor-bar > span { display: block; height: 100%; }
.vendor-bar > span:last-child { border-radius: 0 4px 4px 0; }
.vs-0 { background: var(--color-chart-other); }
.vs-1 { background: var(--color-vendor-1); } .vs-2 { background: var(--color-vendor-2); }
.vs-3 { background: var(--color-vendor-3); } .vs-4 { background: var(--color-vendor-4); }