/*
 * theme.css — Sunrise Bakes.
 *
 * Warm and photographic, like a neighbourhood bakery's own counter at 7am:
 * cream flour-dust grounds, dark-crust brown ink, a toasted terracotta accent
 * that reads like the top of a loaf. Display type is Fraunces (soft serif);
 * body is Nunito (rounded, friendly, easy to read at length).
 *
 * :root is light (the page opens light); html[data-theme="dark"] is the
 * evening bakery — dark oven brown with a glowing apricot accent, not an
 * inversion.
 */

:root {
  --canvas: #fbf4ea;
  --surface: #fffaf3;
  --surface-2: #f3e7d6;
  --border: #e6d6c0;
  --border-strong: #c9b093;
  --ink: #3a2416;
  --muted: #7a5f4b;
  --accent: #c05118;
  --accent-hover: #a3431a;
  --accent-ink: #ffffff;
  --accent-text: #a3431a;
  --accent-strong: #8a3812;
  --accent-soft: #f8e3d4;
  --accent-border: #e8b89c;
  --success: #3f7a3a;
  --success-ink: #ffffff;
  --success-soft: #e3eedd;
  --success-strong: #2f6a2b;
  --warning: #b8700f;
  --warning-ink: #ffffff;
  --warning-soft: #f7e9cf;
  --warning-strong: #8d5408;
  --danger: #b3382b;
  --danger-ink: #ffffff;
  --danger-soft: #f6dfdb;
  --danger-strong: #9a2d22;
  --chart-1: #c05118;
  --chart-2: #3a2416;
  --chart-3: #d9a441;
  --chart-4: #7a5f4b;
  --chart-5: #3f7a3a;
  --chart-6: #8e5a9e;

  --x-crust: #2a170d;
  --x-crust-ink: #fbf4ea;
  --x-crust-muted: #d4bda4;
  --x-butter: #f2d58a;

  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Nunito", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Nunito", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.025em;
  --eyebrow-tracking: 0.14em;

  --radius-btn: 999px;
  --radius-card: 1.25rem;
  --radius-input: 0.85rem;
  --border-w: 1px;
  --shadow-card: 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent), 0 12px 32px -16px color-mix(in srgb, var(--ink) 28%, transparent);
  --shadow-raised: 0 18px 48px -18px color-mix(in srgb, var(--ink) 40%, transparent);
  --shadow-btn: 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent);
  --card-pad: 1.75rem;
  --btn-weight: 700;
  --measure: 62ch;
}

html[data-theme="dark"] {
  --canvas: #1d130d;
  --surface: #2a1c13;
  --surface-2: #35251a;
  --border: #4a3628;
  --border-strong: #6b5240;
  --ink: #f6ebdd;
  --muted: #c9ae95;
  --accent: #f08a4b;
  --accent-hover: #f59c66;
  --accent-ink: #2a1208;
  --accent-text: #f4a070;
  --accent-strong: #f6bd97;
  --accent-soft: #3d2416;
  --accent-border: #6e3f24;
  --success: #5fae57;
  --success-ink: #0f1f0e;
  --success-soft: #1f2f1c;
  --success-strong: #9fd597;
  --warning: #e0a03a;
  --warning-ink: #221600;
  --warning-soft: #3a2a12;
  --warning-strong: #f0c97a;
  --danger: #e2634f;
  --danger-ink: #2a0d09;
  --danger-soft: #3d1a15;
  --danger-strong: #f3a496;
  --chart-1: #f08a4b;
  --chart-2: #f6ebdd;
  --chart-3: #e8c268;
  --chart-4: #c9ae95;
  --chart-5: #9fd597;
  --chart-6: #c89ad6;

  --x-crust: #130b06;
  --x-crust-ink: #f6ebdd;
  --x-crust-muted: #c9ae95;
  --x-butter: #e8c268;

  --shadow-card: 0 1px 0 rgba(0,0,0,.25), 0 12px 32px -16px rgba(0,0,0,.6);
  --shadow-raised: 0 18px 48px -18px rgba(0,0,0,.7);
  --shadow-btn: 0 6px 16px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}

/*
 * app.css — Sunrise Bakes. The ground, the bar, the two bands, the menu's
 * dotted leaders, and the one moment that moves (menu groups rising as they
 * come into view). Tokens only.
 */

/* The ground: cream with a faint flour-dust glow top-left, like morning light through the shop window. */
.ground {
  background-color: var(--canvas);
  background-image:
    radial-gradient(60rem 40rem at 10% -10%, color-mix(in srgb, var(--x-butter) 38%, transparent), transparent 70%),
    radial-gradient(40rem 30rem at 100% 20%, color-mix(in srgb, var(--accent-soft) 70%, transparent), transparent 70%);
  background-repeat: no-repeat;
}

/* A quiet bar — not sticky, not blurred; the page simply starts. */
.bar { border-bottom: var(--border-w) solid color-mix(in srgb, var(--border) 60%, transparent); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent-text);
}

/* The hero photograph: tall on desktop, 16/9 on a phone. */
.hero-media { aspect-ratio: 16 / 9; }
@media (min-width: 768px) { .hero-media { aspect-ratio: 21 / 9; min-height: 30rem; } }

/* The tinted band the menu sits on. */
.band {
  background-color: var(--surface-2);
  border-top: var(--border-w) solid var(--border);
  border-bottom: var(--border-w) solid var(--border);
}

/* A menu line: name — dotted leader — price, on one row, never wrapping. */
.menu-line {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: nowrap;
}
.menu-leader {
  flex: 1 1 auto;
  min-width: 1.5rem;
  border-bottom: 2px dotted var(--border-strong);
  transform: translateY(-0.35em);
}

/* The dark "crust" band: opening hours. Its own ink, so it is never an inversion. */
.crust {
  background-color: var(--x-crust);
  color: var(--x-crust-ink);
  background-image: radial-gradient(50rem 30rem at 90% 110%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 70%);
}
.crust .icon { color: var(--accent-text); }
.hours-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: nowrap;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--x-crust-ink) 14%, transparent);
}
.hours-leader { flex: 1 1 auto; min-width: 1rem; }

/* The contact form as a designed device: an inset slip on the surface. */
.contact-slip {
  background-color: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-card);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-card);
}
.contact-slip > * + * { margin-top: 1.25rem; }

/* MOTION — the one moment: a menu group rests visible and rises in once seen. */
[data-inview] { transition: transform 700ms cubic-bezier(.2,.7,.2,1), opacity 700ms ease; }
[data-inview].is-armed { transform: translateY(1.5rem); opacity: 0.001; }
[data-inview].is-in { transform: none; opacity: 1; }
html.reduced-motion [data-inview] { transition: none; transform: none; opacity: 1; }