/*
  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 from clients/le-petit-cafe-glasnevin/assets/google/owner-01.jpg,
   owner-05.jpg and assets/logo.jpg via palette.mjs, with one override — see
   company-profile.md Brand section for the full reasoning. */
:root {
  /* Colour */
  --color-primary: #0b5665;        /* main brand colour: headings, header, footer — override: the current (2026) shopfront's own teal pavement banners (palette.mjs sampled #107ea9 off owner-01.jpg), hue nudged 197→190 and darkened to L22 so headings clear 7:1 and this teal sits clear of every other teal/navy site in the portfolio */
  --color-on-primary: #f2f7f8;     /* text on primary */
  --color-accent: #7d3834;         /* buttons, links, highlights — the older logo's own maroon fascia colour (palette.mjs: #7d3834, 11% of logo pixels, its darkest saturated cluster), used here as the loud accent instead of the heading colour */
  --color-on-accent: #ffffff;      /* text on accent */
  --color-bg: #f2f7f8;             /* page background */
  --color-surface: #fcfdfd;        /* cards, menu panels */
  --color-ink: #1a2223;            /* body text */
  --color-muted: #607276;          /* secondary text */
  --color-border: #dae5e7;         /* hairlines */

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

  /* Shape and texture */
  --radius: 14px;                  /* 0 for sharp brands, 999px for pill brands */
  --radius-sm: 8px;
  --hero-overlay: linear-gradient(180deg, rgba(6, 30, 36, 0.28), rgba(6, 30, 36, 0.68));
  --shadow: 0 10px 30px rgba(11, 30, 34, 0.1);
}