/* M3.5 SP1 NEW-03 — shared brand tokens.
 *
 * Single source of truth for typography, spacing, radii, shadows, and the
 * canonical palette. Loaded by every customer-facing surface across both
 * `foundlocal.dev` (marketing one-pager + legal pages) and
 * `start.foundlocal.dev` (info page + post-checkout pages + forms).
 *
 * Per-surface stylesheets (`marketing.css`, `info.css`) hold structural
 * styles only — they reference these tokens via `var(--name)` and add
 * surface-specific selectors. Per-page CSS keeps only structural overrides.
 *
 * Backward-compat aliases for the legacy info-site token names (--bg,
 * --surface, --accent, --border, --radius, --shadow, --font) are at the
 * bottom — info.css references those via the same var() names it always
 * has, but the values now derive from the shared canonical palette.
 */

:root {
  /* ─── Brand palette (Amplemarket-aligned) ─────────────────────── */
  --ink:          #111111;   /* primary text + filled CTA + heavy borders */
  --ink-soft:     #57544f;   /* secondary text — AA on both canvas + whisper bgs */
  --ink-mute:     #6f6d68;   /* tertiary text — AA on both canvas + whisper bgs */
  --canvas:       #ffffff;   /* primary background */
  --whisper:      #f4f3ef;   /* subtle panel backgrounds */
  --taupe:        #ecebea;   /* ghost button bg, subtle borders */
  --charcoal:     #272625;   /* dark surface, info badge bg */
  --indigo:       #10054d;   /* primary text on light filled buttons */

  /* ─── Accent gradients (signature Amplemarket move) ───────────── */
  --phoenix:    radial-gradient(386.06% 162.79% at -13.1926% -17.1008%,
                  rgb(232, 64, 13) 0%,
                  rgb(255, 238, 216) 26.1559%,
                  rgb(208, 178, 255) 84.1533%);
  --cyan-glow:  radial-gradient(80.17% 109.2% at 52.1169% 62.5363%,
                  rgb(208, 178, 255) 0%,
                  rgb(198, 236, 233) 35.282%,
                  rgb(153, 255, 249) 96.5565%);

  /* ─── Soft accent cards ───────────────────────────────────────── */
  --petal-pink:  #ffd7f0;
  --mint:        #b7efb2;
  --canary:      #ffef99;
  --lavender:    #e2ddfd;
  --orange-flag: #e8400d;   /* phoenix-orange flat — accent strokes/dots */

  /* ─── Typography ──────────────────────────────────────────────── */
  --font-sans: "Labil Grotesk", "Labil Grotesk Variable", "Inter",
               ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ─── Type scale ──────────────────────────────────────────────── */
  --text-caption:    10px;
  --text-micro:      12px;
  --text-body:       16px;
  --text-body-lg:    18px;
  --text-subheading: 20px;
  --text-heading-sm: 24px;
  --text-heading:    28px;
  --text-heading-lg: 44px;
  --text-display:    56px;
  --text-display-xl: 72px;

  /* ─── Spacing scale ───────────────────────────────────────────── */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 20px;
  --gap-6: 24px;
  --gap-7: 28px;
  --gap-8: 36px;
  --gap-9: 44px;
  --gap-10: 56px;
  --gap-11: 84px;
  --gap-12: 100px;
  --gap-13: 144px;

  /* ─── Radii ───────────────────────────────────────────────────── */
  --r-button:  8px;
  --r-card:   12px;
  --r-input:  12px;
  --r-image:  12px;
  --r-pill:  999px;

  /* ─── Shadows (very subtle — diluted ink) ─────────────────────── */
  --shadow-card:
    rgba(17, 17, 17, 0.04) 0px 1px 2px 0px,
    rgba(17, 17, 17, 0.04) 0px 4px 8px 0px,
    rgba(17, 17, 17, 0.04) 0px 0px 1px 0px;
  --shadow-lift:
    rgba(17, 17, 17, 0.05) 0px 0px 1px 0px,
    rgba(17, 17, 17, 0.04) 1px 1px 1px 0px,
    rgba(17, 17, 17, 0.03) 2px 3px 2px 0px,
    rgba(17, 17, 17, 0.01) 4px 4px 2px 0px;
  --shadow-xl:
    rgba(17, 17, 17, 0.12) 0px 26px 60px -6px,
    rgba(17, 17, 17, 0.02) 0px 28px 28px -14px,
    rgba(17, 17, 17, 0.04) 0px 6px 6px -3px;
  --shadow-inset:
    rgba(17, 17, 17, 0.05) 0px 0px 0px 1px inset;

  /* ─── Layout ──────────────────────────────────────────────────── */
  --container-max: 1180px;
  --section-y: clamp(64px, 8vw, 112px);

  /* ─── Legacy info-site aliases (NEW-03 backward-compat layer) ─── *
   * info.css references these names; they remap to canonical values *
   * so info-site visually aligns with marketing without a full      *
   * structural rewrite. Subsequent phases (NEW-04 redesign) replace *
   * the legacy references with direct canonical-token references.   */
  --bg:         var(--canvas);
  --surface:    var(--canvas);
  --accent:     var(--orange-flag);
  --accent-ink: #ffffff;
  --border:     var(--taupe);
  --radius:     var(--r-card);
  --shadow:     var(--shadow-xl);
  --font:       var(--font-sans);
  --mono:       var(--font-mono);
}