/* ==========================================================================
   Design tokens – "Haifa sea & terracotta"
   Deep teal (authority, calm) + terracotta copper (warmth, action) on ivory.
   Every text/background pair used below is ≥ 4.5:1 (checked, see README).
   ========================================================================== */
:root {
  /* Brand */
  --c-ink-900: #082a33;
  --c-ink-800: #0b3b45;
  --c-ink-700: #0f4f5c;
  --c-teal-700: #0f6570;
  --c-teal-600: #147c8a;
  --c-teal-500: #1e96a5;
  --c-teal-300: #7fc4cc;
  --c-teal-200: #bfe3e6;
  --c-teal-100: #e3f3f4;
  --c-teal-50: #f1f9f9;

  --c-copper-700: #a3431d;
  --c-copper-600: #b84e24;
  --c-copper-500: #c95a2e;
  --c-copper-300: #e9a585;
  --c-copper-200: #f0bfa8;
  --c-copper-100: #fbe9e0;

  /* Icons come from Lucide via scripts/build-icons.mjs. This is their line
     weight in 24-unit icon space. Lucide's own is 2, and the site's hairline
     type calls for a finer one. Set it on a context to change it there. */
  --icon-stroke: 1.75;

  --c-ivory: #fbf8f2;
  --c-sand: #f2ece1;
  --c-sand-2: #e6ddcd;
  --c-white: #ffffff;

  --c-text: #14232a;
  --c-text-2: #3e5259;
  --c-text-3: #5b6d73;
  --c-on-dark: #f6f3ec;
  --c-on-dark-2: #b9cdd1;

  --c-success: #1f7a4d;
  --c-error: #b3261e;
  --c-whatsapp: #157a40;
  --c-whatsapp-hover: #106635;
  --c-focus: #1e96a5;

  --c-placeholder-bg: #fff4e8;
  --c-placeholder-fg: #7a4a1f;
  --c-placeholder-border: #e6b98f;

  /* Surfaces */
  --bg-page: var(--c-ivory);
  --bg-card: var(--c-white);
  --border: var(--c-sand-2);

  /* Type */
  --font-sans: 'Heebo', 'Segoe UI', system-ui, -apple-system, 'Noto Sans Hebrew', Arial, sans-serif;
  --fs-0: 0.8125rem;
  --fs-1: 0.9375rem;
  --fs-2: 1.0625rem;
  --fs-3: 1.25rem;
  --fs-4: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  --fs-5: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-6: clamp(2rem, 1.25rem + 2.3vw, 3.25rem);
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* Space & shape */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --section-y: clamp(3.5rem, 8vw, 7rem);
  --gutter: 1rem;
  --container: 74rem;

  --r-sm: 0.5rem;
  --r-md: 0.875rem;
  --r-lg: 1.25rem;
  --r-xl: 1.75rem;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(8 42 51 / 0.06), 0 2px 8px rgb(8 42 51 / 0.05);
  --shadow-md: 0 6px 18px rgb(8 42 51 / 0.08), 0 2px 6px rgb(8 42 51 / 0.05);
  --shadow-lg: 0 24px 60px rgb(8 42 51 / 0.16), 0 6px 18px rgb(8 42 51 / 0.08);
  --shadow-copper: 0 10px 28px rgb(184 78 36 / 0.32);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 600ms;

  --header-h: 4.5rem;
  --strip-h: 2.25rem;
  --mobile-bar-h: 4.25rem;
}

@media (min-width: 40em) {
  :root {
    --gutter: 1.5rem;
  }
}

@media (min-width: 64em) {
  :root {
    --gutter: 2rem;
  }
}