/*
  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.
*/
/* palette-source: sampled by hand from the shop's own owner-attributed Google
   photos (assets/google/owner-02/05/06/07/08/09.jpg) — no signage or logo
   exists to sample instead. palette.mjs's automatic run picked #291d18, the
   dark espresso/timber/black-tile brown that every coffee shop's photos
   produce, and proposed terracotta as a fallback accent since no second
   colour was detected automatically. Overridden here: owner-09.jpg (the
   espresso machine, wide shot) shows a genuine turquoise LED strip under the
   stainless counter edge, sampled directly off the pixels at h178 s51 l43 —
   and the same turquoise recurs as a cup in owner-07.jpg and a chair in
   owner-02.jpg, three of the six photos. That is a real, repeated, ownable
   shop colour that no other Cupanstudio client has, unlike espresso brown,
   which every one of them already does — so it is used as --color-primary
   (darkened to a deep teal-charcoal for headings and the header/footer) and
   the coffee's own warm brown, present in every photo, is --color-accent
   (buttons and links) instead of palette.mjs's generic terracotta fallback.
   Every pairing below is checked against WCAG; see company-profile.md Brand
   section for the full contrast report. */
:root {
  /* Colour */
  --color-primary: #153332;        /* main brand colour: headings, header, footer — the counter's own turquoise under-lighting (owner-09.jpg), darkened */
  --color-on-primary: #f4f9f8;     /* text on primary */
  --color-accent: #9d5e34;         /* buttons, links, highlights — the coffee's own warm brown, seen in every owner photo */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f4f9f8;             /* page background */
  --color-surface: #fcfdfd;        /* cards, menu panels */
  --color-ink: #1c2626;            /* body text */
  --color-muted: #5c7070;          /* secondary text */
  --color-border: #dde9e8;         /* hairlines */

  /* Type — set the Google Fonts import in fonts.css to match */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", 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 — no signage exists to say this shop is one */

  /* Shape and texture */
  --radius: 14px;                  /* soft — a quiet counter, not a sharp geometric brand */
  --radius-sm: 8px;
  --hero-overlay: linear-gradient(180deg, rgba(9, 22, 22, 0.22), rgba(9, 22, 22, 0.62));
  --shadow: 0 10px 30px rgba(21, 51, 50, 0.1);
}