/* ==== PRINT BUDDY WEBSITE MINIMAL: TOKENS (owner's design system, 14 Nov 2026; design/minimal-2026-11-14/website/tokens.json).
   Step A, Foundations: every token of the system as a CSS custom property named exactly as in tokens.json ({x} aliases = var(--x)).
   Linked right after site.css on every shop page (never HQ, the till, the designer or the sign-in page). Page and component rules
   read these names; never write the colours or sizes by eye.
   Names the site already had: where the meaning is the same, the system's value is used here (tint, warning-tint, success,
   success-tint, shadow-menu: small colour and shadow steps). FOUR CORNER NAMES ARE HELD at today's values (radius-sm, radius-control,
   radius-card, radius-pill), because the whole site's tags, fields and cards read them and Step A must look the same: they move to
   the system's values (8, 12, 20 and 9999 px) as each component is restyled in the later steps (the lead decides when).
   CORNERS: every corner is its size x var(--pb-r-scale, var(--hq-r-scale, 1)), so the Corner Roundness control (settings.cornerScale sets --pb-r-scale
   and --hq-r-scale on <html>) still works; unset = the system's values.
   The two dark bands (.topbar, footer.ft2 in site.css) keep turning --ink, --muted, --line and the rest light inside themselves. ==== */
:root,[data-theme]{
  /* colour */
  --logo:#8CA527;
  --logo-ink:var(--ink);
  --ink:#2A2A33;
  --muted:#64626C;
  --surface:#FFFFFF;
  --panel:#F8F7F4;
  --tint:#EFEFF2;
  --tint-hover:#E6E6EA;
  --material:rgba(255,255,255,0.82);
  --line:#E6E6EA;
  --line-strong:#CDCDD4;
  --primary:#33333D;
  --primary-hover:#22222A;
  --on-primary:var(--surface);
  --focus:var(--primary);
  --danger:#B3261E;
  --danger-tint:#FCEEEC;
  --warning:#9A5B0E;
  --warning-tint:#FFF4E2;
  --success:#2F6B4F;
  --success-tint:#E6F2EB;
  --info:#3A6488;
  --info-tint:#E7EFF6;
  --field:#F3F3F5;
  --scrim:rgba(42,42,51,0.24);
  --footer:#2A2A33;
  --footer-ink:#F3F3F5;
  --footer-muted:#A9A8B0;

  /* type */
  --sans:Montserrat, -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;   /* families.sans (the site's own --font-sans is left as it is) */

  /* spacing (a 4px rhythm) */
  --space-4:4px;
  --space-8:8px;
  --space-12:12px;
  --space-16:16px;
  --space-24:24px;
  --space-32:32px;
  --space-48:48px;
  --space-96:96px;

  /* corners: the system's size x the Corner Roundness scale */
  --radius-option:calc(14px * var(--pb-r-scale, var(--hq-r-scale, 1)));
  --radius-section:calc(28px * var(--pb-r-scale, var(--hq-r-scale, 1)));
  /* HELD at today's values until their components are restyled (system: 8px, 12px, 20px, 9999px) */
  /* --radius-sm: HELD (site.css keeps it, with the Corner Roundness formula of 14 Nov 2026) */
  --radius-control:calc(6px * var(--pb-r-scale, var(--hq-r-scale, 1)));
  --radius-card:calc(16px * var(--pb-r-scale, var(--hq-r-scale, 1)));
  /* --radius-pill: HELD (site.css keeps it as the square tag corner, var(--tag-radius), which follows --radius-sm) */

  /* sizes */
  --content-max:1240px;
  --utility-height:36px;
  --header-height:72px;
  --nav-height:48px;
  --button-height:48px;
  --touch-min:44px;

  /* shadows */
  --shadow-card:0 1px 2px rgba(42,42,51,0.04), 0 8px 24px rgba(42,42,51,0.05);
  --shadow-lift:0 2px 6px rgba(42,42,51,0.06), 0 18px 44px rgba(42,42,51,0.10);
  --shadow-option:0 1px 2px rgba(42,42,51,0.08), 0 4px 12px rgba(42,42,51,0.06);
  --shadow-bar:0 -1px 0 rgba(42,42,51,0.06), 0 -12px 32px rgba(42,42,51,0.08);
  --shadow-menu:0 0 0 0.5px rgba(42,42,51,0.08), 0 12px 32px rgba(42,42,51,0.16);

  /* timing */
  --duration-quick:160ms;
  --duration-sheet:320ms;
}
/* no motion for anyone who asks for less */
@media (prefers-reduced-motion:reduce){:root,[data-theme]{--duration-quick:0ms;--duration-sheet:0ms}}

/* THE LOGO (golden rule 6): the live inline logo SVG (site.js themeLogos), never redrawn. Lime PRINT in --logo, BUDDY in --logo-ink;
   inside the charcoal footer --logo-ink is the footer's text colour (site.css footer.ft2 sets it). */
.pblogo .pb-logo__accent{fill:var(--logo)}
.pblogo .pb-logo__ink{fill:var(--logo-ink,var(--ink))}