/* Cook Aloud — shared design tokens ("Marché").
 *
 * Single source of truth for palette, elevation, and geometry. Pages link this
 * first, then add their own page-specific component styles. Bright-bistro feel:
 * warm white grounds, ochre as the structural/secondary accent, and a friendly
 * terracotta as the primary "go / act" colour. Token NAMES are load-bearing
 * (every page references them) — only their values change between re-skins.
 * NB: our accent stays out of the green family on purpose (SousChef clash). */
:root {
  /* Surfaces */
  --cream:#fbf7ee; --paper:#fffdf7; --line:#ece3d1;
  /* Ink */
  --ink:#2a2620; --muted:#7a715f; --faint:#b3a892;
  /* Brand — terracotta: identity + primary CTAs */
  --primary:#c9663a; --primary-ink:#ffffff; --primary-hover:#b3532e; --accent:#b3532e;
  /* Ochre — secondary / utility actions (shopping, checkboxes) + structure */
  --forest:#b0821f; --forest-hover:#966e18; --forest-ink:#ffffff;
  --sage-soft:#faf0d8; --green:#8a6410;
  /* Accent */
  --gold:#d99a2b;
  /* Elevation */
  --shadow-sm:0 1px 2px rgba(60,45,25,.06), 0 2px 8px rgba(60,45,25,.05);
  --shadow-md:0 6px 20px rgba(60,45,25,.10), 0 2px 6px rgba(60,45,25,.06);
  /* Geometry */
  --r-card:16px; --r-input:12px; --r-pill:999px;
}

* { box-sizing: border-box; }

/* Metadata chip — small pill for step/ingredient counts, tags, etc.
   Marché: soft cream fill, ochre-brown text, warm hairline. */
.chip {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11.5px; font-weight:500; line-height:1.4; white-space:nowrap;
  color:#9a6714; background:#fff4e6;
  border:1px solid #f0dcbf; border-radius:var(--r-pill); padding:3px 9px;
}