:root {
  --toyota-red: #eb0a1e;
  --toyota-red-dark: #c7071a;
  --toyota-charcoal: #242424;
  --toyota-steel: #62666a;
  --toyota-mist: #e9eaeb;
  --toyota-paper: #f7f7f7;
  --warehouse-ink: var(--toyota-charcoal);
  --bs-primary: var(--toyota-red);
  --bs-primary-rgb: 235, 10, 30;
  --bs-link-color: var(--toyota-red);
  --bs-link-hover-color: var(--toyota-red-dark);
  --bs-focus-ring-color: rgb(235 10 30 / 25%);
}

body {
  background: linear-gradient(135deg, #f7f7f7 0%, #e2e3e4 100%);
  color: var(--warehouse-ink);
  min-height: 100vh;
}

.app-header p:first-child {
  color: var(--toyota-red);
  letter-spacing: 0;
}

.panel {
  background: #fff;
  border: 1px solid #d2d4d5;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgb(36 36 36 / 8%);
  padding: 1.5rem;
}

.btn-primary,
.btn-outline-primary {
  --bs-btn-color: var(--toyota-red);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--toyota-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--toyota-red);
  --bs-btn-hover-border-color: var(--toyota-red);
  --bs-btn-focus-shadow-rgb: 235, 10, 30;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--toyota-red-dark);
  --bs-btn-active-border-color: var(--toyota-red-dark);
  --bs-btn-active-shadow: inset 0 3px 5px rgb(36 36 36 / 13%);
  --bs-btn-disabled-color: var(--toyota-steel);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--toyota-steel);
}

.form-range::-webkit-slider-thumb {
  background-color: var(--toyota-red);
}

.form-range::-moz-range-thumb {
  background-color: var(--toyota-red);
}

.control-tooltip {
  position: fixed;
  z-index: 2000;
  max-width: min(360px, calc(100vw - 16px));
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--toyota-charcoal);
  border-radius: 4px;
  background: var(--toyota-charcoal);
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: 0 4px 12px rgb(36 36 36 / 20%);
}

.control-tooltip[hidden] {
  display: none;
}