:root {
  /* ── Colors ───────────────────────────────────────────────────────────────
   * Use these canonical names in all theme CSS and block templates.
   * Non-canonical namespaces (--colors-*, --brand-*, --custom-*) are
   * forbidden by design governance and will fail validation.
   * ────────────────────────────────────────────────────────────────────── */
  --color-primary:      #4F46E5;
  --color-primary-dark: #1B1B8A;
  --color-secondary:    #7C3AED;
  --color-accent:       #E85D4A;
  --color-surface:      #FFFFFF;
  --color-surface-alt:  #F8F8FF;
  --color-text:         #1A1A2E;
  --color-text-muted:   #6B7280;
  --color-text-on-dark: #FFFFFF;
  --color-border:       rgba(79, 70, 229, 0.12);

  /* ── Typography ──────────────────────────────────────────────────────────
   * Canonical family tokens: --font-display, --font-body, --font-mono.
   * Canonical scale tokens:  --text-xs … --text-hero.
   * ────────────────────────────────────────────────────────────────────── */
  --font-display: 'Clash Display', 'Cabinet Grotesk', sans-serif;
  --font-body:    'Satoshi', 'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-hero: clamp(2.5rem, 5vw + 1rem, 3.75rem);

  /* ── Spacing ─────────────────────────────────────────────────────────────
   * Canonical tokens: --space-xs … --space-section.
   * ────────────────────────────────────────────────────────────────────── */
  --space-xs:      0.5rem;
  --space-sm:      1rem;
  --space-md:      1.5rem;
  --space-lg:      2rem;
  --space-xl:      3rem;
  --space-2xl:     4rem;
  --space-section: 6rem;

  /* ── Border radius ───────────────────────────────────────────────────────
   * Canonical tokens: --radius-sm, --radius-md, --radius-lg, --radius-pill.
   * ────────────────────────────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 9999px;

  /* ── Shadows ─────────────────────────────────────────────────────────────*/
  --shadow-card:       0 4px 32px rgba(79, 70, 229, 0.10);
  --shadow-card-hover: 0 12px 48px rgba(79, 70, 229, 0.22);
  --shadow-hero:       0 32px 80px rgba(27, 27, 138, 0.25);

  /* ── Animation variables ─────────────────────────────────────────────────*/
  --animation-blob-speed:        18s;
  --animation-scroll-parallax:   0.3;
}