/* =====================================================================
   Neri's Secret Garden — Design Tokens
   Every color, space, type step, shadow, and radius lives here.
   ===================================================================== */

:root {
  /* ---- Color ---- */
  --color-primary: #355E4A;      /* Forest Green — headings, buttons, links */
  --color-primary-dark: #2A4B3B; /* deeper green — footer, hovers */
  --color-secondary: #AAB7A2;    /* Sage */
  --color-accent: #C9A86A;       /* Warm Gold — hover states, small highlights, icons */

  --color-bg: #FAF8F3;           /* Ivory — page background */
  --color-surface: #FFFFFF;      /* White — cards, surfaces */
  --color-beige: #F2EEE8;        /* Light Beige — alternating sections */

  --text: #2D2D2D;               /* Primary text */
  --text-light: #666666;         /* Secondary text */
  --text-muted: #9C9C9C;         /* Muted text */
  --text-on-dark: #FAF8F3;       /* Text over green */

  /* semantic */
  --color-success: #4E7A5E;
  --color-error: #B4553F;
  --border-soft: rgba(53, 94, 74, 0.14);

  /* ---- Typography ---- */
  --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid heading scale — desktop targets: H1 72 / H2 56 / H3 42 / H4 32 */
  --fs-h1: clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem);
  --fs-h2: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --fs-h3: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem);
  --fs-h4: clamp(1.375rem, 1.15rem + 0.9vw, 2rem);
  --fs-body: 1.125rem;   /* 18px */
  --fs-small: 0.9375rem; /* 15px */
  --fs-eyebrow: 0.8125rem;
  --lh-body: 1.8;
  --lh-heading: 1.14;

  /* ---- Radii ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* ---- Shadows (minimal) ---- */
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.04);
  --shadow-lift: 0 14px 40px rgba(53, 94, 74, 0.16);

  /* ---- Spacing scale ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-12: 12px;
  --space-md: 16px;
  --space-24: 24px;
  --space-lg: 32px;
  --space-48: 48px;
  --space-xl: 64px;
  --space-96: 96px;
  --space-2xl: 120px;

  /* ---- Layout ---- */
  --max-width: 1280px;
  --content-width: 720px;
  --section-pad: 64px;    /* mobile-first base; scaled up below */
  --gutter: 20px;

  /* ---- Motion ---- */
  --transition: 0.35s ease;
  --transition-slow: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Mobile-first: scale spacing up as the viewport grows */
@media (min-width: 641px) {
  :root { --section-pad: 80px; --gutter: 24px; }
}

@media (min-width: 1025px) {
  :root { --section-pad: 120px; --gutter: 32px; }
}