/*
 * theme.css — Welcome Momos. Warm-craft × editorial: cream paper, chili-red
 * ink, a hand-set menu board. Two of the app's own tokens (--x-*) carry the
 * turmeric achar band and the dark ink-brown statement band — neither is a
 * standard palette slot, both are read only by app.css / the views.
 */

:root {
  --canvas: #f3e9d8;
  --surface: #faf5ed;
  --surface-2: #ead9bc;
  --border: #ddc9a4;
  --border-strong: #c3a878;
  --ink: #2e2018;
  --muted: #6a5f56;

  --accent: #c1401f;
  --accent-hover: #a4361b;
  --accent-ink: #faf1e4;
  --accent-text: #a4361b;
  --accent-strong: #a4361b;
  --accent-soft: #f4dbce;
  --accent-border: #dba692;

  --success: #4b7a3a;
  --success-ink: #fbf8ef;
  --success-soft: #e2ead9;
  --success-strong: #395c2b;
  --warning: #b8792a;
  --warning-ink: #fbf8ef;
  --warning-soft: #f1e0c3;
  --warning-strong: #8a591b;
  --danger: #9c2a12;
  --danger-ink: #fbf8ef;
  --danger-soft: #f1dad2;
  --danger-strong: #7e2110;

  --chart-1: #c1401f;
  --chart-2: #d99b3f;
  --chart-3: #5c7a3a;
  --chart-4: #6a5f56;
  --chart-5: #8a4a2c;
  --chart-6: #3d6e73;

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

  --radius-btn: 10px;
  --radius-card: 10px;
  --radius-input: 10px;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 10px 24px -8px color-mix(in srgb, var(--ink) 22%, transparent);
  --shadow-raised: 0 4px 8px color-mix(in srgb, var(--ink) 10%, transparent), 0 20px 40px -12px color-mix(in srgb, var(--ink) 30%, transparent);
  --shadow-btn: 0 2px 0 0 color-mix(in srgb, var(--accent-hover) 70%, transparent);
  --card-pad: 1.75rem;
  --measure: 62ch;

  --x-turmeric: #e2a63c;
  --x-turmeric-ink: #2e2018;
  --x-turmeric-strong: #7a4a12;
  --x-band: #241611;
  --x-band-ink: #f3e9d8;
  --x-band-muted: #c2ab96;
  --x-band-border: #4a352a;
}

html[data-theme="dark"] {
  --canvas: #1c130e;
  --surface: #251a13;
  --surface-2: #33241a;
  --border: #45301f;
  --border-strong: #5c4128;
  --ink: #f3e9d8;
  --muted: #c2ab96;

  --accent: #e2572f;
  --accent-hover: #ef7148;
  --accent-ink: #1c130e;
  --accent-text: #ff9468;
  --accent-strong: #ffb591;
  --accent-soft: #402318;
  --accent-border: #6b3a26;

  --success: #7bab5e;
  --success-ink: #17230f;
  --success-soft: #26331b;
  --success-strong: #a3cf87;
  --warning: #d99b3f;
  --warning-ink: #241608;
  --warning-soft: #3a2914;
  --warning-strong: #ecc17f;
  --danger: #d9613f;
  --danger-ink: #24100a;
  --danger-soft: #3a1f16;
  --danger-strong: #ef9273;

  --chart-1: #e2572f;
  --chart-2: #d99b3f;
  --chart-3: #8fae6d;
  --chart-4: #c2ab96;
  --chart-5: #c17b53;
  --chart-6: #5b9ba1;

  --shadow-card: 0 1px 2px color-mix(in srgb, black 30%, transparent), 0 10px 24px -8px color-mix(in srgb, black 50%, transparent);
  --shadow-raised: 0 4px 8px color-mix(in srgb, black 35%, transparent), 0 20px 40px -12px color-mix(in srgb, black 60%, transparent);
  --shadow-btn: 0 2px 0 0 color-mix(in srgb, var(--accent-hover) 60%, transparent);

  --x-turmeric: #8a5a1e;
  --x-turmeric-ink: #fbead0;
  --x-turmeric-strong: #f0c583;
  --x-band: #120b07;
  --x-band-ink: #f3e9d8;
  --x-band-muted: #b89d84;
  --x-band-border: #362519;
}

/*
 * app.css — Welcome Momos' own stylesheet. Only what no primitive covers:
 * the paper ground, the menu board rows, the turmeric and ink-brown bands,
 * and the one moment of motion (the board staggering into view).
 * Tokens only — see theme.css for every value used with var() below.
 */

/* ---- The ground: warm cream paper with a faint fibre, never a literal. -- */
.paper {
  background-color: var(--canvas);
  background-image:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 40%),
    radial-gradient(circle at 88% 92%, color-mix(in srgb, var(--x-turmeric) 8%, transparent), transparent 45%);
  background-attachment: fixed;
}

/* ---- Menu board rows: hairline-ruled, not cards. ------------------------ */
.board-row {
  transition: background-color 150ms var(--ease, ease);
}
.board-row:hover {
  background-color: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}

/* ---- Pick-your-heat: a tinted turmeric band. ----------------------------- */
.heat-band {
  background: var(--x-turmeric);
  color: var(--x-turmeric-ink);
}
.heat-card {
  border-top: 2px solid var(--x-turmeric-strong);
}
.heat-flame {
  color: var(--x-turmeric-strong);
}

/* ---- Find us: a dark ink-brown statement band. --------------------------- */
.band-dark {
  background: var(--x-band);
  color: var(--x-band-ink);
}
.band-row {
  border-bottom: 1px solid var(--x-band-border);
}
.band-muted {
  color: var(--x-band-muted);
}

/* ---- Motion: only the board stagger-grid moves. Everything else rests. -- */
@keyframes board-row-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.stagger-grid .stagger-item {
  opacity: 0;
  transform: translateY(14px);
}
.stagger-grid.is-inview .stagger-item {
  animation: board-row-in 520ms var(--ease-out, ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
html.reduced-motion .stagger-grid .stagger-item {
  opacity: 1;
  transform: none;
  animation: none;
}