/*
 * Brand tokens — sourced from EZHelper Branding Profile (Anne Foong)
 * Colour ratio: 60% white / 25% green / 10% blush / 5% accents
 * Headings: Montserrat SemiBold/Bold. Body: Inter. Buttons/nav: Inter SemiBold.
 */

:root {
  /* Palette */
  --color-green: #4F7E4A;
  --color-green-dark: #3F6A3B;
  --color-green-soft: #6E9669;
  --color-pink: #E8B9BB;
  --color-blush: #F3D7D8;
  --color-sage: #C4D79B;
  --color-charcoal: #2B2B2F;
  --color-charcoal-soft: #5A5A5F;
  --color-white: #FFFFFF;
  --color-cream: #FCFBF8;
  --color-line: #ECE9E4;

  /* Semantic */
  --bg-page: var(--color-white);
  --bg-soft: var(--color-cream);
  --bg-trust: var(--color-blush);
  --text-primary: var(--color-charcoal);
  --text-secondary: var(--color-charcoal-soft);
  --text-on-green: var(--color-white);
  --accent-primary: var(--color-green);
  --accent-warm: var(--color-pink);

  /* Type */
  --font-heading: "Montserrat", "Poppins", system-ui, sans-serif;
  --font-body: "Inter", "Source Sans 3", system-ui, sans-serif;

  /* Fluid type scale (clamp = min / preferred / max) */
  --fs-display: clamp(2.4rem, 1.6rem + 3.6vw, 4.2rem);
  --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.55rem);
  --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  /* Spacing scale (8px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 880px;
  --container-pad: clamp(1.25rem, 2vw, 2rem);
  --section-py: clamp(3.5rem, 6vw, 6rem);

  /* Radii, shadows, motion */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-soft: 0 6px 24px rgba(43, 43, 47, 0.06);
  --shadow-card: 0 10px 30px rgba(43, 43, 47, 0.08);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
}

/* Selection */
::selection {
  background: var(--color-green);
  color: var(--color-white);
}