/* ============================================
   GARDENER DUNDALK — Design System Variables
   Style: Warm & Friendly Premium
   ============================================ */

:root {
  /* ---- Colour Palette ---- */
  --color-green-900: #1a3a2a;
  --color-green-800: #234d38;
  --color-green-700: #2d6147;
  --color-green-600: #367556;
  --color-green-500: #3f8a65;
  --color-green-400: #5ba882;
  --color-green-300: #82c4a3;
  --color-green-200: #b3ddc8;
  --color-green-100: #dff2e8;
  --color-green-50:  #f0f9f4;

  --color-cream-100: #fdfbf7;
  --color-cream-200: #f7f3eb;
  --color-cream-300: #efe9dc;

  --color-grey-900: #1a1a1a;
  --color-grey-800: #2d2d2d;
  --color-grey-700: #404040;
  --color-grey-600: #555555;
  --color-grey-500: #717171;
  --color-grey-400: #9a9a9a;
  --color-grey-300: #c4c4c4;
  --color-grey-200: #e0e0e0;
  --color-grey-100: #f0f0f0;
  --color-grey-50:  #f8f8f8;

  --color-white: #ffffff;
  --color-black: #000000;

  --color-whatsapp: #25d366;
  --color-whatsapp-dark: #1da851;
  --color-phone: #2d6147;
  --color-star: #f4b740;
  --color-error: #d64545;
  --color-success: #2d6147;

  /* ---- Semantic Colours ---- */
  --color-primary: var(--color-green-700);
  --color-primary-dark: var(--color-green-800);
  --color-primary-light: var(--color-green-100);
  --color-accent: var(--color-green-500);
  --color-bg: var(--color-cream-100);
  --color-bg-alt: var(--color-cream-200);
  --color-bg-card: var(--color-white);
  --color-text: var(--color-grey-800);
  --color-text-light: var(--color-grey-600);
  --color-text-muted: var(--color-grey-500);
  --color-heading: var(--color-green-900);
  --color-border: var(--color-grey-200);
  --color-border-light: var(--color-grey-100);

  /* ---- Typography ---- */
  --font-heading: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ---- Spacing Scale ---- */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* Section vertical padding */
  --section-py: var(--space-20);
  --section-py-lg: var(--space-24);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-wide: 1400px;
  --container-px: var(--space-6);

  /* ---- Borders & Radii ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  --border-width: 1px;
  --border: var(--border-width) solid var(--color-border);
  --border-light: var(--border-width) solid var(--color-border-light);

  /* ---- Shadows ---- */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.04);
  --shadow-xl:  0 20px 25px rgba(0,0,0,0.08), 0 8px 10px rgba(0,0,0,0.04);
  --shadow-2xl: 0 25px 50px rgba(0,0,0,0.12);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.1);

  /* ---- Transitions ---- */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --transition-base: all var(--duration-normal) var(--ease-out);
  --transition-fast: all var(--duration-fast) var(--ease-out);
  --transition-slow: all var(--duration-slow) var(--ease-out);

  /* ---- Z-index Scale ---- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-mobile-cta: 600;

  /* ---- Header ---- */
  --header-height: 72px;
  --header-height-mobile: 64px;

  /* ---- Mobile CTA Bar ---- */
  --mobile-cta-height: 60px;
}

/* Tablet and up */
@media (min-width: 768px) {
  :root {
    --section-py: var(--space-24);
    --section-py-lg: var(--space-32);
    --container-px: var(--space-8);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  :root {
    --container-px: var(--space-10);
  }
}