/* ==========================================================================
   Design tokens — Garden teal + marigold.
   Every text/background pair below was measured with contrast.mjs:
     text #1A2B29 / white 14.8:1 · muted #42524F / white 7.9:1
     teal-700 #0A6159 / white 7.3:1 · ink #1D1403 / marigold #FDB022 9.9:1
     white / dark #052725 15.9:1 · #B7D1CD / dark 9.8:1 · white / #0F7A41 5.4:1
   No hex values in components — use these.
   ========================================================================== */
:root {
  /* neutral ramp (slightly green-tinted greys) */
  --n-0: #ffffff;
  --n-50: #f6faf9;
  --n-100: #eef4f3;
  --n-200: #dde8e6;
  --n-300: #c3d3d0;
  --n-400: #93a7a3;
  --n-500: #677c78;
  --n-600: #42524f;
  --n-700: #2f3e3b;
  --n-800: #1a2b29;
  --n-900: #0f1c1a;

  /* primary: garden teal */
  --p-50: #e6f2f0;
  --p-100: #c7e3de;
  --p-200: #97cbc2;
  --p-300: #5faea3;
  --p-400: #2f9084;
  --p-500: #13786d;
  --p-600: #0d6d63;
  --p-700: #0a6159;
  --p-800: #084a44;
  --p-900: #063833;
  --p-950: #052725;

  /* CTA: marigold */
  --c-100: #fff1cf;
  --c-300: #fed272;
  --c-400: #fdb022;
  --c-500: #f09a06;
  --c-ink: #1d1403;

  /* WhatsApp (darkened from #128C4A for 5.4:1 with white) */
  --wa: #0f7a41;
  --wa-hover: #0c6636;

  /* semantic */
  --color-bg: var(--n-0);
  --color-surface: var(--n-0);
  --color-tint: var(--n-50);
  --color-text: var(--n-800);
  --color-muted: var(--n-600);
  --color-border: var(--n-200);
  --color-accent: var(--p-700);
  --color-accent-soft: var(--p-50);
  --color-cta: var(--c-400);
  --color-cta-hover: var(--c-300);
  --color-cta-ink: var(--c-ink);
  --color-dark: var(--p-950);
  --color-dark-2: var(--p-900);
  --color-on-dark: #ffffff;
  --color-on-dark-muted: #b7d1cd;
  --color-focus: var(--c-500);
  --color-error: #b42318;
  --color-ok: #067647;

  /* type */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem; /* 17px — buyers skew older */
  --fs-md: 1.1875rem;
  --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --fs-2xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.625rem);
  --fs-3xl: clamp(2.125rem, 1.5rem + 3vw, 3.75rem);
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* space scale 4 → 128 */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;

  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --gutter: 1rem;
  --container: 1200px;
  --header-h: 68px;

  /* radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* shadows — teal-tinted */
  --sh-sm: 0 1px 2px rgba(5, 39, 37, 0.06), 0 2px 6px rgba(5, 39, 37, 0.05);
  --sh-md: 0 6px 18px rgba(5, 39, 37, 0.08), 0 2px 6px rgba(5, 39, 37, 0.05);
  --sh-lg: 0 22px 48px rgba(5, 39, 37, 0.14), 0 6px 14px rgba(5, 39, 37, 0.06);

  /* motif: fine vertical "cables" */
  --cables: repeating-linear-gradient(90deg, transparent 0 34px, rgba(255, 255, 255, 0.07) 34px 35px);
  --cables-dark: repeating-linear-gradient(90deg, transparent 0 34px, rgba(10, 97, 89, 0.08) 34px 35px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 1.5rem; --header-h: 76px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 2rem; }
}