/* palette-source: archetype — no photo, logo or shopfront of Amber's own was
   reachable (see company-profile.md → Assets/Gaps). palette.mjs was run with
   --archetype warm-classic only to get this file's structure and stamp; every
   --color-* value below was then replaced by hand with a bespoke amber-hued
   archetype (hue 46, built on the shop's own name, "Amber" being a colour)
   because warm-classic (#3e2b1e) is Ernesto's Coffee's exact primary and two
   Cupanstudio sites must not be twins. Ratios verified by hand: primary on bg
   11.60:1, accent as link on bg 4.64:1, white on accent 4.99:1 (ink on accent
   is only 3.22:1, so on-accent is white), ink on bg 14.93:1, muted on bg
   4.56:1, bg on primary 11.60:1. All PASS. See company-profile.md → Brand. */
/*
  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: #3c3316;        /* main brand colour: headings, header, footer */
  --color-on-primary: #f8f7f2;     /* text on primary */
  --color-accent: #a16012;         /* buttons, links, highlights */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f8f7f2;             /* page background */
  --color-surface: #fdfdfc;        /* cards, menu panels */
  --color-ink: #23211a;            /* body text */
  --color-muted: #767060;          /* secondary text */
  --color-border: #e7e4da;         /* hairlines */

  /* Type — set the Google Fonts import in fonts.css to match */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-weight: 500;
  --display-tracking: -0.01em;
  --display-transform: none;       /* uppercase for shouty brands, none otherwise */

  /* Shape and texture */
  --radius: 4px;                   /* near-square: quiet, editorial, no shopfront to echo */
  --radius-sm: 2px;
  --hero-overlay: linear-gradient(180deg, rgba(20, 16, 4, 0.4) 0%, rgba(20, 16, 4, 0.22) 35%, rgba(20, 16, 4, 0.58) 100%);
  --shadow: 0 10px 30px rgba(35, 33, 26, 0.08);
}