/* Design Tokens - Lucrative Landscaping Brand (Comprehensive System) */
:root {
  /* === TYPE SCALE & WEIGHTS === */
  /* Responsive Typography Scale */
  --fs-xxl: clamp(28px, 3.5vw, 44px);    /* H1 */
  --fs-xl: clamp(22px, 2.4vw, 32px);     /* H2/section titles */
  --fs-lg: clamp(18px, 1.6vw, 22px);     /* subheads/card titles */
  --fs-md: 17px;                          /* body - increased from 16px */
  --fs-sm: 14px;                          /* eyebrow, disclaimers */
  
  /* === LINE HEIGHTS === */
  --lh-tight: 1.2;
  --lh-normal: 1.55;                      /* increased from 1.5 */
  --lh-relaxed: 1.7;
  
  /* Font Weights - Limited palette */
  --fw-800: 800;    /* H1/H2 */
  --fw-700: 700;    /* card titles */
  --fw-500: 500;    /* body medium */
  --fw-400: 400;    /* body normal */
  
  /* === SPACING SCALE === */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 80px;
  
  /* === REFINED SPACING RHYTHM === */
  --rhythm-section: clamp(56px, 7vw, 96px);
  --rhythm-card: 24px;
  --rhythm-card-mobile: 20px;
  --rhythm-vertical: 12px;
  --rhythm-vertical-lg: 16px;
  
  /* === COLOR SYSTEM === */
  /* Primary Colors */
  --dark-green-bg: #0f2818;  /* Master dark green background */
  --ink: #0C0F0A;           /* near-black primary text */
  --accent: #39B54A;        /* brand green buttons/highlights */
  --muted: #4D4F52;         /* secondary text */
  
  /* Surface Colors */
  --surface-white: #FFFFFF;
  --surface-mint: #F6FBF7;  /* pale mint background */
  
  /* Interactive Colors */
  --accent-hover: #2ea33e;  /* accent darkened 6-8% */
  
  /* === SHADOWS & ELEVATION === */
  --elev-1: 0 4px 14px rgba(0,0,0,.08);  /* single shadow token */
  
  /* === BORDERS & RADII === */
  --border: 1px solid rgba(12,15,10,.08);
  --radius: 14px;                         /* single radius value */
  
  /* === LAYOUT === */
  /* Page Layout - Matching consulting page width */
  --page-max: 1200px;
  --container-max: 1200px;
  --section-pad-desktop: var(--rhythm-section);
  --section-pad-mobile: var(--rhythm-section);
  
  /* Grid System */
  --grid-gap: 24px;
  --grid-cols: 12;
  
  /* === COMPONENT TOKENS === */
  /* Buttons */
  --btn-height: 48px;
  --btn-radius: 999px;
  --btn-padding: 12px 18px;
  
  /* Inputs */
  --input-height: 48px;
  --input-radius: 12px;
  --input-padding: 0 14px;
  --input-border: 1px solid rgba(12,15,10,.15);
  
  /* Cards */
  --card-padding: var(--space-4);
  --card-border: 1px solid rgba(12,15,10,.08);
  --card-accent-border: 4px solid var(--accent);
  
  /* === VERTICAL RHYTHM === */
  --rhythm-title-to-sub: var(--space-2);
  --rhythm-sub-to-body: var(--space-3);
  
  /* === FONT FAMILIES === */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  
  /* === LEGACY TOKENS (for compatibility) === */
  /* Brand Colors - mapped to new system */
  --color-primary: var(--accent);
  --color-primary-dark: var(--accent-hover);
  --color-dark: var(--ink);
  --color-gray: var(--muted);
  --color-white: var(--surface-white);
  --color-off-white: var(--surface-mint);
  
  /* Legacy Spacing - mapped to new scale */
  --space-xs: var(--space-1);
  --space-sm: var(--space-1);
  --space-md: var(--space-3);
  --space-lg: var(--space-4);
  --space-xl: var(--space-5);
  --space-2xl: var(--space-6);
  --space-3xl: var(--space-7);
  
  /* Legacy Typography */
  --font-size-sm: var(--fs-sm);
  --font-size-base: var(--fs-md);
  --font-size-lg: var(--fs-lg);
  --font-size-xl: var(--fs-xl);
  --font-size-2xl: var(--fs-xxl);
  
  /* Legacy Weights */
  --font-weight-normal: var(--fw-400);
  --font-weight-medium: var(--fw-500);
  --font-weight-bold: var(--fw-700);
  --font-weight-extrabold: var(--fw-800);
  
  /* Legacy Shadows */
  --shadow-md: var(--elev-1);
  --shadow-lg: var(--elev-1);
  
  /* Legacy Radius */
  --radius-lg: var(--radius);
  --radius-xl: var(--radius);
  
  /* === INTRO GRID SYSTEM === */
  --sidebar-w: 340px;           /* persistent sidebar width */
  --sidebar-sticky-top: 2rem;   /* sticky offset for sidebar CTA */
  --gap: 2rem;                  /* grid gap for intro layout */
  --page-max: 1200px;           /* max width for intro grid */

  /* === TRANSITIONS === */
  --transition: 250ms ease-in-out;
  --transition-fast: 150ms ease-in-out;
  
  /* === BREAKPOINTS === */
  --bp-mobile: 768px;
  --bp-tablet: 900px;
  --bp-desktop: 1024px;
}