/*
  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.

  Full design system reference (usage rules, component patterns, layout
  conventions, documented exceptions): see ../DESIGN.md.
*/

:root {
  color-scheme: light;

  /* ── Color ─────────────────────────────────────────── */
  --color-cream: #fdf8f0;
  --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;

  /* A warm, muted olive-sage — the one "success/settled" color in the
     system. Deliberately not a bright saturated green (would clash with
     the warm terracotta/mustard/cream palette); leans yellow-green so it
     reads as part of the same family as mustard, not a foreign accent. */
  --color-sage: #5c7444;

  /* Text/icon color placed on a filled accent surface (a terracotta button,
     an active nav pill) — always this, never a literal #fff, so every
     filled surface stays legible if the accent color ever changes. */
  --color-on-accent: #fff;

  /* ── 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;

  /* Body/UI copy scale — every font-size in the site should be one of these,
     never a bespoke rem value. */
  --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);

  /* In-page section heading (h2 inside the order form, a menu category
     title) — distinct from --text-lg, which is reserved for large numeric
     emphasis (a total, a price), not headings. */
  --text-h2: 1.15rem;

  /* Every typeable form field (text/tel/number input, textarea) uses this,
     never --text-base — iOS Safari auto-zooms on focus for any input under
     16px, which this is set to avoid, independent of the body copy scale. */
  --text-input: 16px;

  /* ── 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);
}

/* Dark mode removed for now (deliberately) — revisit later. */

* { 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;
}

/* ── Logo — "Sunday Table" + "by Shaoni", used consistently everywhere ── */
.logo h1 { margin-bottom: 2px; }
.logo-by {
  margin: 0 0 var(--space-4);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-ink-soft);
}

/* Theme toggle removed along with dark mode for now — theme.js and the .theme-toggle
   markup are gone from the pages; re-add both when dark mode comes back. */

/* ── Fixed top-right icon link — shared position for a page's one external link ── */
.icon-link {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-4));
  right: var(--space-4);
  z-index: 20;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-card);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
}
.icon-link svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-link:hover { opacity: 0.85; }
.icon-link:focus-visible { outline: 2px solid var(--color-terracotta); outline-offset: 2px; }