/*
 * RealRacer.ai typography — shared with the public landing pages.
 *
 * Three faces:
 *   Barlow         → all prose, body, UI chrome
 *   Bebas Neue     → every heading (h1–h6) and .display utility
 *   JetBrains Mono → every numeric readout (lap times, deltas, speeds,
 *                    RPM, gear, telemetry cursor values). Tabular by
 *                    default, slashed zero — non-negotiable for numerics.
 *
 * Pages load Barlow + Bebas Neue + Inter@900 via their own <link> tag
 * (Inter is kept only for the .rr-lockup brand wordmark). This file
 * pulls JetBrains Mono once (cheap, ~28kb subset).
 *
 * Loaded sitewide via <link rel="stylesheet" href="/static/typography.css">.
 * Page-specific styles still win — these are defaults, not overrides.
 */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

html, body {
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Bebas Neue', 'Barlow', sans-serif;
  font-weight: 400;            /* Bebas Neue ships in one weight */
  line-height: 1.05;
  letter-spacing: 0.01em;      /* Bebas reads better with a touch of air */
}

.display {
  font-family: 'Bebas Neue', 'Barlow', sans-serif;
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: 0.015em;
}

/* Eyebrow — the small orange-dash + DM Mono uppercase label that sits
 * above a Bebas Neue page title on the landing pages and on login/
 * signup. Drop it on any page-header above the h1 for the same effect.
 *   <div class="eyebrow">Paddock</div>
 *   <h1>Race weekend.</h1>
 */
.eyebrow {
  font-family: 'DM Mono', 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FF8000;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
}

/* Numeric-readout face. Targets:
 *   - explicit utilities (.mono, .metric, .num-mono)
 *   - lap-time / lap-meta patterns already used in markup
 *   - code/pre/kbd
 * JetBrains Mono ships with tabular numerals by default, plus 'zero'
 * gives the slashed zero typical of telemetry tools. */
code, pre, kbd, samp,
.mono, .metric, .num-mono,
[class*='-time'], [class*='lap-time'], [class*='gap-time'],
[class*='-meta'] code,
.uplot .u-axis,
.uplot .u-cursor-pt {
  font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-feature-settings: 'tnum' on, 'zero' on, 'ss20' on;
  font-variant-numeric: tabular-nums slashed-zero;
}

/* uPlot value labels — when uPlot renders axis tick values, it inherits
 * font-family. Force JetBrains Mono there too. The .uplot rule above
 * covers it but is double-listed for specificity against page styles
 * that set .uplot{font-family:inherit !important}. */
.uplot canvas + div, .uplot .u-value {
  font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
}

/* Section labels — small, muted, lightly tracked. Drop in via class
 * instead of styling every h3 inline. Case-sensitive (no uppercase
 * transform) — the design system favours readable sentence case. */
.section-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted, #a0a0b8);
}

/* Unit suffix on numeric readouts (km/h, °, rpm, s).
 * Smaller, muted, monospace so it aligns under the value. */
