/*
 * theme.css — Brew Lane's design-system values.
 * Clay, moss, sand and cream. A warm roast-brown accent, a terracotta link,
 * a serif display (Fraunces) over a soft sans body (Karla). 18px card
 * corners, hairline borders, shadow tier 1 (soft and shallow — this is a
 * café menu, not software).
 */

:root {
  --canvas: #f6f1e7;
  --surface: #fbf9f4;
  --surface-2: #efe2c8;
  --border: #e1d3b3;
  --border-strong: #c9b892;
  --ink: #2b211b;
  --muted: #69625c;

  --accent: #3b2a1f;
  --accent-hover: #2b1e16;
  --accent-ink: #f6f1e7;
  --accent-text: #974f25;
  --accent-strong: #3b2a1f;
  --accent-soft: #ecdfc4;
  --accent-border: #d9c39a;

  --success: #5b6d3f;
  --success-ink: #f6f1e7;
  --success-soft: #e3e6d1;
  --success-strong: #45532f;

  --warning: #b3672c;
  --warning-ink: #f6f1e7;
  --warning-soft: #f0ddc4;
  --warning-strong: #8a4c1e;

  --danger: #a13b2c;
  --danger-ink: #f6f1e7;
  --danger-soft: #f0d9d0;
  --danger-strong: #7e2e21;

  --chart-1: #3b2a1f;
  --chart-2: #974f25;
  --chart-3: #5b6d3f;
  --chart-4: #c9a227;
  --chart-5: #6b8f9c;
  --chart-6: #7c5c42;

  --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: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.04em;

  --radius-btn: 12px;
  --radius-card: 18px;
  --radius-input: 10px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 6px 16px color-mix(in srgb, var(--ink) 6%, transparent);
  --shadow-raised: 0 4px 10px color-mix(in srgb, var(--ink) 10%, transparent), 0 14px 30px color-mix(in srgb, var(--ink) 10%, transparent);
  --shadow-btn: none;
  --card-pad: 1.5rem;
  --caps: none;
  --caps-tracking: 0;
  --btn-weight: 600;
  --measure: 62ch;

  /* Brew Lane's own tokens */
  --x-sand: #efe2c8;
  --x-roast: #3b2a1f;
  --x-roast-2: #2b1e16;
  --x-rule: #cdb98d;
  --x-band-ink: #f3ead9;
  --x-band-muted: #cbb99c;
}

html[data-theme="dark"] {
  --canvas: #201812;
  --surface: #2a1f18;
  --surface-2: #38291e;
  --border: #4a3728;
  --border-strong: #5f4632;
  --ink: #f2e7d6;
  --muted: #b8a892;

  --accent: #d3a06a;
  --accent-hover: #e0b17d;
  --accent-ink: #241a12;
  --accent-text: #e2a86e;
  --accent-strong: #f0c894;
  --accent-soft: #3e2d1e;
  --accent-border: #5c4630;

  --success: #93ab72;
  --success-ink: #1d2313;
  --success-soft: #2d3620;
  --success-strong: #c3d6a1;

  --warning: #d99a4e;
  --warning-ink: #2b1c10;
  --warning-soft: #3c2b18;
  --warning-strong: #eab876;

  --danger: #d98a72;
  --danger-ink: #2b1409;
  --danger-soft: #3c231a;
  --danger-strong: #eeae97;

  --chart-1: #d3a06a;
  --chart-2: #e2a86e;
  --chart-3: #93ab72;
  --chart-4: #d9bf5f;
  --chart-5: #7fa6b3;
  --chart-6: #b3937a;

  --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.35);
  --shadow-raised: 0 6px 14px rgba(0,0,0,.4), 0 18px 34px rgba(0,0,0,.4);

  --x-sand: #38291e;
  --x-roast: #171009;
  --x-roast-2: #0f0a06;
  --x-rule: #4a3728;
  --x-band-ink: #f3ead9;
  --x-band-muted: #c2af92;
}

/*
 * app.css — Brew Lane's own CSS. The dark roast-brown statement band, the
 * printed-menu row rules, and the menu grid's stagger-in — the page's one
 * moment of motion. Everything else holds still. Tokens only.
 */

/* ---- The roast-brown statement band (Hours & Find Us) -------------------- */
.band-roast {
  background: var(--x-roast);
  border-top: 1px solid var(--x-roast-2);
  border-bottom: 1px solid var(--x-roast-2);
}

.street-map svg {
  opacity: 0.9;
}

/* ---- Menu rows: a printed-menu hairline between items, not a card ------- */
.menu-list > li + li {
  border-top: 1px solid var(--x-rule);
}

/* ---- Motion: the menu grid staggers in, and nothing else does -----------
   Default state is visible — .menu-armed is added by app.js only once it
   is actually about to animate the element in, so a visitor whose script
   never runs (or who asked for less motion) always sees the menu whole. */
.menu-armed .menu-row {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.menu-armed.in-view .menu-row {
  opacity: 1;
  transform: none;
}
.menu-row:nth-child(1) { transition-delay: 0ms; }
.menu-row:nth-child(2) { transition-delay: 70ms; }
.menu-row:nth-child(3) { transition-delay: 140ms; }
.menu-row:nth-child(4) { transition-delay: 210ms; }
.menu-row:nth-child(5) { transition-delay: 280ms; }
.menu-row:nth-child(6) { transition-delay: 350ms; }

html.reduced-motion .menu-row {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}