/* Direction: Spice Route Kitchen — saffron and deep chilli red on warm cream, Playfair headings */
/* 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: #fbf5ea;
  --surface: #fffaf1;
  --surface-2: #f4e8d3;
  --border: #e6d4b8;
  --border-strong: #b7ada5;
  --ink: #2a1812;
  --muted: #6b5546;
  --accent: #a3201f;
  --accent-hover: #8b1b1a;
  --accent-ink: #ffffff;
  --accent-text: #8e1b1a;
  --accent-strong: #a3201f;
  --accent-soft: #f7e0c3;
  --accent-border: #d3958f;
  --success: #2e7a3a;
  --success-ink: #ffffff;
  --success-soft: #e2e6d5;
  --success-strong: #2a7035;
  --warning: #b36b00;
  --warning-ink: #ffffff;
  --warning-soft: #f2e4ce;
  --warning-strong: #8c5300;
  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #f2dcd2;
  --danger-strong: #b3261e;
  --chart-1: #a3201f;
  --chart-2: #8f6e0d;
  --chart-3: #0a5d21;
  --chart-4: #197b87;
  --chart-5: #2540a6;
  --chart-6: #a146a2;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.01em;
  --radius-card: 18px;
  --radius-btn: 999px;
  --radius-input: 12px;
  --x-saffron: #e39b13;
  --x-amber: #8a5600;
  --x-band: #2b100d;
  --x-on-photo: #ffffff;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #110303;
  --surface: #291c1c;
  --surface-2: #1d1010;
  --border: #322626;
  --border-strong: #584f4f;
  --ink: #fbf5ea;
  --muted: #9d948e;
  --accent: #a3201f;
  --accent-hover: #b14141;
  --accent-ink: #ffffff;
  --accent-text: #c77877;
  --accent-strong: #c26c6b;
  --accent-soft: #310909;
  --accent-border: #531010;
  --success: #2e7a3a;
  --success-ink: #ffffff;
  --success-soft: #171d0f;
  --success-strong: #5c9865;
  --warning: #b36b00;
  --warning-ink: #ffffff;
  --warning-soft: #351a02;
  --warning-strong: #bf8227;
  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #350b09;
  --danger-strong: #c9645e;
  --chart-1: #bf3d37;
  --chart-2: #ad8500;
  --chart-3: #1f993d;
  --chart-4: #1896a4;
  --chart-5: #5378e3;
  --chart-6: #bb5ebc;
}

/* Spice Route Kitchen — the few things utilities and primitives do not cover */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* veg / non-veg mark */
.veg-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; margin-top: 0.3rem; border: 2px solid var(--success); border-radius: 3px; }
.veg-mark i { display: block; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--success); }
.veg-mark.nonveg { border-color: var(--danger); }
.veg-mark.nonveg i { background: var(--danger); }

/* veg-only switch */
.switch { appearance: none; position: relative; flex: none; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: var(--border); cursor: pointer; transition: background 0.2s; }
.switch::after { content: ""; position: absolute; top: 0.18rem; left: 0.2rem; width: 1.14rem; height: 1.14rem; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); transition: transform 0.2s; }
.switch:checked { background: var(--success); }
.switch:checked::after { transform: translateX(1.05rem); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* category links */
.cat-link { flex: none; border-radius: 999px; padding: 0.4rem 1rem; font-size: 0.9rem; font-weight: 500; color: var(--muted); border: 1px solid transparent; transition: background 0.15s, color 0.15s; }
.cat-link:hover { color: var(--ink); background: var(--surface-2); }
.cat-link.active { background: var(--accent); color: var(--accent-ink); }

/* quantity stepper */
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--accent); border-radius: 999px; overflow: hidden; background: var(--surface); }
.stepper button { width: 2rem; height: 2rem; font-size: 1.1rem; line-height: 1; color: var(--accent-text); font-weight: 700; transition: background 0.15s; }
.stepper button:hover { background: var(--accent-soft); }
.stepper button:active { transform: scale(0.9); }
.stepper button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.stepper span { min-width: 1.6rem; text-align: center; font-weight: 700; font-size: 0.9rem; }

