/*
 * theme.css — Pão & Poi. Warm-craft x playful: clay, cream and toasted
 * terracotta, a hand-set Fraunces headline over a Karla body and a
 * Space Mono till-tape for prices.
 */

:root {
  --canvas: #fbf3e7;
  --surface: #fdfaf4;
  --surface-2: #f3e2b8;
  --border: #e6d5b8;
  --border-strong: #cdb28c;
  --ink: #3a2a20;
  --muted: #695f57;
  --accent: #b8552c;
  --accent-hover: #a8481f;
  --accent-ink: #fdf6ec;
  --accent-text: #a44b25;
  --accent-strong: #974522;
  --accent-soft: #f2ddc9;
  --accent-border: #ddb28c;
  --success: #4f7a3c;
  --success-ink: #fdf6ec;
  --success-soft: #e4ecd9;
  --success-strong: #3f6230;
  --warning: #b4780f;
  --warning-ink: #fdf6ec;
  --warning-soft: #f4e6cd;
  --warning-strong: #7f540a;
  --danger: #ac3527;
  --danger-ink: #fdf6ec;
  --danger-soft: #f3ddd7;
  --danger-strong: #8c2a1f;
  --chart-1: #c1592b;
  --chart-2: #974522;
  --chart-3: #b4780f;
  --chart-4: #4f7a3c;
  --chart-5: #6b5a8e;
  --chart-6: #3a2a20;

  /* This app's own tokens — the dark clay band that runs through the story
     and closing sections, held constant across both modes on purpose: it is
     a fixed material in the page, not a mode. */
  --x-clay-bg: #2c1c14;
  --x-clay-surface: #38261b;
  --x-clay-ink: #f5e9d7;
  --x-clay-muted: #c7b39c;
  --x-clay-rule: #4c392a;
  --x-clay-accent: #e2814a;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Karla", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Karla", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.04em;

  --radius-btn: 999px;
  --radius-card: 1.25rem;
  --radius-input: 0.85rem;
  --radius-lg: 0.85rem;
  --radius-xl: 1.25rem;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --shadow-card: 0 10px 24px -14px color-mix(in srgb, var(--ink) 45%, transparent);
  --shadow-raised: 0 18px 36px -16px color-mix(in srgb, var(--ink) 50%, transparent);
  --shadow-btn: 0 8px 18px -8px color-mix(in srgb, var(--accent) 55%, transparent);
  --card-pad: 1.75rem;
  --caps: none;
  --caps-tracking: 0.02em;
  --btn-weight: 700;
  --measure: 62ch;
}

html[data-theme="dark"] {
  --canvas: #201510;
  --surface: #2a1c14;
  --surface-2: #33241a;
  --border: #4a372a;
  --border-strong: #63493a;
  --ink: #f3e6d3;
  --muted: #bda88e;
  --accent: #e2814a;
  --accent-hover: #ec9560;
  --accent-ink: #251206;
  --accent-text: #f0975f;
  --accent-strong: #f0975f;
  --accent-soft: #3f2a1b;
  --accent-border: #6b4a31;
  --success: #7fa868;
  --success-ink: #16260f;
  --success-soft: #26331c;
  --success-strong: #9cc684;
  --warning: #d9a24a;
  --warning-ink: #2a1c05;
  --warning-soft: #372a15;
  --warning-strong: #e6b769;
  --danger: #d1705f;
  --danger-ink: #2a0e08;
  --danger-soft: #3a1f19;
  --danger-strong: #e08d7d;
  --chart-1: #e2814a;
  --chart-2: #f0975f;
  --chart-3: #d9a24a;
  --chart-4: #9cc684;
  --chart-5: #a996c6;
  --chart-6: #f3e6d3;

  --x-clay-bg: #170e09;
  --x-clay-surface: #221510;
  --x-clay-ink: #f5e9d7;
  --x-clay-muted: #c7b39c;
  --x-clay-rule: #3a2a1f;
  --x-clay-accent: #e2814a;

  --shadow-card: 0 10px 24px -14px rgba(0, 0, 0, 0.6);
  --shadow-raised: 0 18px 36px -16px rgba(0, 0, 0, 0.65);
  --shadow-btn: 0 8px 18px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}

/*
 * app.css — Poi House. The counter's own furniture: the hero photo and its
 * bar, the till-tape bake list, the two clay bands, the paper order chit and
 * the hand-ruled hours table. Tokens only; the entrance is the hero's alone.
 */

/* ---- Hero -------------------------------------------------------------- */
.hero-shell {
  position: relative;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}
