/* ==========================================================================
   15 Minutes Bake v2 — Design Tokens
   Warm caramel/terracotta accent on a soft cream base, oklch throughout.
   Same variable names as v1's tokens.css so base/layout/components/utilities
   need no changes — only the values here define the new look.
   ========================================================================== */

:root {
  /* --- Raw color palette ------------------------------------------------ */
  --color-cream: oklch(0.97 0.012 80);
  --color-cream-soft: oklch(0.94 0.02 75);
  --color-ink: oklch(0.22 0.015 60);
  --color-ink-soft: oklch(0.4 0.02 60);
  --color-navy: oklch(0.3 0.02 60); /* warm espresso-dark, used for buttons/inverse sections */
  --color-navy-deep: oklch(0.24 0.02 60); /* footer / deepest inverse bg */
  --color-gold: oklch(0.5 0.11 45); /* terracotta accent */
  --color-gold-soft: oklch(0.8 0.09 75); /* light accent for eyebrows/badges on dark bg */
  --color-gold-dim: oklch(0.4 0.09 45); /* accent hover/pressed */
  --color-line: oklch(0.85 0.02 70);
  --color-line-inverse: oklch(0.4 0.02 60 / 0.32);
  --color-rust: oklch(0.5 0.15 35); /* used sparingly: local-favourite / promo callouts only */

  /* --- Semantic aliases --------------------------------------------------- */
  --bg-page: var(--color-cream);
  --bg-alt: var(--color-cream-soft);
  --bg-inverse: var(--color-navy);
  --bg-inverse-deep: var(--color-navy-deep);
  --text-body: var(--color-ink);
  --text-muted: var(--color-ink-soft);
  --text-inverse: oklch(0.85 0.012 80);
  --text-inverse-muted: oklch(0.7 0.012 80);
  --accent: var(--color-gold);
  --accent-soft: var(--color-gold-soft);
  --accent-dim: var(--color-gold-dim);
  --border: var(--color-line);
  --border-inverse: var(--color-line-inverse);
  --callout: var(--color-rust);

  /* --- Typography ---------------------------------------------------------- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-cjk: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;

  --fs-display: clamp(2.75rem, 5vw + 1rem, 5.5rem);
  --fs-h1: clamp(2.25rem, 3vw + 1rem, 3.5rem);
  --fs-h2: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  --fs-h3: clamp(1.25rem, 1vw + 1rem, 1.75rem);
  --fs-body-lg: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.12;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  /* --- Spacing (8px base) -------------------------------------------------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6rem;
  --space-8: 8rem;

  --section-pad: var(--space-7);

  /* --- Radius / shadow ------------------------------------------------------ */
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 18px;

  --shadow-card: 0 8px 24px -8px oklch(0.22 0.03 55 / 0.22);
  --shadow-lift: 0 16px 40px -12px oklch(0.22 0.03 55 / 0.32);

  /* --- Layout -------------------------------------------------------------- */
  --container-max: 1220px;
  --container-pad: var(--space-3);

  /* --- Motion -------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-base: 420ms;

  /* --- Photography ----------------------------------------------------------- */
  --photo-filter: sepia(0.1) saturate(1.08) brightness(1.03) contrast(1.02);
}

@media (max-width: 720px) {
  :root {
    --section-pad: var(--space-5);
  }
}