:root {
  /* ── Brand ─────────────────────────────────────────── */
  --color-orange:      #F07848;
  --color-orange-dark: #D4602E;
  --color-blue:        #7EC8E3;
  --color-blue-dark:   #5BB0D4;

  /* ── Backgrounds ────────────────────────────────────── */
  --color-bg:          #FAFAF8;
  --color-bg-alt:      #F5F0EB;
  --color-bg-navy:     #1A1A2E;

  /* ── Pastels ────────────────────────────────────────── */
  --color-pastel-orange: #FFE8DC;
  --color-pastel-blue:   #DCF0F8;
  --color-pastel-green:  #D4EDDA;
  --color-pastel-red:    #FFEBEE;

  /* ── Text ───────────────────────────────────────────── */
  --color-text:        #1A1A2E;
  --color-text-muted:  #6B7280;
  --color-text-light:  #FAFAF8;

  /* ── Status ─────────────────────────────────────────── */
  --color-waiting:     #6B7280;
  --color-ready:       #1B5E20;
  --color-ready-bg:    #D4EDDA;
  --color-collected:   #5BB0D4;
  --color-cancelled:   #B71C1C;
  --color-cancelled-bg:#FFEBEE;

  /* ── Borders & shadows ──────────────────────────────── */
  --color-border:       #E5E1DC;
  --color-border-focus: #F07848;
  --shadow-card: 0 2px 8px rgba(26,26,46,0.08);
  --shadow-btn:  0 2px 4px rgba(240,120,72,0.25);

  /* ── Radius ─────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* ── Typography ─────────────────────────────────────── */
  --font-display: 'Kalam', cursive;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

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

body {
  font-family: var(--font-body);
  color: var(--color-text);
}

/* Primary button — orange */
.btn-primary {
  background: var(--color-orange); color: white;
  border-radius: var(--radius-pill); padding: 14px 28px;
  font-weight: 600; box-shadow: var(--shadow-btn); border: none;
  transition: background 150ms ease, transform 100ms ease;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
}
.btn-primary:hover  { background: var(--color-orange-dark); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { background: var(--color-pastel-orange); box-shadow: none; cursor: default; }

/* Secondary button — blue outline */
.btn-secondary {
  background: white; color: var(--color-blue-dark);
  border: 2px solid var(--color-blue); border-radius: var(--radius-pill);
  padding: 12px 26px; font-weight: 600;
  transition: background 150ms ease;
  cursor: pointer;
}
.btn-secondary:hover { background: var(--color-pastel-blue); }

/* Ready button — big green */
.btn-ready {
  background: var(--color-ready); color: white;
  border-radius: var(--radius-md); padding: 16px 32px;
  font-size: 18px; font-weight: 700; border: none;
  box-shadow: 0 3px 10px rgba(27,94,32,0.3);
  transition: background 150ms ease, transform 100ms ease;
  cursor: pointer;
}
.btn-ready:hover  { background: #2E7D32; transform: translateY(-1px); }

/* Collect button — solid blue (distinct from ready green) */
.btn-collect {
  background: var(--color-blue-dark); color: white;
  border-radius: var(--radius-md); padding: 16px 32px;
  font-size: 18px; font-weight: 700; border: none;
  box-shadow: 0 3px 10px rgba(91,176,212,0.35);
  transition: background 150ms ease, transform 100ms ease;
  cursor: pointer;
}
.btn-collect:hover  { background: #4A9CBE; transform: translateY(-1px); }

/* Danger button — solid red (cancel) */
.btn-danger {
  background: var(--color-cancelled); color: white;
  border: none; font-weight: 700; padding: 12px 22px;
  border-radius: var(--radius-md); font-size: 15px;
  box-shadow: 0 2px 8px rgba(183,28,28,0.25);
  transition: background 150ms ease;
  cursor: pointer;
}
.btn-danger:hover { background: #991515; }

/* Card */
.card {
  background: white; border-radius: var(--radius-md);
  padding: 20px; box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
}

/* Order card — left border color = status */
.order-card { border-left: 4px solid var(--color-waiting); }
.order-card.status-waiting   { border-left-color: var(--color-waiting);   background: white; }
.order-card.status-ready     { border-left-color: var(--color-ready);     background: var(--color-pastel-green); }
.order-card.status-notified  { border-left-color: var(--color-blue);      background: var(--color-pastel-blue); }
.order-card.status-cancelled { border-left-color: var(--color-cancelled); background: var(--color-pastel-red); }

/* Input */
.input {
  background: var(--color-bg-alt); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 14px 16px;
  font-size: 16px; color: var(--color-text); outline: none; width: 100%;
  transition: border-color 150ms ease;
}
.input:focus { border-color: var(--color-border-focus); box-shadow: 0 0 0 3px rgba(240,120,72,0.12); }

/* Order number — mono large */
.order-number {
  font-family: var(--font-mono);
  font-size: clamp(28px, 8vw, 48px);
  font-weight: 700; color: var(--color-text); letter-spacing: 0.04em;
}

/* Pulse dot — auto-refresh indicator */
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-blue); display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}

/* Status page background transition */
.status-page { transition: background-color 0.4s ease; }

/* ── Animations ───────────────────────────────────────── */

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.anim-float { animation: float 3s ease-in-out infinite; }

@keyframes bounce-in {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.08); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}
.anim-bounce-in { animation: bounce-in 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }

@keyframes pop-in {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.anim-pop-in { animation: pop-in 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-6px); }
  80%       { transform: translateX(6px); }
}
.anim-shake { animation: shake 0.4s ease-in-out; }

@keyframes hourglass-spin {
  0%,  45%  { transform: rotate(0deg); }
  55%, 100% { transform: rotate(180deg); }
}
.anim-hourglass { animation: hourglass-spin 2.4s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.85); }
}
.anim-pulse { animation: pulse 2s ease-in-out infinite; }

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-fade-up { animation: fade-in-up 0.3s ease forwards; }

/* Legacy aliases (UI spec v1.0) */
.icon-float { animation: float 3s ease-in-out infinite; }
.icon-bounce-in { animation: bounce-in 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.icon-pop-in { animation: pop-in 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.shake { animation: shake 0.4s ease-in-out; }
.icon-hourglass.active { animation: hourglass-spin 2.4s ease-in-out infinite; }
.fade-in-up { animation: fade-in-up 0.3s ease forwards; }

/* Respect reduced-motion preferences globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}