/*
 * theme.css — WRITTEN BY THE PLATFORM. Do not edit.
 *
 * Palette: Your colours (custom)
 * Source colours: #180a06 #3a2a22 #faf3ea #a8462e #b5502c #ffffff
 *
 * Every value below is either one of those five or derived from them, and each
 * one is contrast-corrected against this palette's own background. Consume
 * them with var(--token); never write a colour value in app code.
 */

:root {
  --canvas: #faf3ea;
  --surface: #fdfaf6;
  --surface-2: #efe7df;
  --border: #dad2ca;
  --border-strong: #b6ada6;
  --ink: #3a2a22;
  --muted: #726761;
  --accent: #a8462e;
  --accent-hover: #8f3c27;
  --accent-ink: #ffffff;
  --accent-text: #b5502c;
  --accent-strong: #9b402a;
  --accent-soft: #efdbd0;
  --accent-border: #d5a595;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dfe5d5;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e0cf;
  --warning-strong: #994607;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f2d9d1;
  --danger-strong: #b91c1c;}

/* ====================================================================
 * app.css — THIS APP'S OWN CSS. Yours to write. Ships empty.
 *
 * design.css is a FLOOR, not a ceiling.
 *
 * For a long time it was both, and the cost was measurable: an app could
 * not write a single CSS rule, so every app built here had the same 10px
 * radius, the same Public Sans at the same 15px, the same 1px borders and
 * the same soft shadow. Only fourteen COLOUR tokens ever differed. Three
 * apps in a row came out looking like the same product in three coats of
 * paint, which is what this file exists to end.
 *
 * It loads AFTER design.css and theme.css, so anything here wins.
 *
 * ---- THE FIRST LEVER: RETUNE THE SYSTEM ---------------------------
 *
 * A :root block here re-tunes every component at once — nothing is
 * restyled one class at a time. These are the tokens that decide an app's
 * CHARACTER, and they are the fastest way to make two apps look nothing
 * alike:
 *
 *   --radius-sm --radius --radius-lg   0 is brutal, 4 is crisp, 18 is soft
 *   --font-sans --font-mono            a display face changes more than colour
 *   --t-xs … --t-5xl                   the type scale, and how far it ramps
 *   --lh --lh-tight --track-tight      density and tone
 *   --s-1 … --s-12                     the spacing scale: tight or generous
 *   --shadow --shadow-raised           flat, or lifted
 *   --border --border-strong widths    hairline, or heavy and drawn
 *   --dur-1 --dur-2 --ease             brisk, or languid
 *   --content-max --measure            a wide dashboard or a narrow reading page
 *
 * COLOUR IS THE ONE EXCEPTION, and it is not a technicality: the owner
 * picked the palette on the approval card before you built anything, and
 * it is the only part of the look they chose themselves. theme.css holds
 * it. Write var(--accent), var(--ink), var(--canvas) — never a hex, an
 * rgb() or an hsl(), here or anywhere. The validator refuses those.
 *
 * ---- THE SECOND LEVER: WRITE WHAT IS NOT THERE ---------------------
 *
 * design.css covers the ordinary furniture. It does NOT cover the one
 * screen that makes this app itself — a timer's dial, a board's columns,
 * a chart, a seating plan, a game grid. Write those here, in full, and
 * name them for what they are (.dial, .board-col), never .card-2.
 *
 * Compose the primitives where they fit and write your own where they do
 * not. An app that used only the frozen classes and added nothing shipped
 * 160 component classes and zero rules of its own — and read as generated,
 * because the system's ceiling had become the app's ceiling.
 *
 * Keep using the tokens in what you write. A rule built on var(--s-4) and
 * var(--radius) stays consistent with everything around it and follows the
 * app when its character changes; one built on 16px and 10px does not.
 * ==================================================================== */

/* ---- Retune the system: soft, warm, generously spaced --------------------- */
:root {
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 8px 20px color-mix(in srgb, var(--ink) 5%, transparent);
  --shadow-raised: 0 16px 40px color-mix(in srgb, var(--ink) 12%, transparent);
}

/* ---- Menu hero -------------------------------------------------------------- */
.menu-hero {
  position: relative;
  padding: var(--s-10) var(--s-8);
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%),
    linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--ink) 15%));
  color: var(--accent-ink);
  box-shadow: var(--shadow-raised);
  overflow: hidden;
}
.menu-hero-kicker {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
  margin: 0 0 var(--s-2);
}
.menu-hero-title {
  font-size: var(--t-4xl);
  font-weight: var(--fw-semi);
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-3);
  max-width: 20ch;
}
.menu-hero-sub {
  max-width: 56ch;
  opacity: 0.92;
  line-height: 1.6;
  margin: 0 0 var(--s-6);
}
.menu-search {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-radius: var(--radius-pill);
  padding: var(--s-2) var(--s-4);
  max-width: 480px;
  color: var(--muted);
  box-shadow: var(--shadow);
}
.menu-search-input {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: var(--s-1) 0;
  color: var(--ink);
  height: auto;
}
.menu-search-input:focus { box-shadow: none; }

.menu-chips { margin-top: var(--s-6); }

/* ---- Menu sections & cards --------------------------------------------------- */
.menu-section-title {
  font-size: var(--t-xl);
  font-weight: var(--fw-semi);
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}

.menu-card {
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.menu-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); }

.menu-card-art {
  height: 108px;
  display: grid;
  place-items: center;
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--ink) 10%));
}
.menu-card-art[data-tone="two"] {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 80%, var(--canvas) 20%), var(--accent));
}
.menu-card-art[data-tone="three"] {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 60%, var(--ink) 20%), var(--accent));
}
.menu-card-art[data-tone="four"] {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 50%, var(--ink) 30%));
}

/* ---- Cart badge (topbar) ------------------------------------------------------ */
.cart-link { position: relative; }
.cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  line-height: 20px;
  text-align: center;
}
.cart-badge.is-zero { display: none; }

/* ---- Cart page ---------------------------------------------------------------- */
.cart-rows > .cart-row + .cart-row { border-top: 1px solid var(--border); }
.cart-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
}
.cart-row-qty { display: flex; align-items: center; gap: var(--s-2); }
.cart-row-count { min-width: 1.5ch; text-align: center; }
.cart-row-total { min-width: 6ch; text-align: right; }
.cart-summary { padding: var(--s-6); }

@media (max-width: 480px) {
  .cart-row { grid-template-columns: 1fr auto; row-gap: var(--s-2); }
  .cart-row-total { order: 3; }
}

/* ---- Checkout ------------------------------------------------------------------ */
.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--s-6);
  align-items: start;
}
@media (max-width: 860px) {
  .checkout-grid { grid-template-columns: 1fr; }
}
.checkout-summary { position: sticky; top: var(--s-6); }

/* Show the address field only for a delivery order — no JS required. */
.order-type-group .address-field { display: none; }
.order-type-group:has(input[value="delivery"]:checked) .address-field { display: block; }

/* ---- Order tracking ------------------------------------------------------------ */
.order-hero {
  text-align: center;
  padding: var(--s-8) 0 var(--s-6);
  color: var(--accent);
}
.order-hero .icon { color: var(--accent); }

#order-status.steps { padding: var(--s-2) 0; }
.step-label { white-space: nowrap; }
@media (max-width: 560px) {
  .step-label { display: none; }
  .step.is-active .step-label,
  #order-status .step:last-child .step-label { display: inline; }
}

/* ---- Kitchen queue --------------------------------------------------------------- */
.kitchen-card { padding: var(--s-5); }

/* ---- Reduced motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .menu-card { transition: none; }
  .menu-card:hover { transform: none; }
}