/* storefront/tokens.css — Design tokens: colour, type, spacing, radii and the per-brand accents.
   Part 1 of 9; files are linked in this order in views/storefront.html (cascade order matters).

   The website is light only: near-white pages, a warmer ivory for alternating sections, ink text
   with real contrast and Mini Kitchen gold as the single accent. Hairlines do the work that heavy
   shadows and boxes used to do. */

:root {
  /* Surfaces */
  --bg-page: #fcfbf8; /* near-white page */
  --bg-ivory: #f6f2ea; /* alternating sections, footer, quiet panels */
  --bg-card: #ffffff; /* cards, drawers, dialogs */
  --bg-sunken: #f1ece2; /* tracks of segmented controls, image placeholders */

  /* Text (contrast measured on --bg-page) */
  --ink: #1d1b18; /* headings — 16:1 */
  --text: #3a3630; /* body — 11:1 */
  --text-muted: #69625a; /* secondary text — 5.8:1 */
  --text-on-dark: #ffffff;

  --text-placeholder: #776f65; /* input placeholders — 4.8:1 on white */

  /* Lines */
  --line: #e8e2d7; /* hairlines between things */
  --line-strong: #d6ccbb; /* inputs, section rules */

  /* Brand accent: Mini Kitchen gold (catering, about, contact pages) */
  --brand-primary: #c59b27; /* decorative: rules, rings, active marks */
  --brand-ink: #8a6914; /* accent text on light surfaces — ≥ 4.5:1 */
  --brand-soft: #f7efd9; /* tinted backgrounds */

  /* Actions */
  --whatsapp: #1a8045; /* white text on it — 5:1 */
  --whatsapp-hover: #146a39;
  --danger: #b42318;
  --success: #1d7a45;

  /* Type */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-body: 1.03rem; /* 16.5px */
  --fs-small: 0.9rem;
  --fs-xs: 0.8rem;
  --fs-eyebrow: 0.74rem;
  --fs-h1: clamp(2.3rem, 4.4vw, 3.9rem);
  --fs-h2: clamp(1.85rem, 3vw, 2.6rem);
  --fs-h3: 1.4rem;
  --tracking-caps: 0.2em;

  /* Shape: radii by role, not on every block */
  --radius-photo: 4px;
  --radius-control: 999px; /* buttons, chips */
  --radius-field: 8px; /* inputs */
  --radius-card: 12px; /* menu cards, panels */
  --radius-dialog: 16px;

  /* Elevation: only floating things get a shadow; cards lift softly on hover */
  --shadow-soft: 0 1px 2px rgba(29, 27, 24, 0.04), 0 10px 28px -16px rgba(29, 27, 24, 0.16);
  --shadow-lift: 0 2px 6px rgba(29, 27, 24, 0.04), 0 22px 44px -22px rgba(29, 27, 24, 0.28);
  --shadow-header: 0 1px 0 rgba(29, 27, 24, 0.04), 0 10px 30px -18px rgba(29, 27, 24, 0.22);
  --shadow-float: 0 18px 48px -18px rgba(29, 27, 24, 0.28);
  --shadow-dialog: 0 30px 80px -24px rgba(29, 27, 24, 0.35);

  /* Spacing scale (4px steps up to 16, then a doubling rhythm) — use these for new blocks */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --block-gap: clamp(36px, 5vw, 56px); /* section header → content */

  /* Layout */
  --header-h: 76px;
  --section-y: clamp(64px, 9vw, 112px);
  --container: 1240px;
  --gutter: 24px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: all 0.25s var(--ease);
  --bar-h: 0px; /* height of the phone bottom bar on catering pages (set in responsive.css) */
}

/* Restaurant pages: deep cedar green accent */
body[data-brand='restaurant'] {
  --brand-primary: #3d7a5e;
  --brand-ink: #2b5e47;
  --brand-soft: #e8f1ec;
}

/* Delivery page: muted terracotta accent */
body[data-brand='delivery'] {
  --brand-primary: #c4623a;
  --brand-ink: #a2461f;
  --brand-soft: #f9ebe4;
}