:root {
  /* Stack palette */
  --navy-dark:    #1a1a2e;
  --navy-mid:     #16213e;
  --navy-light:   #0f3460;
  --gold:         #c9a84c;
  --text-primary: #e8e8e8;
  --text-muted:   #9ca3af;
  --bg-content:   #f4f5f7;
  --border:       rgba(255, 255, 255, 0.1);

  /* KDS-specific — dark board theme */
  --kds-bg:       #0d0d1a;
  --kds-card:     #1a1a2e;
  --kds-border:   rgba(255, 255, 255, 0.08);
  --kds-green:    #22c55e;
  --kds-amber:    #f59e0b;
  --kds-red:      #ef4444;
  --kds-blue:     #3b82f6;
  --kds-sent:     #6b7280;

  /* App primary — teal (shared with kitchen for recipe images etc.) */
  --app-primary:  #ea580c; /* kds orange — distinct from kitchen's teal, D5 */
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, #root {
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--kds-bg);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* KDS is fullscreen — no sidebar layout needed */

/* Spinner */
.spinner {
  border: 3px solid rgba(255,255,255,0.15);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Shared badge style used by KDS status indicators */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-green  { background: rgba(34,197,94,0.15);  color: var(--kds-green); }
.badge-amber  { background: rgba(245,158,11,0.15); color: var(--kds-amber); }
.badge-red    { background: rgba(239,68,68,0.15);  color: var(--kds-red); }
.badge-blue   { background: rgba(59,130,246,0.15); color: var(--kds-blue); }
.badge-grey   { background: rgba(107,114,128,0.15);color: var(--kds-sent); }

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}
.btn:hover { opacity: 0.85; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary { background: var(--gold); color: #000; }
.btn-ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--border); }