/* Direction: KitchenCue — warm trattoria cream, tomato red, cheesy yellow, basil green, rounded Fredoka display */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #fff8ee;
  --surface: #ffffff;
  --surface-2: #ffe8d6;
  --border: #f0d8c0;
  --border-strong: #bbb0a8;
  --ink: #2b2420;
  --muted: #6b5d52;
  --accent: #c9301c;
  --accent-hover: #ab2918;
  --accent-ink: #ffffff;
  --accent-text: #b02612;
  --accent-strong: #b92c1a;
  --accent-soft: #ffe1da;
  --accent-border: #e79e90;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #e3ead9;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6e4d3;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7ded5;
  --danger-strong: #b91c1c;
  --chart-1: #c9301c;
  --chart-2: #a98811;
  --chart-3: #006e32;
  --chart-4: #0197aa;
  --chart-5: #3545c1;
  --chart-6: #c753bd;

  --font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --display-weight: 600;
  --radius-card: 20px;
  --radius-btn: 14px;
  --radius-input: 12px;
  --x-tomato: #d6361f;
  --x-tomato-soft: #ffd5cc;
  --x-cheese: #f6c026;
  --x-cheese-soft: #fff0b8;
  --x-cheese-strong: #a87400;
  --x-basil: #2f7d32;
  --x-basil-soft: #d4edcf;
  --x-gray-soft: #e6e1db;
  --x-on-light: #2b2420;
  --x-on-photo: #ffffff;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Nunito", system-ui, sans-serif;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #110403;
  --surface: #291d1c;
  --surface-2: #1d1110;
  --border: #322726;
  --border-strong: #584f4f;
  --ink: #fff8ee;
  --muted: #a09690;
  --accent: #c9301c;
  --accent-hover: #d14f3e;
  --accent-ink: #ffffff;
  --accent-text: #d86b5c;
  --accent-strong: #d86b5c;
  --accent-soft: #390e09;
  --accent-border: #64180e;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #121f10;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #351504;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #360909;
  --danger-strong: #d16969;
  --chart-1: #c9301c;
  --chart-2: #a98811;
  --chart-3: #20984f;
  --chart-4: #0197aa;
  --chart-5: #5872f1;
  --chart-6: #c753bd;
}

/* KitchenCue — status colours, steam, pop and check animations */

[hidden] { display: none !important; }

/* status tints (fixed pastel + dark text so they read in both modes) */
.tint-new { background: var(--x-tomato-soft); color: var(--x-on-light); }
.tint-preparing { background: var(--x-cheese-soft); color: var(--x-on-light); }
.tint-ready { background: var(--x-basil-soft); color: var(--x-on-light); }
.tint-done { background: var(--x-gray-soft); color: var(--x-on-light); }
.st { display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 999px; padding: 0.2rem 0.75rem; font-size: 0.85rem; font-weight: 800; }

/* order cards */
.oc { border-left-width: 8px; }
.oc-new { border-left-color: var(--x-tomato); }
.oc-preparing { border-left-color: var(--x-cheese); }
.oc-ready { border-left-color: var(--x-basil); }
.col { border-top: 6px solid var(--x-gray-soft); }
.col-new { border-top-color: var(--x-tomato); }
.col-preparing { border-top-color: var(--x-cheese); }
.col-ready { border-top-color: var(--x-basil); }
.instr { background: var(--x-cheese-soft); color: var(--x-on-light); border: 2px dashed var(--x-cheese-strong); }
.late { color: var(--accent-text); font-weight: 800; }

/* big action buttons */
.act { font-size: 1.05rem; transition: transform 0.15s, filter 0.15s; }
.act:hover { filter: brightness(1.06); transform: translateY(-1px); }
.act:active { transform: scale(0.97); }
.act-new { background: var(--x-tomato); color: var(--x-on-photo); }
.act-preparing { background: var(--x-cheese); color: var(--x-on-light); }
.act-ready { background: var(--x-basil); color: var(--x-on-photo); }

/* motion */
@keyframes kc-pop { 0% { transform: scale(0.88) translateY(12px); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes kc-flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 15%, 60% { box-shadow: 0 0 0 6px var(--x-cheese); } }
@keyframes kc-slide { 0% { transform: translateX(-18px) scale(0.97); } 100% { transform: none; } }
@keyframes kc-rise { 0% { transform: translateY(4px) scaleY(0.6); opacity: 0; } 30% { opacity: 0.85; } 100% { transform: translateY(-12px) scaleY(1.2); opacity: 0; } }
@keyframes kc-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-12px) rotate(4deg); } }
@keyframes kc-spin { to { transform: rotate(360deg); } }
@keyframes kc-burst { 0% { opacity: 0; transform: scale(0.9); } 15%, 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes kc-draw { to { stroke-dashoffset: 0; } }

.order-pop { animation: kc-pop 0.5s cubic-bezier(0.2, 1.2, 0.4, 1); }
.order-pop.flash-new { animation: kc-pop 0.5s cubic-bezier(0.2, 1.2, 0.4, 1), kc-flash 2.6s ease-out; }
.moved { animation: kc-slide 0.45s ease-out; }
.floaty { animation: kc-float 5s ease-in-out infinite; display: inline-block; }
.kc-toast { animation: kc-pop 0.4s cubic-bezier(0.2, 1.2, 0.4, 1); }

.steam { position: relative; display: inline-block; width: 22px; height: 22px; color: var(--x-cheese-strong); }
.steam i { position: absolute; bottom: 0; width: 3px; height: 10px; border-radius: 3px; background: currentColor; opacity: 0; animation: kc-rise 1.8s ease-in-out infinite; }
.steam i:nth-child(1) { left: 3px; }
.steam i:nth-child(2) { left: 10px; animation-delay: 0.5s; }
.steam i:nth-child(3) { left: 17px; animation-delay: 1s; }

.burst { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; pointer-events: none; color: var(--x-on-photo); background: color-mix(in srgb, var(--x-basil) 90%, transparent); animation: kc-burst 1.5s ease forwards; }
.burst path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: kc-draw 0.6s 0.15s ease forwards; }

/* loading + toggles */
.spin { display: none; width: 1.1em; height: 1.1em; margin-right: 0.5rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: kc-spin 0.7s linear infinite; }
button[disabled] .spin { display: inline-block; }
[aria-pressed="true"] .eye-hide, [aria-pressed="false"] .eye-show { display: none; }
html[data-sound="on"] .snd-off, html:not([data-sound="on"]) .snd-on { display: none; }

/* empty-state plate */
.plate { display: inline-grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; font-size: 2.5rem; background: var(--x-cheese-soft); color: var(--x-on-light); border: 6px solid var(--x-tomato-soft); }

html.reduced-motion *, html.reduced-motion *::before, html.reduced-motion *::after { animation: none !important; transition: none !important; }
html.reduced-motion .steam i { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .floaty, .steam i { animation: none; } }