/* ============================================================
   DESIGN TOKENS — Eco Landscape Care
   All colors, type, spacing, radii, shadows, breakpoints.
   No styles here — only custom properties.
   ============================================================ */

:root {
  /* ── Colors ─────────────────────────────────────────────── */
  --color-bg:                #F7F5F0;
  --color-surface:           #FFFFFF;
  --color-surface-sand:      #EDE8DF;
  --color-surface-dark:      #2A2E1F;
  --color-surface-olive:     #3D4A2E;

  --color-text-primary:      #1C1F14;
  --color-text-secondary:    #5A5E4E;
  --color-text-inverse:      #F2EFE8;
  --color-text-inverse-muted:#B8B4A6;
  --color-heading:           #1C1F14;
  --color-heading-inverse:   #F2EFE8;

  --color-accent:            #C2572B;
  --color-accent-hover:      #A8421E;
  --color-accent-light:      #F0D5C8;

  --color-primary:           #4A5E35;
  --color-primary-hover:     #3A4B28;
  --color-primary-light:     #D8E2C8;

  --color-border:            #D4CFC4;
  --color-border-dark:       #4A5040;
  --color-focus:             #C2572B;
  --color-hairline:          #C2572B;

  --color-success:           #3D6B3A;
  --color-error:             #B83535;
  --color-warning:           #B87A2A;
  --color-stat-numeral:      #C2572B;

  /* ── Typography ──────────────────────────────────────────── */
  --font-heading:  'Playfair Display', Georgia, serif;
  --font-body:     'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:     'DM Mono', 'Courier New', monospace;

  --text-display-xl: clamp(3.5rem, 10vw, 6.0rem);
  --text-display-lg: clamp(2.5rem, 8vw,  4.5rem);
  --text-display-md: clamp(2.0rem, 6vw,  3.0rem);
  --text-h1:         clamp(1.75rem, 5vw, 2.5rem);
  --text-h2:         clamp(1.375rem, 4vw, 2.0rem);
  --text-h3:         clamp(1.25rem, 3vw, 1.5rem);
  --text-h4:         1.25rem;
  --text-h5:         1.0rem;
  --text-body-lg:    1.125rem;
  --text-body:       1.0rem;
  --text-body-sm:    0.875rem;
  --text-legal:      0.8125rem;

  --line-height-heading:  1.2;
  --line-height-display:  1.05;
  --line-height-body:     1.65;

  --letter-spacing-display: -0.03em;
  --letter-spacing-h2:      -0.02em;
  --letter-spacing-h3:      -0.01em;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;

  --space-container:        min(90vw, 1200px);
  --space-container-narrow: min(90vw, 800px);
  --space-container-wide:   min(96vw, 1400px);
  --space-gutter:           24px;

  /* ── Radii ───────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Borders ─────────────────────────────────────────────── */
  --border-width:       1px;
  --border-width-thick: 2px;
  --border-color:       var(--color-border);
  --border-color-dark:  var(--color-border-dark);
  --border-focus:       2px solid var(--color-focus);

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(28, 31, 20, 0.08);
  --shadow-md: 0 4px 16px rgba(28, 31, 20, 0.12);
  --shadow-lg: 0 12px 40px rgba(28, 31, 20, 0.18);

  /* ── Breakpoints (for JS reference — CSS uses @media) ────── */
  --bp-xs:  375px;
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;

  /* ── Section Spacing ─────────────────────────────────────── */
  --section-py: var(--space-8);       /* mobile default */
  --hero-py:    var(--space-9);       /* mobile hero */
}

@media (min-width: 768px) {
  :root {
    --space-gutter:  48px;
    --section-py:    var(--space-9);
  }
}

@media (min-width: 1024px) {
  :root {
    --section-py:    var(--space-10);
    --hero-py:       var(--space-11);
  }
}