/* CarTrack design tokens: Instrument Cluster theme. */
:root {
  --bg: #101214;
  --surface: #16191d;
  --surface2: #1d2127;
  --surface3: #262b32;
  --border: rgba(44, 50, 58, .65);
  --line: #2c323a;

  --accent: #ffc35c;
  --accent-c: #ffb02e;
  --accent-dim: rgba(255, 176, 46, .14);
  --accent2: #ff6257;
  --accent3: #3fd68f;
  --sec-c: #2fb87c;
  --green: #3fd68f;
  --good: #3fd68f;
  --good-dim: rgba(63, 214, 143, .12);
  --bad: #ff6257;
  --bad-dim: rgba(255, 98, 87, .12);

  --text: #e9ecef;
  --muted: #8a929d;
  --faint: #5b626c;

  --font-head: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --accent-rgb: 255, 195, 92;
  --accent-c-rgb: 255, 176, 46;
  --good-rgb: 63, 214, 143;
  --bad-rgb: 255, 98, 87;

  --primary: var(--accent);
  --primary-c: var(--accent-c);
  --secondary: var(--good);
  --error: var(--bad);
  --outline: #4a505a;
}

html.light {
  --bg: #f4f3f0;
  --surface: #ffffff;
  --surface2: #edebe6;
  --surface3: #e0ddd5;
  --border: rgba(60, 56, 46, .18);
  --line: #ddd9d1;

  --accent: #7a4a00;
  --accent-c: #9c5c00;
  --accent-dim: rgba(156, 92, 0, .10);
  --accent2: #c0392e;
  --accent3: #1e7d4f;
  --sec-c: #1e7d4f;
  --green: #1e7d4f;
  --good: #1e7d4f;
  --good-dim: rgba(30, 125, 79, .10);
  --bad: #c0392e;
  --bad-dim: rgba(192, 57, 46, .09);

  --text: #1d1c1a;
  --muted: #5d5a54;
  --faint: #8a867e;

  --accent-rgb: 122, 74, 0;
  --accent-c-rgb: 156, 92, 0;
  --good-rgb: 30, 125, 79;
  --bad-rgb: 192, 57, 46;
  --outline: #b9b4aa;
}

body,
input,
select,
textarea,
button {
  font-family: var(--font-body);
}

body::after {
  background:
    radial-gradient(ellipse 50% 40% at 15% 20%, rgba(var(--accent-c-rgb), .055) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 85% 80%, rgba(var(--good-rgb), .04) 0%, transparent 60%);
}

input:focus,
select:focus,
textarea:focus {
  box-shadow: inset 0 0 0 1px rgba(var(--accent-c-rgb), .5);
}

.logo-icon svg,
.topbar-logo-icon svg {
  stroke: #1a1205;
}

.btn,
.btn-small,
.btn-primary,
.plan-btn,
.primary-action,
button.primary {
  color: #1a1205;
}

h1,
h2,
h3,
.brand,
.nav-label,
.stat-value,
.metric-value,
.kpi-value,
.plan-price,
.topbar-name,
.logo h1 {
  font-family: var(--font-head);
}

td.num,
.stat-value,
.metric-value,
.kpi-value {
  font-variant-numeric: tabular-nums;
}

code,
pre,
.mono,
.ad-id,
.vin,
.listing-id {
  font-family: var(--font-mono);
}