.unit {
  font-family: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;
  font-size: 0.72em;
  font-weight: 400;
  color: var(--muted, #a0a0b8);
  margin-left: 0.25em;
  letter-spacing: 0;
}

/* Buttons — slight tightening so labels read as confident, not casual. */
button, .btn {
  letter-spacing: -0.005em;
}

/* Global info accent (cool counterpoint to the orange action accent).
 * Pages already define --blue; this is the "data highlight" cyan that
 * pairs with orange without competing for action attention. */
:root {
  --info: #5ec8ff;
  --info-soft: rgba(94, 200, 255, 0.14);

  /* ─── Spacing scale ──────────────────────────────────────────────
   * Tune the whole site's density from here. Component tokens below
   * pull from this scale or set their own value where they need to
   * deviate. Changing one variable updates every page.
   */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 20px;
  --space-6: 28px;

  /* Sidebar / nav tokens — tightened 2026-05-14 for instrument feel.
   * Bump --nav-item-py to 8-10px if touch targets become a concern. */
  --sidebar-py:    16px;
  --sidebar-px:    18px;
  --nav-item-py:   var(--space-2);   /* 6px — vertical pad inside nav row */
  --nav-item-px-x: 18px;             /* horizontal pad inside nav row     */
  --nav-item-gap:  var(--space-3);   /* gap between icon and label        */

  /* Page header tokens — applies to .page-header + bare h1+p pairs.
   * Tuned for Bebas Neue (single weight, wants positive tracking and
   * more size to read as display).                                   */
  --h1-size:       30px;
  --h1-weight:     400;
  --h1-mb:         var(--space-1);   /* 4px */
  --h1-tracking:   0.5px;
  --page-header-mb: var(--space-4);  /* 14px between header and content */

  /* Card / panel tokens. */
  --card-radius:   10px;
  --card-pad-y:    12px;
  --card-pad-x:    14px;
  --section-gap:   var(--space-3);   /* 12px between stacked sections  */
}

/* ─── Sidebar nav icons ───────────────────────────────────────────
 * Thin-stroke line icons (Lucide-style) replace the emoji nav. CSS
 * masking lets us recolor via currentColor and keeps page markup
 * tiny: <span class="nav-icon" data-icon="dashboard"></span>.
 *
 * Stroke = 1.5px on a 24-unit grid, round caps + joins. Reads as
 * "precision instrument" without going so thin it disappears on
 * non-retina monitors.
 */
/* Base icon system. Applied via:
 *   <span class="icon" data-icon="name"></span>   (inline UI icon)
 *   <span class="nav-icon" data-icon="name"></span> (sidebar)
 *   .icon-sm / .icon-lg  — size variants for headings/badges
 *
 * Monochrome: all icons inherit currentColor, so a button with
 * color:#fff produces a white icon, a muted label produces a muted
 * icon. Same icon, same vibe, no per-icon color management.
 */
.icon[data-icon],
.nav-icon[data-icon] {
  display: inline-block;
  width: 20px; height: 20px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;        mask-repeat: no-repeat;
  -webkit-mask-position: center;         mask-position: center;
  -webkit-mask-size: contain;            mask-size: contain;
  flex-shrink: 0;
  vertical-align: -4px;
  font-size: 0;
}
.icon-sm[data-icon] { width: 16px; height: 16px; vertical-align: -3px; }
.icon-lg[data-icon] { width: 24px; height: 24px; vertical-align: -5px; }
.nav-icon[data-icon] { vertical-align: middle; }
/* Generic data-icon → mask resolver. Any element with a [data-icon]
 * attribute (whether .icon, .nav-icon, or unclassed) gets the mask.
 * Stroke bumped 1.5 → 1.75 for slightly sharper rendering at 20px. */
[data-icon="dashboard"]    { -webkit-mask-image: var(--ic-dashboard);    mask-image: var(--ic-dashboard); }
[data-icon="laps"]         { -webkit-mask-image: var(--ic-laps);         mask-image: var(--ic-laps); }
[data-icon="analysis"]     { -webkit-mask-image: var(--ic-analysis);     mask-image: var(--ic-analysis); }
[data-icon="coaching"]     { -webkit-mask-image: var(--ic-coaching);     mask-image: var(--ic-coaching); }
[data-icon="upload"]       { -webkit-mask-image: var(--ic-upload);       mask-image: var(--ic-upload); }
[data-icon="overlay"]      { -webkit-mask-image: var(--ic-overlay);      mask-image: var(--ic-overlay); }
[data-icon="instructions"] { -webkit-mask-image: var(--ic-instructions); mask-image: var(--ic-instructions); }
[data-icon="admin"]        { -webkit-mask-image: var(--ic-admin);        mask-image: var(--ic-admin); }
[data-icon="subscription"] { -webkit-mask-image: var(--ic-subscription); mask-image: var(--ic-subscription); }
[data-icon="billing"]      { -webkit-mask-image: var(--ic-billing);      mask-image: var(--ic-billing); }
[data-icon="account"]      { -webkit-mask-image: var(--ic-account);      mask-image: var(--ic-account); }
[data-icon="settings"]     { -webkit-mask-image: var(--ic-settings);     mask-image: var(--ic-settings); }
[data-icon="logout"]       { -webkit-mask-image: var(--ic-logout);       mask-image: var(--ic-logout); }
[data-icon="setups"]       { -webkit-mask-image: var(--ic-setups);       mask-image: var(--ic-setups); }
[data-icon="search"]       { -webkit-mask-image: var(--ic-search);       mask-image: var(--ic-search); }
[data-icon="speaker"]      { -webkit-mask-image: var(--ic-speaker);      mask-image: var(--ic-speaker); }
[data-icon="message"]      { -webkit-mask-image: var(--ic-message);      mask-image: var(--ic-message); }
[data-icon="check"]        { -webkit-mask-image: var(--ic-check);        mask-image: var(--ic-check); }
[data-icon="x"]            { -webkit-mask-image: var(--ic-x);            mask-image: var(--ic-x); }
[data-icon="menu"]         { -webkit-mask-image: var(--ic-menu);         mask-image: var(--ic-menu); }
[data-icon="flag"]         { -webkit-mask-image: var(--ic-flag);         mask-image: var(--ic-flag); }
[data-icon="eye"]          { -webkit-mask-image: var(--ic-eye);          mask-image: var(--ic-eye); }
[data-icon="eye-off"]      { -webkit-mask-image: var(--ic-eye-off);      mask-image: var(--ic-eye-off); }
[data-icon="mic"]          { -webkit-mask-image: var(--ic-mic);          mask-image: var(--ic-mic); }
[data-icon="radio"]        { -webkit-mask-image: var(--ic-radio);        mask-image: var(--ic-radio); }
[data-icon="check-circle"] { -webkit-mask-image: var(--ic-check-circle); mask-image: var(--ic-check-circle); }
[data-icon="sparkles"]     { -webkit-mask-image: var(--ic-sparkles);     mask-image: var(--ic-sparkles); }
[data-icon="alert"]        { -webkit-mask-image: var(--ic-alert);        mask-image: var(--ic-alert); }
[data-icon="pin"]          { -webkit-mask-image: var(--ic-pin);          mask-image: var(--ic-pin); }
[data-icon="folder"]       { -webkit-mask-image: var(--ic-folder);       mask-image: var(--ic-folder); }
[data-icon="download"]     { -webkit-mask-image: var(--ic-download);     mask-image: var(--ic-download); }
[data-icon="wrench"]       { -webkit-mask-image: var(--ic-wrench);       mask-image: var(--ic-wrench); }
[data-icon="users"]        { -webkit-mask-image: var(--ic-users);        mask-image: var(--ic-users); }
[data-icon="map"]          { -webkit-mask-image: var(--ic-map);          mask-image: var(--ic-map); }
[data-icon="fuel"]         { -webkit-mask-image: var(--ic-fuel);         mask-image: var(--ic-fuel); }
[data-icon="tire"]         { -webkit-mask-image: var(--ic-tire);         mask-image: var(--ic-tire); }
[data-icon="plug"]         { -webkit-mask-image: var(--ic-plug);         mask-image: var(--ic-plug); }
[data-icon="monitor"]      { -webkit-mask-image: var(--ic-monitor);      mask-image: var(--ic-monitor); }
[data-icon="code"]         { -webkit-mask-image: var(--ic-code);         mask-image: var(--ic-code); }
[data-icon="clipboard"]    { -webkit-mask-image: var(--ic-clipboard);    mask-image: var(--ic-clipboard); }
[data-icon="broadcast"]    { -webkit-mask-image: var(--ic-broadcast);    mask-image: var(--ic-broadcast); }
[data-icon="circle-filled"] { -webkit-mask-image: var(--ic-circle-filled); mask-image: var(--ic-circle-filled); }
[data-icon="mail"]         { -webkit-mask-image: var(--ic-mail);         mask-image: var(--ic-mail); }
[data-icon="gift"]         { -webkit-mask-image: var(--ic-gift);         mask-image: var(--ic-gift); }
[data-icon="brain"]        { -webkit-mask-image: var(--ic-brain);        mask-image: var(--ic-brain); }
[data-icon="trophy"]       { -webkit-mask-image: var(--ic-trophy);       mask-image: var(--ic-trophy); }
[data-icon="traffic-light"] { -webkit-mask-image: var(--ic-traffic-light); mask-image: var(--ic-traffic-light); }
[data-icon="cloud-rain"]   { -webkit-mask-image: var(--ic-cloud-rain);   mask-image: var(--ic-cloud-rain); }
[data-icon="zap"]          { -webkit-mask-image: var(--ic-zap);          mask-image: var(--ic-zap); }
[data-icon="handshake"]    { -webkit-mask-image: var(--ic-handshake);    mask-image: var(--ic-handshake); }
[data-icon="lock"]         { -webkit-mask-image: var(--ic-lock);         mask-image: var(--ic-lock); }
[data-icon="bell"]         { -webkit-mask-image: var(--ic-bell);         mask-image: var(--ic-bell); }
[data-icon="ghost"]        { -webkit-mask-image: var(--ic-ghost);        mask-image: var(--ic-ghost); }
[data-icon="ghost-track"]  { -webkit-mask-image: var(--ic-ghost-track);  mask-image: var(--ic-ghost-track); }
[data-icon="categories"]   { -webkit-mask-image: var(--ic-categories);   mask-image: var(--ic-categories); }
[data-icon="car"]          { -webkit-mask-image: var(--ic-car);          mask-image: var(--ic-car); }
[data-icon="track"]        { -webkit-mask-image: var(--ic-track);        mask-image: var(--ic-track); }
[data-icon="drift"]        { -webkit-mask-image: var(--ic-drift);        mask-image: var(--ic-drift); }
[data-icon="book"]         { -webkit-mask-image: var(--ic-book);         mask-image: var(--ic-book); }
[data-icon="external"]     { -webkit-mask-image: var(--ic-external);     mask-image: var(--ic-external); }

:root {
  /* All icons: 24-unit grid, stroke 1.75, no fill, round caps + joins. */
  --ic-dashboard:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1'/><rect x='14' y='3' width='7' height='7' rx='1'/><rect x='14' y='14' width='7' height='7' rx='1'/><rect x='3' y='14' width='7' height='7' rx='1'/></svg>");
  --ic-laps:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><line x1='8' y1='6' x2='21' y2='6'/><line x1='8' y1='12' x2='21' y2='12'/><line x1='8' y1='18' x2='21' y2='18'/><circle cx='4' cy='6' r='1' fill='black' stroke='none'/><circle cx='4' cy='12' r='1' fill='black' stroke='none'/><circle cx='4' cy='18' r='1' fill='black' stroke='none'/></svg>");
  --ic-analysis:     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><line x1='6' y1='20' x2='6' y2='16'/><line x1='12' y1='20' x2='12' y2='10'/><line x1='18' y1='20' x2='18' y2='4'/></svg>");
  --ic-coaching:     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='5'/><circle cx='12' cy='12' r='1' fill='black' stroke='none'/></svg>");
  --ic-upload:       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='17 8 12 3 7 8'/><line x1='12' y1='3' x2='12' y2='15'/></svg>");
  --ic-overlay:      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><rect x='12' y='12' width='7' height='5' rx='1'/></svg>");
  --ic-instructions: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
  --ic-admin:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/></svg>");
  --ic-subscription: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><line x1='2' y1='10' x2='22' y2='10'/></svg>");
  --ic-billing:      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='9' y1='13' x2='15' y2='13'/><line x1='9' y1='17' x2='15' y2='17'/></svg>");
  --ic-account:      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
  --ic-settings:     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h.09a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v.09a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>");
  --ic-logout:       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>");
  --ic-setups:       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/></svg>");

  --ic-search:       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  --ic-speaker:      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><polygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5' fill='black' stroke='none'/><path d='M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07'/></svg>");
  --ic-message:      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/></svg>");
  --ic-check:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  --ic-x:            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
  --ic-menu:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='3' y1='6' x2='21' y2='6'/><line x1='3' y1='12' x2='21' y2='12'/><line x1='3' y1='18' x2='21' y2='18'/></svg>");
  --ic-flag:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/><line x1='4' y1='22' x2='4' y2='15'/></svg>");
  --ic-eye:          url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>");
  --ic-eye-off:      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/><line x1='1' y1='1' x2='23' y2='23'/></svg>");
  --ic-mic:          url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/><path d='M19 10v2a7 7 0 0 1-14 0v-2'/><line x1='12' y1='19' x2='12' y2='23'/><line x1='8' y1='23' x2='16' y2='23'/></svg>");
  --ic-radio:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='2'/><path d='M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14'/></svg>");
  --ic-check-circle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><polyline points='22 4 12 14.01 9 11.01'/></svg>");
  --ic-sparkles:     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5z'/><path d='M19 14l.75 2.25L22 17l-2.25.75L19 20l-.75-2.25L16 17l2.25-.75z'/><path d='M5 17l.75 2.25L8 20l-2.25.75L5 23l-.75-2.25L2 20l2.25-.75z'/></svg>");
  --ic-alert:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><circle cx='12' cy='17' r='0.6' fill='black' stroke='none'/></svg>");
  --ic-pin:          url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='17' x2='12' y2='22'/><path d='M5 17h14l-1.7-3.4A2 2 0 0 1 17 12.7V7a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v5.7c0 .35-.09.69-.27.99L5 17z'/></svg>");
  --ic-folder:       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/></svg>");
  --ic-download:     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
  --ic-wrench:       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/></svg>");
  --ic-users:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
  --ic-map:          url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><polygon points='1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6'/><line x1='8' y1='2' x2='8' y2='18'/><line x1='16' y1='6' x2='16' y2='22'/></svg>");
  --ic-fuel:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><line x1='3' y1='22' x2='15' y2='22'/><line x1='4' y1='9' x2='14' y2='9'/><path d='M14 22V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v18'/><path d='M14 13h2a2 2 0 0 1 2 2v2a2 2 0 0 0 2 2 2 2 0 0 0 2-2V9.83a2 2 0 0 0-.59-1.42L18 5'/></svg>");
  --ic-tire:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='4'/><line x1='12' y1='3' x2='12' y2='8'/><line x1='12' y1='16' x2='12' y2='21'/><line x1='3' y1='12' x2='8' y2='12'/><line x1='16' y1='12' x2='21' y2='12'/></svg>");
  --ic-plug:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M9 2v6m6-6v6'/><path d='M5 8h14v2a7 7 0 0 1-7 7 7 7 0 0 1-7-7z'/><line x1='12' y1='17' x2='12' y2='22'/></svg>");
  --ic-monitor:      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='3' width='20' height='14' rx='2'/><line x1='8' y1='21' x2='16' y2='21'/><line x1='12' y1='17' x2='12' y2='21'/></svg>");
  --ic-code:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><polyline points='16 18 22 12 16 6'/><polyline points='8 6 2 12 8 18'/></svg>");
  --ic-clipboard:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><rect x='8' y='2' width='8' height='4' rx='1'/></svg>");
  --ic-broadcast:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4.93 19.07a10 10 0 0 1 0-14.14M19.07 4.93a10 10 0 0 1 0 14.14M7.76 16.24a6 6 0 0 1 0-8.49M16.24 7.76a6 6 0 0 1 0 8.49'/><circle cx='12' cy='12' r='2' fill='black' stroke='none'/></svg>");
  --ic-circle-filled:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='6' fill='black'/></svg>");

  --ic-mail:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22 6 12 13 2 6'/></svg>");
  --ic-gift:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 12 20 22 4 22 4 12'/><rect x='2' y='7' width='20' height='5'/><line x1='12' y1='22' x2='12' y2='7'/><path d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/></svg>");
  --ic-brain:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M9.5 2a2.5 2.5 0 0 1 2.5 2.5v15A2.5 2.5 0 0 1 9.5 22a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1-1-4.79 2.5 2.5 0 0 1 1-4.79A2.5 2.5 0 0 1 7 4.5 2.5 2.5 0 0 1 9.5 2z'/><path d='M14.5 2a2.5 2.5 0 0 0-2.5 2.5v15a2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0 1-4.79 2.5 2.5 0 0 0-1-4.79A2.5 2.5 0 0 0 17 4.5 2.5 2.5 0 0 0 14.5 2z'/></svg>");
  --ic-trophy:       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/><path d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/><path d='M4 22h16'/><path d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/><path d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/><path d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/></svg>");
  --ic-traffic-light:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='7' y='2' width='10' height='20' rx='4'/><circle cx='12' cy='7' r='1.5' fill='black' stroke='none'/><circle cx='12' cy='12' r='1.5'/><circle cx='12' cy='17' r='1.5'/></svg>");
  --ic-cloud-rain:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><line x1='16' y1='17' x2='16' y2='21'/><line x1='8' y1='17' x2='8' y2='21'/><line x1='12' y1='19' x2='12' y2='23'/><path d='M20 14.66A4 4 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25'/></svg>");
  --ic-zap:          url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><polygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/></svg>");
  --ic-handshake:    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M11 17l-3 3a2.83 2.83 0 0 1-4-4l5-5'/><path d='M21 12l-5 5-9-9 5-5a2 2 0 0 1 3 0l6 6a2 2 0 0 1 0 3z'/><path d='M14 6l3 3'/></svg>");
  --ic-lock:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");

  /* Bell — notifications nav */
  --ic-bell:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/><path d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/></svg>");

  /* Ghost — sidebar Ghost nav. Classic pac-man-style ghost: rounded dome
   * top, three-point wavy bottom skirt, two eye dots. */
  --ic-ghost:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M5 11a7 7 0 0 1 14 0v9l-2.5-1.5L14 20l-2-1.5L10 20l-2.5-1.5L5 20z'/><circle cx='9.5' cy='11' r='1' fill='black' stroke='none'/><circle cx='14.5' cy='11' r='1' fill='black' stroke='none'/></svg>");

  /* Ghost-on-track — Laps page action button. Oval racing-track outline
   * with a small ghost glyph in the middle. Reads as 'set this lap as
   * your iRacing ghost' at glance. */
  --ic-ghost-track:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><ellipse cx='12' cy='12' rx='10' ry='6.5'/><path d='M9 13a3 3 0 0 1 6 0v4l-1.2-.7L12.5 17 11 16.3 9 17z'/><circle cx='10.7' cy='13' r='0.6' fill='black' stroke='none'/><circle cx='13.3' cy='13' r='0.6' fill='black' stroke='none'/></svg>");

  /* Categories — stack of cards / list-of-classes glyph for Car
   * Categories nav. Three stacked rectangles. */
  --ic-categories:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='5' rx='1'/><rect x='5' y='11' width='14' height='4' rx='1'/><rect x='7' y='17' width='10' height='3' rx='1'/></svg>");

  /* Car — side silhouette for the Cars nav (full iRacing car library).
   * Sloped roof, two visible wheels, a hint of a windscreen. */
  --ic-car:          url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><line x1='2.5' y1='16' x2='5' y2='16'/><path d='M5 16 L9 15 L11 12.5 L14 12.5 L16 15 L19 15.5'/><line x1='19' y1='15.5' x2='19' y2='10.5'/><line x1='16.5' y1='10.5' x2='21.5' y2='10.5'/><line x1='5' y1='18' x2='19' y2='18'/><circle cx='7.5' cy='18' r='2.3'/><circle cx='17' cy='18' r='2.3'/></svg>");

  /* Track — racing circuit. Checkered-flag on a pole. */
  --ic-track:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M6 21V4'/><path d='M6 5h12l-3 4 3 4H6'/></svg>");
  /* Drift — a tapering "slide / tornado" funnel, the angle of a drift. */
  --ic-drift:        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><circle cx='16' cy='13' r='5'/><path d='M2 7h7'/><path d='M2 11h6'/><path d='M2 15h4.5'/></svg>");

  /* Book — manual / docs button. Open-book glyph. */
  --ic-book:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/><path d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/></svg>");

  /* External-link — denotes 'opens off-site / on iRacing.com' for the
   * Info button on car cards. Arrow exiting a frame. */
  --ic-external:     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>");
}