/*
 * theme.css — Brew Lane's design-system values.
 *
 * Warm-craft: a small Pune cafe's own paper — cream ground, espresso ink,
 * a soft warm shadow, 10px corners. Every token below derives from the six
 * hexes the owner approved: canvas #f6efe4, surface #fbf8f3, accent #2a160d,
 * accent-text #795b21, ink #2e1c12, muted #6b5f56.
 */

:root {
  --canvas: #f6efe4;
  --surface: #fbf8f3;
  --surface-2: #efe1c9;
  --border: #e2d3b8;
  --border-strong: #c7b28c;
  --ink: #2e1c12;
  --muted: #6b5f56;

  --accent: #2a160d;
  --accent-hover: #3f2415;
  --accent-ink: #f6efe4;
  --accent-text: #795b21;
  --accent-strong: #2a160d;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --accent-border: color-mix(in srgb, var(--accent) 28%, var(--border-strong));

  --success: #3f7d44;
  --success-ink: #ffffff;
  --success-soft: #e3ecdd;
  --success-strong: #2f5f34;
  --warning: #ab6316;
  --warning-ink: #ffffff;
  --warning-soft: #f1e3cd;
  --warning-strong: #8f5111;
  --danger: #a8422f;
  --danger-ink: #ffffff;
  --danger-soft: #f0ddd6;
  --danger-strong: #8c3222;

  --chart-1: #795b21;
  --chart-2: #2a160d;
  --chart-3: #a8562f;
  --chart-4: #6b7b3f;
  --chart-5: #3f6b6b;
  --chart-6: #a45a63;

  --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: "Caveat", cursive;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 10px;
  --radius-card: 14px;
  --radius-input: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --card-pad: 1.75rem;
  --caps: none;
  --caps-tracking: 0;
  --btn-weight: 600;
  --measure: 62ch;

  --shadow-card: 0 1px 2px color-mix(in srgb, var(--ink) 7%, transparent), 0 10px 28px color-mix(in srgb, var(--ink) 10%, transparent);
  --shadow-raised: 0 4px 10px color-mix(in srgb, var(--ink) 10%, transparent), 0 18px 40px color-mix(in srgb, var(--ink) 16%, transparent);
  --shadow-btn: 0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent);
  --shadow-xs: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);

  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  --ring-danger: 0 0 0 3px color-mix(in srgb, var(--danger) 30%, transparent);

  /* Brew Lane's own tokens — the story band, the postcard notes, the ticket stub. */
  --x-band-bg: #241109;
  --x-band-ink: #f3e6d4;
  --x-band-muted: #cbb69a;
  --x-postcard-1: #fdf9f0;
  --x-postcard-2: #fbf3e2;
  --x-postcard-3: #fef7ec;
  --x-ticket-edge: #e2d3b8;
  --x-hero-ink: #f8f1e4;
  --x-hero-muted: color-mix(in srgb, #f8f1e4 82%, transparent);
}

