/* ==========================================================================
   MetsePole — restyled after tarata.pl: bold red, pill controls, rounded
   geometric headings.

   Palette lifted from tarata.pl's own --color-primary / --Brand-Red tokens
   (main.css :root). Radii match its buttons (pill, ~9999px) and cards (16px).
   Outfit is tarata's heading/body font (Google Fonts); no self-hosted file is
   bundled here yet, so this falls back to a geometric-leaning system stack —
   see TODO in engine/head.php notes below to self-host Outfit for a pixel match.

   This file is the only place the identity lives: colours, type, radii and
   rhythm. Blocks read everything through var(--kit-…), nothing hardcoded.
   ========================================================================== */

:root {
  /* tarata's --Brand-Red is the primary; at 6.14:1 on white it carries text
     and buttons directly, no separate "raw" decorative tone needed. */
  --kit-brand-raw: #C11727;

  --kit-ink: #01081B;
  --kit-body: #4D525F;
  --kit-muted: #66707F;

  --kit-primary: #C11727;
  --kit-primary-hover: #690A13;
  /* Bootstrap needs the same colours as RGB triplets — keep these in sync */
  --kit-primary-rgb: 193, 23, 39;
  --kit-primary-hover-rgb: 105, 10, 19;
  --kit-primary-soft: #FFE5E8;
  --kit-accent: #C11727;
  --kit-on-primary: #FFFFFF;

  --kit-surface: #FFFFFF;
  --kit-surface-alt: #F6F6F6;
  --kit-line: #D9D9D9;

  /* TODO: self-host Outfit (fonts/outfit-var.woff2) for a pixel-accurate match,
     the way design 1 self-hosts Work Sans. Until then this stack approximates
     Outfit's rounded-geometric character with fonts already on most devices. */
  --kit-font: 'Century Gothic', 'Avenir Next', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --kit-font-heading: var(--kit-font);
  --kit-heading-weight: 700;
  --kit-heading-tracking: -.01em;
  --kit-heading-line: 1.1;

  /* Pill buttons, rounded cards — matches tarata's border-radius:100px / 16px */
  --kit-radius: 100px;
  --kit-radius-lg: 16px;
  --kit-section-y: 64px;
  --kit-btn-height: 56px;

  /* extra tokens the shared blocks reference */
  --kit-lime: #D4F8D3;
  --kit-lavender: #DBEAFD;
  --kit-blush: #FEA7A7;
  --kit-phone-frame: var(--kit-ink);
}