/*
  Sunday Table — design tokens
  Shared foundation for every page (landing, order form, and whatever comes next).
  Grounded in the brand brief: mustard oil, Thamma's Sunday cooking, a cream-and-terracotta
  home kitchen. All text/background pairs below meet WCAG AA (4.5:1+) — see the "text" vs
  "large/decorative" notes on the terracotta and mustard tokens.
*/

:root {
  color-scheme: light;

  /* ── Color ─────────────────────────────────────────── */
  --color-cream: #fbf3e6;
  --color-card: #ffffff;
  --color-ink: #3a2a1e;
  --color-ink-soft: #7a6a58;
  --color-border: #ecdfc9;

  --color-terracotta: #c1502e;      /* large headline text (>=24px) and decorative/non-text use only */
  --color-terracotta-dark: #9c3f22; /* body/small text, filled buttons and tags */
  --color-mustard: #d99a2b;         /* large text, decorative use, dark mode */
  --color-mustard-dark: #8f5f0e;    /* body/small text on light backgrounds (e.g. prices) */

  --color-error: #b3261e;
  --color-error-bg: #fbeae8;

  /* ── Type ──────────────────────────────────────────── */
  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, sans-serif;

  /* Bricolage Grotesque is a variable font — its optical-size (opsz) and weight (wght) axes
     genuinely reshape letterforms, from open/rounded to sharp/angular. This is the agreed
     "balanced" middle setting; apply with font-optical-sizing: none so it doesn't drift by size. */
  --display-variation: "opsz" 48, "wght" 700;

  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 0.95rem;
  --text-md: 1.05rem;
  --text-lg: 1.3rem;
  --text-xl: 1.8rem;
  --text-2xl: clamp(2rem, 6vw, 2.75rem);

  /* ── Spacing (4px base) ────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── Shape — "balanced" language: moderate radius, hairline borders ── */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --border-hairline: 1px solid var(--color-border);

  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-cream: #1e1712;
    --color-card: #2a201a;
    --color-ink: #f2e6d8;
    --color-ink-soft: #b8a893;
    --color-border: #3d3126;
    --color-terracotta: #e2734a;
    --color-terracotta-dark: #f0916c;
    --color-mustard: #e8b653;
    --color-mustard-dark: #e8b653; /* already AA-safe against dark backgrounds; no extra darkening needed */
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.5;
}

img { max-width: 100%; }
[hidden] { display: none !important; }

h1, h2 {
  font-family: var(--font-display);
  font-variation-settings: var(--display-variation);
  font-optical-sizing: none;
  color: var(--color-terracotta-dark);
  margin: 0 0 8px;
}