/* ============================================
   Explainery Design Tokens — Variables Only
   Slim foundation file safe to link site-wide.
   Source of truth: tokens.css (full file w/ utility classes)
   See EXPLAINERY-BRAND.md for the standard.
   Version: 1.0 | Issued: April 2026

   This file contains ONLY :root custom properties.
   No element selectors, no utility classes — so linking
   it from existing pages produces zero visual change.
   Variables become available for new components, new
   pages, and gradual per-page refactors.
   ============================================ */

:root {
  /* --- Primary palette --- */
  --color-coral: #ff6d4d;
  --color-lime: #e7ff0f;
  --color-navy: #141e26;
  --color-blush: #fff0ed;
  --color-white: #ffffff;

  /* --- Supporting neutrals --- */
  --color-navy-soft: #2c3942;
  --color-slate: #5d6872;
  --color-mute: #9aa3ab;
  --color-line: #e1e5ea;

  /* --- Fonts --- */
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  /* --- Type scale (web) --- */
  --text-hero: 52px;
  --text-h1: 36px;
  --text-h2: 28px;
  --text-h3: 18px;
  --text-lede: 18px;
  --text-body: 16px;
  --text-eyebrow: 12px;
  --text-chip: 11px;

  /* --- Tracking --- */
  --tracking-eyebrow: 0.16em;
  --tracking-chip: 0.14em;

  /* --- Spacing scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* --- Radii --- */
  --radius-ui: 4px;
  --radius-callout: 6px;
  --radius-card: 8px;
  --radius-pill: 999px;

  /* --- Layout --- */
  --container-max: 820px;
  --container-pad-y: 60px;
  --container-pad-x: 40px;

  /* --- Shadows --- */
  --shadow-card: 0 1px 2px rgba(20, 30, 38, 0.04),
                 0 4px 12px rgba(20, 30, 38, 0.08);
  --shadow-lift: 0 2px 4px rgba(20, 30, 38, 0.06),
                 0 12px 24px rgba(20, 30, 38, 0.10);

  /* --- Editorial rule --- */
  --rule-dashed: 1px dashed rgba(20, 30, 38, 0.25);
  --rule-solid: 1px solid var(--color-line);
}

@media (max-width: 768px) {
  :root {
    --text-hero: 36px;
    --text-h1: 28px;
    --text-h2: 22px;
    --container-pad-y: 40px;
    --container-pad-x: 24px;
  }
}