:root {
  /* Racing palette */
  --r-primary:        #CE2B37;
  --r-primary-hover:  #B31F2A;
  --r-primary-press:  #9A1822;
  --r-secondary:      #1A3D7C;
  --r-link:           #1F5FBF;
  --r-pop:            #E9A93C;

  /* Action color — routine buttons/focus; --r-primary stays reserved for the one hero action */
  --r-action:         var(--r-secondary);
  --r-action-hover:   #173468;
  --r-action-press:   #112A55;

  /* Surfaces */
  --r-bg:        #E7EBF1;
  --r-bg-2:      #DCE2EA;
  --r-surface:   #FFFFFF;
  --r-surface-2: #F4F6FA;

  /* Chrome (dark, high contrast — stays dark in both themes) */
  --r-appbar:      #14171C;
  --r-drawer:      #1C2027;
  --r-drawer-2:    #262B33;
  --r-onbar:       #FFFFFF;
  --r-onbar-2:     #AEB6C2;
  --r-onbar-muted: rgba(255,255,255,0.45);

  /* Text */
  --r-text:        #161A20;
  --r-text-2:      #434B57;
  --r-text-muted:  #6A7384;

  /* Borders */
  --r-border:       rgba(22,26,32,0.12);
  --r-border-soft:  rgba(22,26,32,0.07);
  --r-border-dark:  rgba(255,255,255,0.10);

  /* Translucent tint for chips/wells that sit on an unknown surface. Must be a token, not a
     literal rgba: a dark ink is invisible against dark-mode surfaces, so the alpha has to flip
     to white below. */
  --r-fill-soft:    rgba(22,26,32,0.06);

  /* Condition colors (1 Mint → 5 Damaged) */
  --cond-1: #2E7D46;
  --cond-2: #6FA05E;
  --cond-3: #1F9E8F;
  --cond-4: #E0992E;
  --cond-5: #CE2B37;

  /* Status (set completion / import review) */
  --status-complete: #2E7D46;
  --status-new-set:  #1A3D7C;
  --status-dup:       #E0992E;
  --status-unknown:   #CE2B37;

  /* Semantic aliases */
  --surface-page:   var(--r-bg);
  --surface-card:   var(--r-surface);
  --surface-inset:  var(--r-surface-2);
  --text-body:      var(--r-text);
  --text-heading:   var(--r-text);
  --text-secondary: var(--r-text-2);
  --text-caption:   var(--r-text-muted);
  --border-default: var(--r-border);
  --accent:         var(--r-primary);
  --focus-ring:     0 0 0 3px rgba(206,43,55,0.30);

  /* Spacing scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 14px;
  --sp-5: 16px;
  --sp-6: 20px;
  --sp-7: 24px;
  --sp-8: 32px;

  /* Radius */
  --radius-xs:   3px;
  --radius-sm:   4px;
  --radius:      6px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* Border widths */
  --bw-hairline: 1px;
  --bw-stripe:   3px;
  --bw-accent:   4px;

  /* Shadows (soft, cool-tinted) */
  --shadow-card:    0 1px 2px rgba(20,28,46,0.06), 0 1px 0 rgba(20,28,46,0.02);
  --shadow-pop:     0 4px 16px rgba(20,28,46,0.10);
  --shadow-modal:   0 24px 60px rgba(8,12,20,0.34), 0 0 0 1px var(--r-border);
  --shadow-scanner: inset 0 0 0 2px rgba(206,43,55,0.22);

  /* Layout */
  --appbar-h:  56px;
  --drawer-w:  232px;
  --control-h: 38px;
  --pill-h:    30px;
  --page-pad:  20px 24px;

  /* Type */
  --font-display: 'Big Shoulders Display', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: var(--font-display);
  --sans:    var(--font-sans);
  --mono:    var(--font-mono);

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* Type ramp (px) */
  --fs-page-title: 32px;
  --fs-stat:       46px;
  --fs-stat-sm:    32px;
  --fs-title:      20px;
  --fs-section:    14px;
  --fs-body-lg:    15px;
  --fs-body:       13px;
  --fs-label:      10px;
  --fs-mono:       11px;
  --fs-mono-lg:    16px;

  /* Tracking */
  --ls-tight:   -0.02em;
  --ls-label:   1.4px;
  --ls-section: 1.2px;
  --ls-button:  0.8px;

  /* Line height */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.5;
}

