/* ===========================================================
   SavoryWolper v2 — Design tokens
   "Warm SaaS" — light, sans-serif, clay accent
   =========================================================== */

:root {
  /* ---------- Color ---------- */
  --sw-bg:          #FAF8F5;   /* warm off-white page */
  --sw-surface:     #FFFFFF;   /* cards, elevated panels */
  --sw-surface-2:   #F2EFE9;   /* secondary panels / quote backgrounds */

  --sw-text:        #0B0B0B;   /* primary — headings, nav */
  --sw-text-2:      #2E2E2E;   /* body */
  --sw-text-3:      #6B6B6B;   /* muted, labels */
  --sw-text-4:      #A8A8A8;   /* small print, captions */

  --sw-accent:      #C7895A;   /* clay — human accent (CTAs, focal markers) */
  --sw-accent-2:    #B07748;   /* clay hover */
  --sw-accent-soft: rgba(199, 137, 90, 0.12);

  --sw-system:      #3C9DCF;   /* SW-blauw — system / tech accent (product mode) */
  --sw-system-2:    #2A85B0;   /* SW-blauw hover */
  --sw-system-soft: rgba(60, 157, 207, 0.12);

  --sw-rule:        rgba(11, 11, 11, 0.08);
  --sw-rule-strong: rgba(11, 11, 11, 0.16);

  /* ---------- Typography ---------- */
  --sw-font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sw-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sw-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale — fluid clamps */
  --sw-t0: clamp(2.75rem, 6vw, 5rem);        /* editorial display */
  --sw-t1: clamp(2rem, 4vw, 3.25rem);        /* hero / page H1 */
  --sw-t2: clamp(1.5rem, 2.4vw, 2rem);       /* section heading */
  --sw-t3: 1.25rem;                          /* card / sub-heading */
  --sw-t4: 1.0625rem;                        /* body */
  --sw-t4-lede: clamp(1.125rem, 1.4vw, 1.3125rem); /* lede paragraph */
  --sw-t5: 0.78rem;                          /* eyebrow / mono label */
  --sw-t6: clamp(1.375rem, 2vw, 1.75rem);    /* pull quote */
  --sw-t7: 0.8125rem;                        /* small print */
  --sw-t8: 0.9375rem;                        /* button */

  /* ---------- Spacing (8px base) ---------- */
  --sw-s-1:  0.5rem;
  --sw-s-2:  1rem;
  --sw-s-3:  1.5rem;
  --sw-s-4:  2rem;
  --sw-s-5:  2.5rem;
  --sw-s-6:  4rem;
  --sw-s-7:  6rem;
  --sw-s-8:  7.5rem;   /* section padding */
  --sw-s-9:  10rem;    /* large section padding */

  /* ---------- Geometry ---------- */
  --sw-radius-sm:   6px;
  --sw-radius-md:   12px;
  --sw-radius-lg:   20px;
  --sw-radius-pill: 999px;

  --sw-container:   1200px;
  --sw-container-narrow: 760px;
  --sw-gutter:      clamp(20px, 4vw, 48px);

  /* ---------- Motion ---------- */
  --sw-ease:        cubic-bezier(0.22, 1, 0.36, 1);  /* expo out */
  --sw-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --sw-dur-fast:    200ms;
  --sw-dur:         400ms;
  --sw-dur-slow:    700ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sw-dur-fast: 0ms;
    --sw-dur: 0ms;
    --sw-dur-slow: 0ms;
  }
}