/* palette-source: sampled — written by palette.mjs on 2026-09-24 */
/*
  BRAND TOKENS — the only stylesheet the builder edits for colour and type.
  Everything in base.css reads from these variables. Keep every value here
  traceable to the shop's own branding (logo, shopfront, Instagram grid) or to
  the design-system run recorded in company-profile.md.
*/
:root {
  /* Colour */
  --color-primary: #232219;        /* palette.mjs, sampled from the shop's own photos (breakfast dish + Instagram opening graphic): darkest saturated colour with real presence — the logo (150x150, mostly white ground) had no dark chromatic pixel of its own, see company-profile.md Brand */
  --color-on-primary: #f8f8f2;     /* text on primary */
  --color-accent: #a35d10;         /* palette.mjs: the plated breakfast's paprika/potato amber, darkened for 4.5:1 link contrast */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f8f8f2;             /* page background */
  --color-surface: #fdfdfc;        /* cards, menu panels */
  --color-ink: #23231a;            /* body text */
  --color-muted: #706f5c;          /* secondary text */
  --color-border: #e7e6da;         /* hairlines */

  /* Type — set the Google Fonts import in fonts.css to match */
  --font-display: "Fredoka", "Nunito", system-ui, sans-serif;   /* the logo's bold rounded slab wordmark ("Sunny Side Up") */
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 600;
  --display-tracking: 0em;
  --display-transform: none;       /* uppercase for shouty brands, none otherwise */

  /* Shape and texture */
  --radius: 18px;                  /* rounded and playful, echoing the logo's badge circle */
  --radius-sm: 10px;
  --hero-overlay: linear-gradient(180deg, rgba(21, 17, 12, 0.2), rgba(21, 17, 12, 0.62));
  --shadow: 0 10px 30px rgba(33, 27, 22, 0.08);
}