/* ==========================================================================
   Design tokens — the only place raw colors and sizes are defined.
   Components read the semantic tokens (--bg, --fg, --accent…); the scope
   classes below remap them for each ground, color field and band.

   Breakpoints (CSS variables can't be used in media queries):
     600px  — two-column card grids
     1024px — desktop: 12-column grid, desktop type scale, inline nav
   ========================================================================== */

:root{
  /* palette — every pair used here is checked for WCAG 2.2 AA */
  --c-ink:#111111;
  --c-ink-page:#0E0E0E;
  --c-card-dark:#1A1A1A;
  --c-paper:#F3F1EC;
  --c-white:#FFFFFF;
  --c-red:#C4241A;
  --c-red-on-dark:#FF5C4D;
  --c-blue:#0F5FB3;
  --c-blue-mid:#3D74C2;
  --c-blue-on-dark:#7FB2EC;
  --c-yellow:#F2C230;
  --c-text-paper:#3D3A35;
  --c-text-grey:#595959;
  --c-text-dark:#F2F0EA;
  --c-text-dark-muted:#C9C6BF;
  --c-text-dark-soft:#B5B2AB;
  --c-rule-paper:#CFC9BC;
  --c-rule-white:#D9D9D9;
  --c-rule-dark:#333333;
  --c-rule-footer:#444444;
  --focus:#0F5FB3;

  /* type — mobile values; desktop values below */
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --fs-label:12px;
  --fs-small:15px;
  --fs-body:16px;
  --fs-lead:18px;
  --fs-h3:18px;
  --fs-h3-lg:22px;
  --fs-pull:22px;
  --fs-h2:32px;
  --fs-price:44px;
  --fs-footer:44px;
  --fs-h1:48px;

  --ls-caps:0.08em;
  --ls-h3:-0.02em;
  --ls-h2:-0.03em;
  --ls-h1:-0.04em;
  --lh-h2:1.02;
  --lh-h1:0.95;

  /* layout */
  --wrap:1184px;          /* 1280px canvas minus 2 × 48px margins */
  --margin:20px;
  --gutter:24px;
  --section:56px;
  --header:64px;
  --tap:44px;
  --btn-h:52px;
}

@media (min-width:1024px){
  :root{
    --fs-lead:20px;
    --fs-h3:20px;
    --fs-h3-lg:28px;
    --fs-pull:28px;
    --fs-h2:56px;
    --fs-price:56px;
    --fs-footer:72px;
    --fs-h1:96px;
    --ls-h2:-0.04em;
    --ls-h1:-0.045em;
    --lh-h2:0.98;
    --lh-h1:0.92;
    --margin:48px;
    --section:96px;
    --header:80px;
  }
}


/* ---------- grounds: the page background, set on <body> ---------- */
.ground-paper,
.ground-white{
  --bg:var(--c-paper);
  --fg:var(--c-ink);
  --muted:var(--c-text-paper);
  --soft:var(--c-text-grey);
  --rule:var(--c-rule-paper);
  --accent:var(--c-red);
  --btn-bg:var(--c-red);
  --btn-fg:var(--c-white);
  --btn-hover-bg:var(--c-ink);
  --btn-hover-fg:var(--c-white);
}
.ground-white{
  --bg:var(--c-white);
  --rule:var(--c-rule-white);
}
.ground-dark{
  --bg:var(--c-ink-page);
  --fg:var(--c-text-dark);
  --muted:var(--c-text-dark-muted);
  --soft:var(--c-text-dark-soft);
  --rule:var(--c-rule-dark);
  --accent:var(--c-red-on-dark);
  --btn-bg:var(--c-red);
  --btn-fg:var(--c-white);
  --btn-hover-bg:var(--c-text-dark);
  --btn-hover-fg:var(--c-ink);
  color-scheme:dark;
}

/* ---------- accent: book covers swaps red for blue ---------- */
.accent-blue{
  --accent:var(--c-blue);
  --btn-bg:var(--c-blue);
}

/* ---------- black band inside a light page ---------- */
.band-ink{
  --bg:var(--c-ink);
  --fg:var(--c-paper);
  --muted:var(--c-text-dark-muted);
  --soft:var(--c-text-dark-soft);
  --rule:var(--c-rule-dark);
  --accent:var(--c-red-on-dark);
  background:var(--bg);
  color:var(--fg);
}
.accent-blue .band-ink{--accent:var(--c-blue-on-dark);}

/* ---------- color fields: header + hero on Graphic, Book, Contact, Thanks ---------- */
.field-red,
.field-blue{
  --bg:var(--c-red);
  --fg:var(--c-white);
  --muted:var(--c-white);
  --soft:var(--c-white);
  --rule:var(--c-white);
  --accent:var(--c-white);
  --btn-bg:var(--c-white);
  --btn-fg:var(--c-ink);
  --btn-hover-bg:var(--c-ink);
  --btn-hover-fg:var(--c-white);
  --highlight:var(--c-yellow);
  background:var(--bg);
  color:var(--fg);
}
.field-blue{--bg:var(--c-blue);}
.field-yellow{
  --bg:var(--c-yellow);
  --fg:var(--c-ink);
  --muted:var(--c-ink);
  --soft:var(--c-ink);
  --rule:var(--c-ink);
  --accent:var(--c-ink);
  --btn-bg:var(--c-ink);
  --btn-fg:var(--c-white);
  --btn-hover-bg:var(--c-white);
  --btn-hover-fg:var(--c-ink);
  background:var(--bg);
  color:var(--fg);
}

/* ---------- service colors: posters, tiles, color bars ---------- */
.on-ink,
.on-red,
.on-blue{
  --fg:var(--c-white);
  background:var(--c-ink);
  color:var(--fg);
}
.on-red{background:var(--c-red);}
.on-blue{background:var(--c-blue);}