/* Design tokens — Corey's Lawncare & Landscaping (logo-aligned palette) */
:root {
  /* === Corey Green — primary brand (logo grass blades) === */
  --green-50: #e8f5e9;
  --green-100: #c8e6c9;
  --green-200: #a5d6a7;
  --green-400: #66bb6a;
  --green-500: #3a9b3e;
  --green-700: #1e6b22;
  --green-900: #0d3d10;

  /* === Forest Dark — logo wordmark & deep outlines === */
  --forest-50: #e9f0ea;
  --forest-100: #c3d5c5;
  --forest-200: #8daf91;
  --forest-400: #4a7a50;
  --forest-600: #245229;
  --forest-800: #163a18;
  --forest-900: #0a2210;

  /* Mid green steps (gradients / utilities) — after forest for safe refs */
  --green-600: var(--green-700);
  --green-800: var(--forest-800);

  /* === Ground Green — dark foliage & ground cover === */
  --ground-50: #eaf2e8;
  --ground-100: #c2dbc0;
  --ground-200: #88b98c;
  --ground-400: #4d8a53;
  --ground-600: #2e6333;
  --ground-800: #1a4a1e;
  --ground-900: #0d2e10;

  /* === Stone — hardscape & paver texture === */
  --stone-50: #f5f5f4;
  --stone-100: #e0e0de;
  --stone-200: #c2c2c0;
  --stone-400: #9a9a98;
  --stone-600: #6b6b69;
  --stone-800: #4a4a48;
  --stone-900: #2a2a28;

  /* === White / Neutral — backgrounds & text on dark === */
  --neutral-100: #ffffff;
  --neutral-200: #f7f7f7;
  --neutral-300: #eeeeee;
  --neutral-400: #e0e0de;
  --neutral-500: #bdbdbb;
  --neutral-600: #9e9e9c;
  --neutral-800: #757573;

  /* === Legacy hue aliases (maps old sky / lime / coral / mint / sage to this palette) === */
  --sky-50: var(--neutral-200);
  --sky-100: var(--stone-100);
  --sky-200: var(--stone-200);
  --sky-400: var(--stone-400);
  --sky-600: var(--stone-600);
  --sky-700: var(--ground-600);
  --sky-800: var(--forest-800);
  --sky-900: var(--forest-900);

  --lime-50: var(--green-50);
  --lime-100: var(--green-100);
  --lime-200: var(--green-200);
  --lime-400: var(--green-400);
  --lime-500: var(--green-500);
  --lime-600: var(--green-700);
  --lime-800: var(--green-900);

  --mint-50: var(--green-50);
  --mint-100: var(--green-100);
  --mint-200: var(--green-200);

  --sage-50: var(--forest-50);
  --sage-100: var(--forest-100);
  --sage-200: var(--forest-200);
  --sage-400: var(--forest-400);
  --sage-600: var(--forest-600);
  --sage-800: var(--forest-800);
  --sage-900: var(--forest-900);

  --coral-50: var(--ground-50);
  --coral-100: var(--ground-100);
  --coral-400: var(--ground-400);
  --coral-600: var(--ground-600);

  --brown-50: var(--ground-50);
  --brown-100: var(--ground-100);
  --brown-200: var(--ground-200);
  --brown-400: var(--ground-400);
  --brown-600: var(--ground-800);
  --brown-800: var(--ground-900);
  --brown-900: var(--forest-900);

  /* === Semantic aliases === */
  --color-primary: var(--green-500);
  --color-primary-dark: var(--forest-800);
  --color-primary-light: var(--green-200);
  --color-secondary: var(--ground-600);
  --color-neutral-bg: var(--neutral-200);
  --color-surface: var(--neutral-100);
  --color-border: var(--stone-200);
  --color-body-text: var(--stone-800);
  --color-muted-text: var(--stone-600);
  --color-footer-bg: var(--neutral-100);
  --color-footer-text: var(--forest-900);

  --color-accent: var(--green-400);
  --color-accent-hover: var(--green-700);
  --color-eyebrow: var(--forest-600);
  --color-cta: var(--green-500);
  --color-cta-text: var(--neutral-100);
  --color-cta-hover: var(--green-700);
  --color-cta-hover-text: var(--neutral-100);
  --color-pop: var(--ground-600);
  --color-pop-hover: var(--forest-800);
  --color-warm: var(--ground-400);
  --color-surface-alt: var(--forest-50);
  --color-footer-muted: var(--stone-600);
  --color-shadow-rgb: 10 34 16;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 624.9375rem;

  --shadow-sm: 0 0.0625rem 0.1875rem rgb(var(--color-shadow-rgb) / 0.08);
  --shadow-md: 0 0.25rem 0.75rem rgb(var(--color-shadow-rgb) / 0.1);
  --shadow-lg: 0 0.75rem 2rem rgb(var(--color-shadow-rgb) / 0.14);
  --shadow-xl: 0 1.5rem 4rem rgb(var(--color-shadow-rgb) / 0.18);

  --container-max: 75rem;
  --section-padding: clamp(3rem, 8vw, 7.5rem);
  --container-padding: clamp(1rem, 5vw, 2.5rem);

  --bp-xs: 23.4375rem;
  --bp-sm: 30rem;
  --bp-md: 48rem;
  --bp-lg: 64rem;
  --bp-xl: 80rem;
  --bp-2xl: 90rem;

  /* Navbar: modest logo height + padding (components.css #nav) */
  --nav-logo-height: clamp(2rem, 1.1vw + 1.15rem, 2.75rem);
  --nav-pad-y: 0.5rem;
  --nav-height: calc(var(--nav-logo-height) + 2 * var(--nav-pad-y));
  --z-nav: 100;
  --z-overlay: 200;
  --z-lightbox: 300;
}