/* cart count badge + feedback */
.count-badge { position: absolute; top: -0.35rem; right: -0.35rem; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.7rem; font-weight: 700; line-height: 1.15rem; text-align: center; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes pop { 0% { transform: scale(0.8); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.bump { animation: bump 0.4s ease; }
.pop { animation: pop 0.35s ease; }
html.reduced-motion .bump, html.reduced-motion .pop { animation: none; }

/* cart: side column on desktop, slide-up sheet on phones */
.cart-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; flex-direction: column; max-height: 88vh; background: var(--surface); border: 1px solid var(--border); border-radius: 24px 24px 0 0; box-shadow: 0 -18px 50px rgb(0 0 0 / 0.25); transform: translateY(110%); visibility: hidden; transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.38s; padding-bottom: env(safe-area-inset-bottom); }
.cart-panel.open { transform: none; visibility: visible; transition-delay: 0s; }
.cart-backdrop:not([hidden]) { animation: fade-in 0.3s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.cart-backdrop { position: fixed; inset: 0; z-index: 45; background: rgb(0 0 0 / 0.5); }
.cart-bar { position: fixed; left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom)); z-index: 40; animation: rise-bar 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes rise-bar { from { transform: translateY(30px); } to { transform: none; } }
@media (min-width: 1024px) {
  .cart-panel { position: sticky; top: 11rem; z-index: 1; max-height: calc(100vh - 12.5rem); border-radius: var(--radius-card); box-shadow: 0 10px 30px rgb(0 0 0 / 0.08); transform: none; transition: none; visibility: visible; padding-bottom: 0; }
  .cart-backdrop, .cart-bar { display: none !important; }
}
html.reduced-motion .cart-panel { transition: none; }

/* hero */
.hero-scrim { background: linear-gradient(180deg, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.38) 40%, rgb(0 0 0 / 0.8) 100%); }
.card-scrim { background: linear-gradient(180deg, rgb(0 0 0 / 0) 35%, rgb(0 0 0 / 0.85) 100%); }
@keyframes rise { from { transform: translateY(22px); } to { transform: none; } }
.rise { animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rise-2 { animation-delay: 0.12s; }
.rise-3 { animation-delay: 0.24s; }
html.reduced-motion .rise { animation: none; }
.paper { background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 18px 18px; }

/* status pills */
.st { display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 999px; padding: 0.15rem 0.65rem; font-size: 0.75rem; font-weight: 700; color: var(--x-c); background: color-mix(in srgb, var(--x-c) 13%, transparent); white-space: nowrap; }
.st-received { --x-c: var(--accent-text); }
.st-preparing, .st-seated { --x-c: var(--x-amber); }
.st-ready, .st-confirmed { --x-c: var(--success); }
.st-completed, .st-no_show { --x-c: var(--muted); }
.st-cancelled { --x-c: var(--danger); }

/* order progress */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem; }
.step { position: relative; text-align: center; font-size: 0.8rem; color: var(--muted); }
.step .dot { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; margin: 0 auto 0.4rem; border-radius: 999px; border: 2px solid var(--border); background: var(--surface); position: relative; z-index: 1; }
.step::before { content: ""; position: absolute; top: 1.1rem; left: -50%; width: 100%; height: 2px; background: var(--border); }
.step:first-child::before { display: none; }
.step.done .dot { background: var(--success); border-color: var(--success); color: var(--surface); }
.step.done::before, .step.now::before { background: var(--success); }
.step.now .dot { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent); }
.step.now, .step.done { color: var(--ink); font-weight: 600; }

@keyframes flash { from { box-shadow: 0 0 0 3px var(--x-saffron); } to { box-shadow: 0 0 0 0 transparent; } }
.new-order { animation: flash 2.4s ease-out 1; }
html.reduced-motion .new-order { animation: none; }

/* sections ease in as they scroll into view (rest visible; the entrance starts from an offset) */
@keyframes reveal { from { opacity: 0.4; transform: translateY(32px); } to { opacity: 1; transform: none; } }
.reveal-go { animation: reveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* dish photos zoom slightly on hover */
.media img, .group img { transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* motion off for people who prefer reduced motion */
html.reduced-motion .reveal-go, html.reduced-motion .cart-bar, html.reduced-motion .cart-backdrop { animation: none !important; }
html.reduced-motion .media img, html.reduced-motion .group img, html.reduced-motion .stepper button, html.reduced-motion .btn { transition: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal-go, .cart-bar, .cart-backdrop, .bump, .pop, .rise, .new-order { animation: none !important; }
  .cart-panel { transition: none !important; }
  .media img, .group img, .stepper button, .btn { transition: none !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* phone + dark-mode polish */
summary::-webkit-details-marker { display: none; }
dialog.modal { max-width: calc(100vw - 1.5rem); max-height: 92vh; overflow-y: auto; }
.text-danger { color: var(--danger-strong); }
.step.done .dot { color: var(--success-ink); }
html[data-theme="dark"] .st-preparing, html[data-theme="dark"] .st-seated { --x-c: var(--warning-strong); }
html[data-theme="dark"] .st-ready, html[data-theme="dark"] .st-confirmed { --x-c: var(--success-strong); }
html[data-theme="dark"] .st-cancelled { --x-c: var(--danger-strong); }
html[data-theme="dark"] .st-received { --x-c: var(--accent-text); }
html[data-theme="dark"] .veg-mark { border-color: var(--success-strong); }
html[data-theme="dark"] .veg-mark i { background: var(--success-strong); }
html[data-theme="dark"] .veg-mark.nonveg { border-color: var(--danger-strong); }
html[data-theme="dark"] .veg-mark.nonveg i { background: var(--danger-strong); }
html[data-theme="dark"] .switch { background: var(--border-strong); }
html[data-theme="dark"] .stepper { border-color: var(--accent-text); }
html[data-theme="dark"] .cart-panel { box-shadow: 0 -18px 50px rgb(0 0 0 / 0.6); }
@media (max-width: 480px) {
  .stepper button { width: 2.25rem; height: 2.25rem; }
  .steps .step { font-size: 0.72rem; }
}