/*
 * theme.css — Tulsi Tiffin Service design-system values.
 *
 * Direction: a warm home-kitchen feel. Cream paper, tulsi (holy basil) green as
 * the brand, turmeric as the one bright accent. Bricolage Grotesque for the
 * headlines, DM Sans for reading. Opens light; dark mode is a deep green-black
 * kitchen at night with a pale basil accent, not the light palette inverted.
 */

:root {
  --canvas: #fbf5e6;
  --surface: #fffdf7;
  --surface-2: #f3ead2;
  --border: #e4d8ba;
  --border-strong: #8f7f55;
  --ink: #2a2118;
  --muted: #6b5d48;
  --accent: #2d6a3e;
  --accent-hover: #245733;
  --accent-ink: #ffffff;
  --accent-text: #2d6a3e;
  --accent-strong: #1f5230;
  --accent-soft: #dcebd8;
  --accent-border: #a9cba6;
  --success: #2f7d3a;
  --success-ink: #ffffff;
  --success-soft: #ddebdc;
  --success-strong: #1e5b2a;
  --warning: #b26a00;
  --warning-ink: #ffffff;
  --warning-soft: #f7e7c2;
  --warning-strong: #7a4700;
  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #f6dad6;
  --danger-strong: #8c1a14;
  --chart-1: #2d6a3e;
  --chart-2: #d98e04;
  --chart-3: #b5472a;
  --chart-4: #6b8e23;
  --chart-5: #7a4e8c;
  --chart-6: #2f6f8f;

  --x-band-bg: #1f4a2e;
  --x-band-ink: #fbf5e6;
  --x-band-muted: #c5d8c8;
  --x-turmeric: #f2b02e;
  --x-turmeric-hover: #e49f14;
  --x-turmeric-ink: #2a2118;

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "DM Sans", 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.08em;

  --radius-btn: 999px;
  --radius-card: 1.25rem;
  --radius-input: 0.875rem;
  --btn-weight: 700;
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent), 0 10px 28px color-mix(in srgb, var(--ink) 6%, transparent);
}

html[data-theme="dark"] {
  --canvas: #16130e;
  --surface: #201c15;
  --surface-2: #2a251b;
  --border: #3a3426;
  --border-strong: #8a7d5c;
  --ink: #f6efdd;
  --muted: #b3a78c;
  --accent: #8fd19e;
  --accent-hover: #a6ddb2;
  --accent-ink: #12261a;
  --accent-text: #8fd19e;
  --accent-strong: #b5e3bf;
  --accent-soft: #1f3526;
  --accent-border: #3a6045;
  --success: #4caf63;
  --success-ink: #0b1a10;
  --success-soft: #17301d;
  --success-strong: #8bd39b;
  --warning: #e0a030;
  --warning-ink: #2a1a00;
  --warning-soft: #3a2a10;
  --warning-strong: #f0c269;
  --danger: #e0675f;
  --danger-ink: #2a0a08;
  --danger-soft: #3b1816;
  --danger-strong: #f2a29c;
  --chart-1: #8fd19e;
  --chart-2: #f0b93a;
  --chart-3: #e58a6a;
  --chart-4: #a8c75e;
  --chart-5: #c298d6;
  --chart-6: #6fb5d9;

  --x-band-bg: #1d4429;
  --x-band-ink: #fbf5e6;
  --x-band-muted: #bcd3bf;
  --x-turmeric: #f2b02e;
  --x-turmeric-hover: #e49f14;
  --x-turmeric-ink: #2a2118;
}

/*
 * app.css — Tulsi Tiffin Service's own styles: the photo hero, the plan cards,
 * the dark closing band and the one moment that moves (the hero rising in).
 * Tokens only; colours live in theme.css.
 */

html {
  scroll-behavior: smooth;
}

html.reduced-motion {
  scroll-behavior: auto;
}

/* Logo mark */
.tt-mark-bg { fill: var(--accent); }
.tt-mark-leaf { fill: var(--accent-ink); }
.tt-mark-vein { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; }

/* Hero: a full-bleed photograph with the headline set on it */
.tt-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 36rem;
  overflow: hidden;
  isolation: isolate;
}

@media (min-width: 768px) {
  .tt-hero {
    min-height: 46rem;
  }
}

.tt-hero-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.45) 45%, transparent 80%);
}

.tt-on-photo { color: var(--x-band-ink); }
.tt-on-photo-soft { color: color-mix(in srgb, var(--x-band-ink) 86%, transparent); }

/* Buttons that sit on photographs and on the dark band */
.tt-cta {
  background: var(--x-turmeric);
  color: var(--x-turmeric-ink);
  border-color: var(--x-turmeric);
}

.tt-cta:hover {
  background: var(--x-turmeric-hover);
  border-color: var(--x-turmeric-hover);
  color: var(--x-turmeric-ink);
}

.tt-glass {
  background: color-mix(in srgb, var(--x-band-ink) 14%, transparent);
  color: var(--x-band-ink);
  border: 1px solid color-mix(in srgb, var(--x-band-ink) 45%, transparent);
}

.tt-glass:hover {
  background: color-mix(in srgb, var(--x-band-ink) 24%, transparent);
  color: var(--x-band-ink);
}

/* Plan cards */
.tt-plan {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.tt-plan-featured {
  background: var(--x-band-bg);
  color: var(--x-band-ink);
  border-color: var(--x-band-bg);
}

.tt-plan-note { color: var(--muted); }
.tt-plan-featured .tt-plan-note { color: var(--x-band-muted); }

.tt-flag {
  display: inline-block;
  flex-shrink: 0;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--x-turmeric);
  color: var(--x-turmeric-ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tt-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--canvas);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.tt-plan-row:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.tt-plan-featured .tt-plan-row {
  background: color-mix(in srgb, var(--x-band-ink) 8%, transparent);
  border-color: color-mix(in srgb, var(--x-band-ink) 22%, transparent);
}

.tt-plan-featured .tt-plan-row:hover {
  border-color: var(--x-turmeric);
}

.tt-plan-per { color: var(--muted); }
.tt-plan-featured .tt-plan-per { color: var(--x-band-muted); }

.tt-plan-row-icon { color: var(--accent-text); }
.tt-plan-featured .tt-plan-row-icon { color: var(--x-turmeric); }

/* Sample menu */
.tt-menu-row {
  border-top: 1px solid var(--border);
}

.tt-menu-row:last-child {
  border-bottom: 1px solid var(--border);
}

/* Dark closing band */
.tt-band {
  background: var(--x-band-bg);
  color: var(--x-band-ink);
}

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

.tt-step {
  border-top: 1px solid color-mix(in srgb, var(--x-band-ink) 22%, transparent);
}

.tt-step-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--x-turmeric);
  color: var(--x-turmeric-ink);
}

.tt-band a:not(.btn) {
  color: inherit;
}

/* The one moment that moves: the hero lines rise in. Everything rests visible. */
@keyframes tt-rise {
  from {
    transform: translateY(1.5rem);
  }
}

.tt-rise {
  animation: tt-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.tt-rise-2 { animation-delay: 0.12s; }
.tt-rise-3 { animation-delay: 0.24s; }

html.reduced-motion .tt-rise {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .tt-rise {
    animation: none;
  }

  .tt-plan-row {
    transition: none;
  }
}