/*
 * theme.css — Chai Corner. Warm chai-stall palette: spice-rust accent on a
 * milky canvas, with a deep brewed-tea band. Both modes written on purpose.
 */

:root {
  --canvas: #fbf5ea;
  --surface: #fffcf6;
  --surface-2: #f2e6d2;
  --border: #e4d3b9;
  --border-strong: #b89d7c;
  --ink: #2a1a10;
  --muted: #655140;
  --accent: #9a3b12;
  --accent-hover: #812f0c;
  --accent-ink: #ffffff;
  --accent-text: #9a3b12;
  --accent-strong: #7a2d0c;
  --accent-soft: #f6dfc9;
  --accent-border: #dfb68f;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dfebe3;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e6dd;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f2dfdf;
  --danger-strong: #b91c1c;
  --chart-1: #9a3b12;
  --chart-2: #7c285c;
  --chart-3: #7c350c;
  --chart-4: #425605;
  --chart-5: #0b5668;
  --chart-6: #5152a5;

  --x-band-bg: #2a1a10;
  --x-band-ink: #fbf0dc;
  --x-band-muted: #d9c3a6;
  --x-band-accent: #f0a35e;
  --x-hero-ink: #ffffff;

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.03em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 999px;
  --radius-card: 1.25rem;
}

html[data-theme="dark"] {
  --canvas: #1b110a;
  --surface: #271810;
  --surface-2: #33211a;
  --border: #4a3427;
  --border-strong: #7a6350;
  --ink: #f8eddc;
  --muted: #c9b39b;
  --accent: #e8893f;
  --accent-hover: #f09a56;
  --accent-ink: #2a1608;
  --accent-text: #f0a35e;
  --accent-strong: #f5b57a;
  --accent-soft: #432a18;
  --accent-border: #7a4a28;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #172f22;
  --success-strong: #58a474;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #3a2517;
  --warning-strong: #ca854f;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #3b191b;
  --danger-strong: #d57575;
  --chart-1: #e8893f;
  --chart-2: #cb70a4;
  --chart-3: #be6436;
  --chart-4: #98911a;
  --chart-5: #159670;
  --chart-6: #1c9ec8;

  --x-band-bg: #120a05;
  --x-band-ink: #f8eddc;
  --x-band-muted: #cdb79e;
  --x-band-accent: #f0a35e;
  --x-hero-ink: #ffffff;
}

/*
 * app.css — Chai Corner. Only what no primitive or utility covers:
 * the hero photo scrim (so text over the photograph is always readable)
 * and the dark hours band.
 */

.hero-photo {
  position: relative;
  isolation: isolate;
  min-height: 34rem;
  overflow: hidden;
  background: var(--x-band-bg);
}

.hero-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Strong dark wash, heaviest where the words sit, so the white text stays
   legible on any part of the photograph. */
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.7) 45%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

.hero-copy {
  color: var(--x-hero-ink);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.hero-copy .hero-sub {
  color: var(--x-hero-ink);
}

.band-dark {
  background: var(--x-band-bg);
  color: var(--x-band-ink);
}

.band-dark .band-muted {
  color: var(--x-band-muted);
}

.band-dark .band-accent {
  color: var(--x-band-accent);
}

.price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}