/*
 * tokens.css — single source of truth for all design tokens.
 * No raw hex values appear anywhere else in the codebase.
 * Enqueued first by inc/enqueue.php.
 */

:root {
  /* ── Colour palette ─────────────────────────────────────────── */
  --sp-paper:    #F4F2EC;   /* page background                   */
  --sp-ink:      #14181D;   /* text, BUILD pillar                */
  --sp-blue:     #1638C9;   /* primary accent, MOVE pillar       */
  --sp-citrus:   #D4E533;   /* BRANDS/SUPPLY fills — never text  */
  --sp-surface:  #FFFFFF;   /* raised cards                      */
  --sp-hairline: #D8D4C9;   /* rules, dividers                   */
  --sp-muted:    #6B6F76;   /* secondary text                    */

  /*
   * Pillar colour system — each pillar owns a colour pair.
   * Set once via .pillar-build / .pillar-move / etc. on a section;
   * division pages inherit automatically. No per-page CSS needed.
   *
   * BUILD  : ink on paper, hairline rules
   * MOVE   : blue bg, white text
   * SUPPLY : ink bg, paper text  (inversion #1)
   * BRANDS : citrus bg, ink text
   */
  --sp-pillar-bg: var(--sp-paper);
  --sp-pillar-fg: var(--sp-ink);

  /* ── Typography ─────────────────────────────────────────────── */
  /* Fonts self-hosted in assets/fonts/ — woff2, Latin subset.    */
  /* Licence file included per face. Preloads in inc/enqueue.php. */
  --sp-font-display: 'Outfit',        ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sp-font-body:    'Inter',         ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sp-font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  /* ── Type scale ─────────────────────────────────────────────── */
  --sp-h1:    clamp(2.5rem, 6vw, 5rem);
  --sp-h2:    clamp(1.85rem, 4vw, 3.25rem);
  --sp-h3:    clamp(1.1rem, 2vw, 1.5rem);
  --sp-body:  1.0625rem;
  --sp-mono:  0.8125rem;
  --sp-label: 0.75rem;

  /* ── Spacing ─────────────────────────────────────────────────── */
  --sp-space-xs:  0.5rem;
  --sp-space-sm:  1rem;
  --sp-space-md:  1.5rem;
  --sp-space-lg:  2.5rem;
  --sp-space-xl:  clamp(3rem, 6vw, 5rem);
  --sp-space-2xl: clamp(4rem, 8vw, 7rem);

  /* ── Layout ──────────────────────────────────────────────────── */
  --sp-container: 1200px;
  --sp-gutter:    clamp(1.25rem, 5vw, 3rem);
  --sp-header-h:  4rem;

  /* ── Motion ──────────────────────────────────────────────────── */
  --sp-ease:    0.15s ease;
  --sp-ease-md: 0.25s ease;
  --sp-ease-lg: 0.4s ease;
}

/* ── Pillar section colour pairs ────────────────────────────────── */
.pillar-build  { --sp-pillar-bg: var(--sp-paper);   --sp-pillar-fg: var(--sp-ink);    background: var(--sp-pillar-bg); color: var(--sp-pillar-fg); }
.pillar-move   { --sp-pillar-bg: var(--sp-blue);    --sp-pillar-fg: var(--sp-surface); background: var(--sp-pillar-bg); color: var(--sp-pillar-fg); }
.pillar-supply { --sp-pillar-bg: var(--sp-ink);     --sp-pillar-fg: var(--sp-paper);  background: var(--sp-pillar-bg); color: var(--sp-pillar-fg); }
.pillar-brands { --sp-pillar-bg: var(--sp-citrus);  --sp-pillar-fg: var(--sp-ink);    background: var(--sp-pillar-bg); color: var(--sp-pillar-fg); }