/*
 * theme.css — Spice Route Kitchen. Dimly lit dining room at night: char-dark
 * walls, turmeric and brass light, one cream band for the menu. Opens dark;
 * the light mode is the same house by day — cream walls, dark ink.
 */

:root {
  color-scheme: dark;

  --canvas: #1a1310;
  --surface: #312b28;
  --surface-2: #3d332c;
  --border: #453a33;
  --border-strong: #5c4d43;
  --ink: #f2e8d9;
  --muted: #a39a90;

  --accent: #c1440e;
  --accent-hover: #9f3a0c;
  --accent-ink: #fff8ef;
  --accent-text: #d4a017;
  --accent-strong: #da8f6d;
  --accent-soft: color-mix(in srgb, var(--accent) 20%, var(--surface));
  --accent-border: color-mix(in srgb, var(--accent) 40%, var(--border));

  --success: #6b8f4e;
  --success-ink: #fff8ef;
  --success-soft: color-mix(in srgb, var(--success) 22%, var(--surface));
  --success-strong: #9fc178;

  --warning: #b8860b;
  --warning-ink: #fff8ef;
  --warning-soft: color-mix(in srgb, var(--warning) 22%, var(--surface));
  --warning-strong: #d9ab3e;

  --danger: #a63a1f;
  --danger-ink: #fff8ef;
  --danger-soft: color-mix(in srgb, var(--danger) 24%, var(--surface));
  --danger-strong: #e48d73;

  --chart-1: #c1440e;
  --chart-2: #d4a017;
  --chart-3: #6b8f4e;
  --chart-4: #d37a52;
  --chart-5: #9c9389;
  --chart-6: #7a5c46;

  --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: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 600;
  --display-tracking: 0em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 0.625rem;
  --radius-card: 1.125rem;
  --radius-input: 0.625rem;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --card-pad: 1.75rem;
  --caps: none;
  --caps-tracking: 0.02em;
  --btn-weight: 600;
  --measure: 34rem;

  --shadow-btn: 0 1px 2px color-mix(in srgb, var(--ink) 25%, transparent);
  --shadow-card: 0 1px 3px color-mix(in srgb, var(--ink) 12%, transparent),
    0 16px 36px -18px color-mix(in srgb, var(--ink) 40%, transparent);
  --shadow-raised: 0 24px 60px -20px color-mix(in srgb, var(--ink) 55%, transparent),
    0 6px 18px color-mix(in srgb, var(--ink) 25%, transparent);

  --gradient-hero: linear-gradient(
    180deg,
    color-mix(in srgb, var(--canvas) 55%, transparent) 0%,
    transparent 16%,
    transparent 32%,
    color-mix(in srgb, var(--canvas) 64%, transparent) 56%,
    color-mix(in srgb, var(--canvas) 90%, transparent) 80%,
    color-mix(in srgb, var(--canvas) 97%, transparent) 100%
  );

  /* This app's own device: the one cream band that carries the menu,
     independent of the light/dark switch — the room's single warm room. */
  --x-band-bg: #f2e8d9;
  --x-band-ink: #2a1f1a;
  --x-band-muted: #6b5c4f;
  --x-band-line: #d9c8ae;
  --x-veg: #b9790a;
  --x-nonveg: #a63a1f;
}

html[data-theme="light"] {
  color-scheme: light;

  --canvas: #f2e8d9;
  --surface: #fbf3e4;
  --surface-2: #ecdfc4;
  --border: #ddccae;
  --border-strong: #c4ae87;
  --ink: #2a1f1a;
  --muted: #6b5c4f;

  --accent: #c1440e;
  --accent-hover: #a83a0c;
  --accent-ink: #fff8ef;
  --accent-text: #8a5a0a;
  --accent-strong: #96431f;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --accent-border: color-mix(in srgb, var(--accent) 35%, var(--border));

  --success: #4f7a34;
  --success-ink: #fff8ef;
  --success-soft: color-mix(in srgb, var(--success) 18%, var(--surface));
  --success-strong: #3c5e27;

  --warning: #9c6b12;
  --warning-ink: #fff8ef;
  --warning-soft: color-mix(in srgb, var(--warning) 18%, var(--surface));
  --warning-strong: #7a5410;

  --danger: #a63a1f;
  --danger-ink: #fff8ef;
  --danger-soft: color-mix(in srgb, var(--danger) 18%, var(--surface));
  --danger-strong: #832c17;

  --chart-1: #c1440e;
  --chart-2: #8a5a0a;
  --chart-3: #4f7a34;
  --chart-4: #96431f;
  --chart-5: #6b5c4f;
  --chart-6: #5c4a38;
}

/*
 * app.css — Spice Route Kitchen's own screens: the full-bleed tandoor hero
 * with its overlay bar, the typographic menu list, and the closing glow.
 * Tokens only, as the primitives are.
 */

/* ---- Hero: one photograph, the bar laid over it, the headline over the
   lower third. The single gradient fades the top (for the bar) and the
   bottom (for the headline) in one pass. -------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--canvas);
}
.hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
  pointer-events: none;
}
.hero-content { position: absolute; inset: 0; z-index: 1; }

/* The headline rests visible and lifts in once, on load — the one moment
   this page moves. */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
.hero-headline {
  opacity: 1;
  transform: none;
}
.hero-headline[data-inview]:not(.is-in) {
  opacity: 0;
  transform: translateY(22px);
}
.hero-headline.is-in {
  animation: hero-rise 900ms var(--ease-out) both;
}

/* ---- The overlay bar: transparent over the hero, solid once scrolled past
   it. behavior belongs to app.js; the two states are drawn here. --------- */
.site-nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-sticky);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 250ms var(--ease), border-color 250ms var(--ease), box-shadow 250ms var(--ease);
}
.site-nav.is-solid {
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-card);
}

/* ---- The menu: a plain typographic list, never a card grid. ----------- */
.menu-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--x-band-line);
}
.menu-row:last-child { border-bottom: none; }
.menu-name-line { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.menu-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
.menu-dot.veg { background: var(--x-veg); }
.menu-dot.nonveg { background: var(--x-nonveg); }
.menu-desc { color: var(--x-band-muted); }
.menu-price {
  font-family: var(--font-mono);
  color: var(--x-band-ink);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- The closing band: a quiet radial warmth behind the last line. ---- */
.closing-glow {
  position: relative;
  overflow: hidden;
}
.closing-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 55% at 50% 30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  pointer-events: none;
}