/* ════════════════════════════════════════════════════════════════════════════
   01-TOKENS.CSS — Armonea CSS custom properties
   Hard rules: no hardcoded hex values outside this file · --site-* prefix only
════════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Colour: Primary ───────────────────────────────────────────────────── */
  --site-color-primary:              #F39369;  /* Orange 70s — CTAs, key headings */
  --site-color-primary-dark:         #000000;  /* Black — text on primary buttons */
  --site-color-primary-light:        #EFE7D9;  /* Beige Sable — backgrounds, tints */

  /* ── Colour: Secondary — Dark ──────────────────────────────────────────── */
  --site-color-secondary-dark-prune: #581F32;  /* Prune Acide — hover, errors, borders */
  --site-color-secondary-dark-green: #194E23;  /* Vert Nature — hover, success, borders */
  --site-color-secondary-dark-blue:  #383C72;  /* Blue Profond — hover, borders, rules */

  /* ── Colour: Secondary — Light ─────────────────────────────────────────── */
  --site-color-secondary-light-rose:   #F7A7C6;  /* Rose Bonbon — tags, accents */
  --site-color-secondary-light-yellow: #FCF483;  /* Jaune Solaire — btn hover, tints */
  --site-color-secondary-light-orange: #F39369;  /* Orange 70s (light use) */

  /* ── Colour: Semantic ──────────────────────────────────────────────────── */
  --site-color-secondary:   #F7A7C6;  /* Rose Bonbon — accents, tags */
  --site-color-surface:     #EFE7D9;  /* Beige Sable — card backgrounds */
  --site-color-bg:          #FFFFFF;  /* Page background */
  --site-color-text:        #353535;  /* Gris Anthracite — body copy */
  --site-color-text-muted:  #581F32;  /* Prune Acide — captions, meta */
  --site-color-border:      #383C72;  /* Blue Profond — dividers, rules */
  --site-color-success:     #194E23;  /* Vert Nature — confirmations */
  --site-color-error:       #581F32;  /* Prune Acide — form errors */

  /* ── Typography: Font families ─────────────────────────────────────────── */
  --site-font-heading: 'Source Serif 4', Georgia, serif;
  --site-font-body:    'DM Sans', system-ui, sans-serif;
  --site-font-mono:    'Atkinson Hyperlegible', monospace;

  /* ── Typography: Type scale ────────────────────────────────────────────── */
  --site-size-h1:      56px;
  --site-size-h2:      40px;
  --site-size-h3:      28px;
  --site-size-h4:      22px;
  --site-size-h5:      19px;
  --site-size-body:    17px;
  --site-size-small:   14px;
  --site-size-caption: 12px;

  /* ── Spacing (8pt grid) ────────────────────────────────────────────────── */
  --site-space-2xs: 4px;
  --site-space-xs:  8px;
  --site-space-s:   16px;
  --site-space-m:   24px;
  --site-space-l:   40px;
  --site-space-xl:  64px;
  --site-space-xxl: 96px;

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --site-container-max:  1280px;
  --site-container-wide: 1440px;
  --site-prose-max:      960px;

  /* ── Border radius ─────────────────────────────────────────────────────── */
  --site-radius-s:    4px;
  --site-radius-m:    8px;
  --site-radius-l:    16px;
  --site-radius-pill: 9999px;

  /* ── Overlay / on-image ────────────────────────────────────────────────── */
  --site-color-scrim:    rgba(0, 0, 0, .45);
  --site-color-on-image: #FFFFFF;

  /* ── Breakpoints ───────────────────────────────────────────────────────── */
  --site-bp-md: 768px;
  --site-bp-lg: 1024px;
  --site-bp-xl: 1280px;
}