.hero-media > img { object-position: center 62%; }
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      color-mix(in srgb, var(--x-clay-bg) 90%, transparent) 0%,
      color-mix(in srgb, var(--x-clay-bg) 55%, transparent) 30%,
      transparent 58%
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--x-clay-bg) 65%, transparent) 0%,
      transparent 30%
    );
}
.hero-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
  /* A real, OPAQUE background — not a sibling overlay and not a translucent
     one — so the wordmark and the toggle are guaranteed legible against a
     known colour rather than whatever photo pixel sits behind them. */
  background-color: var(--x-clay-bg);
}
.hero-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--x-clay-ink);
}
.hero-toggle { color: var(--x-clay-ink); }
.hero-toggle:hover { background: color-mix(in srgb, var(--x-clay-ink) 14%, transparent); }
.hero-copy {
  position: relative;
  z-index: 2;
  margin-top: auto;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 6vw, 3.5rem);
  width: 100%;
  max-width: min(48rem, calc(100% - 2.5rem));
  padding: 1.75rem clamp(1.25rem, 4vw, 2.5rem);
  border-radius: 1.75rem;
  /* Same reasoning as .hero-bar: an opaque panel behind the headline, so it
     reads against a known colour rather than the photo underneath. */
  background-color: var(--x-clay-bg);
}
.hero-headline {
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--x-clay-ink);
}
.hero-sub {
  margin-top: 1rem;
  max-width: 34ch;
  font-size: 1.125rem;
  color: color-mix(in srgb, var(--x-clay-ink) 82%, transparent);
}

/* Hero-only entrance: the photo settles in, the headline rises after it, on
   load — nothing else on the page moves. Plain CSS animation, so it plays
   with no script at all; each element rests at its final, visible state and
   only the keyframe's own "from" moment is offset. */
@keyframes hero-photo-in {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes hero-copy-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero-media { animation: hero-photo-in 900ms var(--ease-out, ease) both; }
.hero-copy { animation: hero-copy-in 700ms var(--ease-out, ease) 260ms both; }

/* ---- Section heading (shared) ------------------------------------------ */
.section-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 45, "WONK" 1;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ---- Today's Bakes: a till-tape list ------------------------------------ */
.till-list { margin-top: 2rem; border-top: 1px solid var(--border); }
.till-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px dashed var(--border-strong);
}
.till-name { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.till-note { font-size: 0.875rem; color: var(--muted); }
.till-price {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent-text);
  white-space: nowrap;
}

/* ---- Clay bands (story + closing) --------------------------------------- */
.clay-band, .closing-band {
  background: var(--x-clay-bg);
  color: var(--x-clay-ink);
}
.clay-kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--x-clay-accent);
  margin-bottom: 1rem;
}
.clay-prose { color: color-mix(in srgb, var(--x-clay-ink) 92%, transparent); }
.clay-prose p { font-size: 1.15rem; line-height: 1.75; }
.clay-prose p + p { margin-top: 1.25rem; }

.closing-headline {
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  font-size: clamp(2.5rem, 6.5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.01em;
}
.closing-meta {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--x-clay-ink) 78%, transparent);
}

/* ---- Three Regulars: quotes, not cards ----------------------------------- */
.quote-stack { margin-top: 2rem; border-top: 1px solid var(--border); }
.quote-item { padding: 2rem 0; border-bottom: 1px solid var(--border); }
.quote-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.5;
  color: var(--ink);
}
.quote-attrib { margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.95rem; }

/* ---- Opening Hours: hand-ruled table -------------------------------------- */
.hours-band { background: var(--surface-2); }
.hours-table { margin-top: 2rem; width: 100%; max-width: 28rem; border-collapse: collapse; }
.hours-table tr { border-bottom: 1px dashed var(--border-strong); }
.hours-table tr:last-child { border-bottom: none; }
.hours-table th, .hours-table td {
  padding: 0.85rem 0;
  text-align: left;
  font-weight: 400;
}
.hours-table th { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.hours-table td { font-family: var(--font-mono); color: var(--muted); text-align: right; }
.hours-note { margin-top: 1.5rem; color: var(--muted); font-style: italic; }

/* ---- Reserve an Order: a paper chit -------------------------------------- */
.reserve-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 48rem) {
  .reserve-grid { grid-template-columns: 1fr 1.1fr; }
}
.reserve-copy { padding-top: 0.25rem; }

.chit {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--surface);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  box-shadow: var(--shadow-card);
}
.chit-done { align-items: flex-start; }
.chit-stamp {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--success-strong);
  border: 1.5px solid var(--success-strong);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  transform: rotate(-4deg);
}