/* LeBurger Küchen-Monitor — Design Tokens */

:root {
  /* Neutral base */
  --color-bg-page: oklch(97% 0.002 240);
  --color-bg-card: #ffffff;
  --color-border: oklch(90% 0.002 240);
  --color-border-subtle: oklch(94% 0.002 240);
  --color-text-primary: oklch(20% 0.015 240);
  --color-text-secondary: oklch(48% 0.002 240);
  --color-sidebar-bg: oklch(16% 0.01 40);
  --color-sidebar-text: oklch(88% 0.002 240);
  --color-sidebar-text-muted: oklch(60% 0.002 240);
  --color-sidebar-border: oklch(28% 0.002 240);

  /* Brand accent (LeBurger magenta) */
  --color-accent: oklch(48% 0.21 340);
  --color-accent-dark: oklch(38% 0.21 340);
  --color-accent-tint-bg: oklch(94% 0.05 340);
  --color-accent-tint-text: oklch(42% 0.18 340);

  /* Status / Ampel — fixed, never themed */
  --color-status-green-dot: oklch(58% 0.15 145);
  --color-status-green-text: oklch(38% 0.1 145);
  --color-status-green-bg: oklch(95% 0.04 145);
  --color-status-green-border: oklch(82% 0.08 145);

  --color-status-amber-dot: oklch(72% 0.16 80);
  --color-status-amber-text: oklch(42% 0.1 80);
  --color-status-amber-bg: oklch(95% 0.06 80);
  --color-status-amber-border: oklch(82% 0.1 80);

  --color-status-red-dot: oklch(55% 0.2 25);
  --color-status-red-text: oklch(38% 0.14 25);
  --color-status-red-bg: oklch(95% 0.05 25);
  --color-status-red-border: oklch(82% 0.09 25);

  /* Typography */
  --font-family: 'Inter', system-ui, sans-serif;
  --font-size-h1: 26px;
  --font-size-card-title: 15px;
  --font-size-kpi: 34px;
  --font-size-body: 13.5px;
  --font-size-meta: 12.5px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;

  /* Radius */
  --radius-card: 16px;
  --radius-button: 9px;
  --radius-badge: 6px;
  --radius-input: 8px;
}

/* --- Component reference classes (translate to your framework's components) --- */

.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 20px 24px;
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
  font-weight: var(--font-weight-bold);
  font-size: 14px;
  padding: 10px 20px;
  border-radius: var(--radius-button);
  border: none;
  cursor: pointer;
}
.btn-primary:hover { background: var(--color-accent-dark); }

.btn-secondary {
  background: var(--color-border-subtle);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  font-size: 13.5px;
  padding: 9px 18px;
  border-radius: var(--radius-button);
  border: none;
  cursor: pointer;
}

.badge-accent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-accent-tint-bg);
  color: var(--color-accent-tint-text);
  font-size: 11.5px;
  font-weight: var(--font-weight-bold);
  padding: 3px 9px;
  border-radius: var(--radius-badge);
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}
.status-dot--green { background: var(--color-status-green-dot); }
.status-dot--amber { background: var(--color-status-amber-dot); }
.status-dot--red { background: var(--color-status-red-dot); }

.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid transparent;
}
.banner--red {
  background: var(--color-status-red-bg);
  border-color: var(--color-status-red-border);
  color: var(--color-status-red-text);
}
.banner--amber {
  background: var(--color-status-amber-bg);
  border-color: var(--color-status-amber-border);
  color: var(--color-status-amber-text);
}
.banner--neutral {
  background: oklch(95% 0.002 240);
  border-color: oklch(88% 0.002 240);
  color: var(--color-text-secondary);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-body);
}
.table thead th {
  text-align: left;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 20px;
}
.table tbody tr { border-top: 1px solid var(--color-border-subtle); }
.table tbody td { padding: 11px 20px; }
.table :is(td, th):not(:first-child):not(:last-child) { padding-left: 12px; padding-right: 12px; }

.input {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: 8px 10px;
  font-size: 14px;
  font-family: var(--font-family);
  width: 100%;
}

.sidebar {
  width: 248px;
  background: var(--color-sidebar-bg);
  color: var(--color-sidebar-text);
  padding: 24px 16px;
}
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.sidebar-nav-item:hover { background: oklch(22% 0.002 240); }