html[data-theme="dark"] {
  --canvas: #1b120c;
  --surface: #251a12;
  --surface-2: #2e2116;
  --border: #40301f;
  --border-strong: #5c4630;
  --ink: #f3e7d8;
  --muted: #b8a58c;

  --accent: #d9a35e;
  --accent-hover: #e6b578;
  --accent-ink: #241407;
  --accent-text: #e2b876;
  --accent-strong: #f0cb8d;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface));
  --accent-border: color-mix(in srgb, var(--accent) 38%, var(--border-strong));

  --success: #6fae70;
  --success-ink: #14210f;
  --success-soft: #223324;
  --success-strong: #9bd39a;
  --warning: #d6944e;
  --warning-ink: #241407;
  --warning-soft: #3a2a16;
  --warning-strong: #e8b47c;
  --danger: #cf7b64;
  --danger-ink: #241407;
  --danger-soft: #3a231c;
  --danger-strong: #e29d89;

  --chart-1: #e2b876;
  --chart-2: #d9a35e;
  --chart-3: #c98259;
  --chart-4: #9aab6c;
  --chart-5: #6fa3a3;
  --chart-6: #c98a92;

  --shadow-card: 0 1px 2px color-mix(in srgb, #000000 30%, transparent), 0 10px 28px color-mix(in srgb, #000000 40%, transparent);
  --shadow-raised: 0 4px 10px color-mix(in srgb, #000000 35%, transparent), 0 18px 40px color-mix(in srgb, #000000 46%, transparent);
  --shadow-btn: 0 2px 8px color-mix(in srgb, #000000 40%, transparent);
  --shadow-xs: 0 1px 2px color-mix(in srgb, #000000 30%, transparent);

  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  --ring-danger: 0 0 0 3px color-mix(in srgb, var(--danger) 35%, transparent);

  --x-band-bg: #150d08;
  --x-band-ink: #f3e6d4;
  --x-band-muted: #b8a58c;
  --x-postcard-1: #2e2116;
  --x-postcard-2: #362717;
  --x-postcard-3: #2a1e14;
  --x-ticket-edge: #40301f;
  --x-hero-ink: #f8f1e4;
  --x-hero-muted: color-mix(in srgb, #f8f1e4 82%, transparent);
}

/*
 * app.css — Brew Lane's own paper: the hero photo bar, the dotted-leader
 * menu, the espresso story band, the hours table, the pinned postcards and
 * the ticket-stub booking form. Tokens only.
 */

/* ---- Hero -------------------------------------------------------------- */
.hero-photo {
  @apply relative flex min-h-[100svh] flex-col overflow-hidden;
  /* A solid ground behind the photo — the real ancestor background every
     piece of overlay text reads against, in both modes, not just the
     translucent scrim layered visually on top of the photo. */
  background: var(--x-band-bg);
}
.hero-media {
  @apply absolute inset-0 aspect-auto h-full w-full rounded-none;
}
.hero-scrim {
  @apply pointer-events-none absolute inset-0;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 32%);
}

.hero-bar { @apply relative z-10 mx-auto w-full max-w-6xl px-6 py-6; }
.hero-toggle-pos { @apply absolute right-6 top-6; }
.hero-bar-grid {
  @apply flex flex-col items-center gap-3 text-center md:grid md:grid-cols-[1fr_auto_1fr] md:items-center;
}
.hero-links { @apply flex flex-wrap items-center justify-center gap-5 md:gap-7; }
.hero-links-left { @apply order-2 md:order-1 md:justify-self-start; }
.hero-links-right { @apply order-3 md:order-3 md:justify-self-end; }
.hero-bar-links {
  @apply text-sm font-medium no-underline transition-opacity duration-150;
  color: var(--x-hero-ink);
}
.hero-bar-links:hover { opacity: 0.75; }
.hero-wordmark {
  @apply order-1 justify-self-center text-xl font-semibold no-underline md:order-2;
  color: var(--x-hero-ink);
}
.hero-toggle { color: var(--x-hero-ink); }
.hero-toggle:hover { background: rgba(0, 0, 0, 0.25); }

.hero-copy {
  @apply relative z-10 mx-auto flex max-w-3xl flex-1 flex-col items-center justify-end px-6 pb-20 pt-10 text-center;
}
.hero-headline {
  @apply text-6xl leading-[0.95] tracking-tight text-balance sm:text-7xl md:text-8xl;
  color: var(--x-hero-ink);
}
.hero-headline.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.06em;
  margin-left: 0.05em;
  height: 0.85em;
  background: currentColor;
  vertical-align: -0.05em;
  animation: caret-blink 900ms steps(1) infinite;
}
.hero-tagline {
  @apply mt-6 max-w-xl text-lg;
  color: var(--x-hero-muted);
}
.hero-actions { @apply mt-9 flex w-full flex-col items-stretch justify-center gap-4 sm:w-auto sm:flex-row sm:items-center; }
.hero-actions .btn { @apply w-full sm:w-auto; }
.hero-outline {
  border-color: color-mix(in srgb, var(--x-hero-ink) 55%, transparent);
  color: var(--x-hero-ink);
  background: var(--x-band-bg);
}
.hero-outline:hover {
  border-color: var(--x-hero-ink);
  background: color-mix(in srgb, var(--x-band-bg) 75%, var(--x-hero-ink) 25%);
}

@keyframes caret-blink { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---- Section rhythm ------------------------------------------------------ */
.section-pad { @apply py-20 md:py-28; }

/* ---- Menu: dotted leaders, not cards ------------------------------------- */
.menu-grid { @apply grid gap-x-16 gap-y-12 md:grid-cols-2; }
.menu-col > .menu-list { @apply mt-6; }
.menu-list { @apply flex flex-col; }
.menu-row {
  @apply flex items-baseline gap-2 py-3;
}
.menu-row + .menu-row { @apply border-t border-border; border-top-width: var(--border-w, 1px); }
.menu-name { @apply inline-flex flex-wrap items-center whitespace-normal font-display text-lg text-ink; }
.menu-leader {
  @apply relative top-[-0.2em] h-0 flex-1 border-b-2 border-dotted;
  border-color: var(--border-strong);
  min-width: 1.5rem;
}
.menu-price { @apply shrink-0 font-display text-lg text-accent-text; }
.menu-note { @apply -mt-1 pb-3 text-sm text-muted; }

/* ---- Story: dark espresso band ------------------------------------------- */
.story-band {
  @apply py-20 md:py-28;
  background: var(--x-band-bg);
  color: var(--x-band-ink);
}
.story-media { @apply min-h-[480px] min-w-0 shadow-none; border-radius: var(--radius-card); }
.story-copy p { color: var(--x-band-ink); }
.story-year {
  @apply mr-2 inline-block rounded px-1.5 py-0.5 align-middle text-base;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--x-band-bg);
  background: var(--x-band-ink);
}

/* ---- Hours & find us ------------------------------------------------------ */
.hours-band { background: var(--surface-2); }
.hours-table { @apply w-full border-collapse; }
.hours-table tr + tr th, .hours-table tr + tr td { border-top: 1px solid var(--border); }
.hours-table th, .hours-table td { @apply py-2.5 text-left text-base font-normal; }
.hours-table th { @apply text-ink; font-weight: 500; }
.hours-table td { @apply text-right text-muted; }
.hours-table tr { display: flex; justify-content: space-between; }

/* ---- Reviews: pinned postcards, not cards --------------------------------- */
.postcard-wall { @apply grid gap-x-10 gap-y-16 md:grid-cols-3; }
.postcard {
  @apply relative flex flex-col gap-4 border p-6 pt-8;
  background: var(--x-postcard-1);
  border-color: var(--x-ticket-edge);
  border-width: var(--border-w, 1px);
  border-radius: 4px;
  box-shadow: var(--shadow-card);
}
.postcard-b { background: var(--x-postcard-2); }
.postcard-c { background: var(--x-postcard-3); }
.postcard-a { transform: rotate(-2.5deg); }
.postcard-b { transform: rotate(1.5deg) translateY(0.75rem); }
.postcard-c { transform: rotate(-1deg) translateY(-0.5rem); }
.postcard-pin {
  @apply absolute left-1/2 top-0 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full;
  background: var(--accent);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}
.stars { @apply flex items-center gap-0.5; }
.postcard-quote {
  font-family: var(--font-mono);
  @apply text-xl leading-snug text-ink;
}
.postcard-caption { @apply text-sm font-medium text-muted; }

/* ---- Booking: a ticket stub, not a boxed form ------------------------------ */
.ticket-stub {
  @apply relative mx-auto w-full border bg-surface p-8;
  border-color: var(--x-ticket-edge);
  border-width: var(--border-w, 1px);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-raised);
}
.ticket-stub::before, .ticket-stub::after {
  content: "";
  @apply absolute top-1/2 size-6 -translate-y-1/2 rounded-full bg-canvas;
}
.ticket-stub::before { left: -0.75rem; }
.ticket-stub::after { right: -0.75rem; }
.ticket-stub-top { @apply border-b border-dashed pb-5; border-color: var(--x-ticket-edge); }
/* Date / time / people: always a deliberate whole — one column until there
   is room for all three evenly, never a lone third item left to wrap. */
.field-row-3 { @apply grid grid-cols-1 gap-4 sm:grid-cols-3; }
.field-row-3 > .field { @apply mt-0; }
.ticket-eyebrow { @apply text-sm text-muted; }
.ticket-stub-confirmed { @apply text-center; }
.ticket-stamp {
  @apply mx-auto mb-4 w-fit -rotate-6 rounded border-2 px-3 py-1 text-sm font-semibold;
  font-family: var(--font-mono);
  border-color: var(--success-strong);
  color: var(--success-strong);
}
.ticket-details { @apply grid grid-cols-2 gap-4 text-left sm:grid-cols-4; }
.ticket-details dt { @apply text-xs font-medium uppercase tracking-wide text-muted; }
.ticket-details dd { @apply mt-1 font-display text-lg; }

/* ---- Closing --------------------------------------------------------------- */
.closing-band { @apply bg-accent py-24 text-accent-ink md:py-32; }
.closing-headline { @apply text-6xl leading-[0.95] tracking-tight sm:text-7xl md:text-8xl; }

/* ---- Motion: the hero headline types in once, everything else rests still - */
html.reduced-motion .hero-headline.is-typing::after { animation: none; }