:root[data-theme="dark"] {
  --r-bg:        #14171C;
  --r-bg-2:      #0F1216;
  --r-surface:   #1C2027;
  --r-surface-2: #232830;
  --r-drawer:    #0F1216;
  --r-drawer-2:  #232830;
  --r-text:        #F2F4F8;
  --r-text-2:      #B7BFCB;
  --r-text-muted:  #818A98;
  --r-border:       rgba(255,255,255,0.12);
  --r-border-soft:  rgba(255,255,255,0.06);
  --r-fill-soft:    rgba(255,255,255,0.10);
  --r-link:         #6AA1F0;
}

@keyframes blink { 50% { opacity: 0; } }

/* Global body */
html, body {
  background: var(--r-bg);
  color: var(--r-text);
  font-family: var(--sans);
  font-size: var(--fs-body);
}

/* MudBlazor overrides — align with v2 tokens */
.mud-appbar {
  background: var(--r-appbar) !important;
  border-bottom: 2px solid var(--r-primary) !important;
  box-shadow: none !important;
}

.mud-drawer {
  background: var(--r-drawer) !important;
  border-right: 1px solid var(--r-border) !important;
  box-shadow: none !important;
  width: var(--drawer-w) !important;
}

.mud-main-content {
  background: var(--r-bg) !important;
}

/* v2 button style */
.mud-button-root.mud-button {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  border-radius: var(--radius);
}

.mud-button-filled-primary {
  background-color: var(--r-primary) !important;
  color: #fff !important;
}

.mud-button-filled-primary:hover {
  background-color: var(--r-primary-hover) !important;
}

/* v2 form fields */
.mud-input-root .mud-input-slot {
  min-height: var(--control-h);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: var(--fs-body);
}

/* --display (Big Shoulders Display) is a condensed headline face -- fine for badges/section
   labels set in all-caps at 10-14px, but the narrow letterforms are exactly what read as "too
   narrow" on field labels. --sans (Helvetica) is the same face body copy uses and stays legible
   at small sizes. */
.mud-input-label {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* v2: outlined fields always show the label floated into the border notch — never as
   inline placeholder-lookalike text — regardless of focus/value/Placeholder state.
   The previous fix raised .mud-input-label's font-size to --fs-body (13px) but then scaled
   the notch label down by 0.85 on top of it (~11px effective) -- two changes fighting each
   other, which is why bumping the base size alone didn't read as bigger. Setting the notch
   size directly (no multiplier) makes the two rules agree on one final size instead of
   compounding. Position kept close to MudBlazor's own shrunk transform. */
.mud-input-label-outlined {
  transform: translate(14px, -9px) !important;
  font-size: var(--fs-section) !important;
}

/* v2 table headers */
.mud-table-head .mud-table-cell,
.mud-data-grid-header-cell {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-section);
  text-transform: uppercase;
  background: var(--r-bg);
}

/* Alternating table rows */
.mud-table-body .mud-table-row:nth-child(even),
.mud-data-grid-row:nth-child(even) {
  background: rgba(0,0,0,0.012);
}

/* Card/Paper/Dialog borders */
.mud-card, .mud-paper, .mud-dialog {
  border: 1px solid var(--r-border);
  border-radius: var(--radius);
  box-shadow: none;
  background: var(--r-surface);
}

/* NavMenu active item */
.mud-nav-link.active {
  background: var(--r-surface) !important;
  box-shadow: inset var(--bw-stripe) 0 0 var(--r-primary) !important;
  font-weight: 600;
}

/* Focus ring — buttons only. Inputs are excluded: MudBlazor's own outlined variant already
   draws a rounded 2px primary-color border on :focus-within (.mud-input-outlined-border), and
   .mud-input-root has no border-radius of its own, so adding this square box-shadow on top of
   it produced a visible double outline (rounded native border + square glow). */
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
}

.mud-input-root:focus-within {
  outline: none !important;
}

/* Shared list-screen chrome — GarageList/ManufacturerList/ModelSetList/CarList/CarModelList.
   Only rules genuinely identical across all five; outer wrapper naming, title text, filter
   bars and tables diverge per component and stay in each component's own <style> block. */
.skel { border-radius: 6px; background: var(--r-border); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

.page-title-row,
.sets-title-row,
.cars-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.btn-primary-sm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--r-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary-sm:hover { background: var(--r-primary-hover); }

/* margin:16px is a per-component add-on (present on 4 of 5; CarModelList omits it) so it
   is NOT in this shared rule — components that need it declare it locally. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  border: 1px dashed var(--r-border);
  border-radius: 6px;
}
.empty-state-sub { margin-top: 4px; color: var(--r-text-muted); font-size: 12px; opacity: 0.75; }