/* ============================================
   KALIWAY LANDSCAPING LLC — Design Tokens
   ============================================ */

:root {
  /* ── Color Palette ────────────────────────── */
  --color-bg:           #1A3A1A;      /* darkest background */
  --color-bg-mid:       #152E15;      /* ~10% darker mid */
  --color-bg-deep:      #0F1F0F;      /* deep / footer */
  --color-bg-card:      #1F4420;      /* card surface */
  --color-bg-card-hover:#234824;      /* card hover */

  --color-accent:       #C8A84B;      /* gold — primary CTA */
  --color-accent-light: #DEC06E;      /* lightened ~15% */
  --color-accent-warm:  #D4884A;      /* complementary warm orange-gold */
  --color-accent-dim:   rgba(200, 168, 75, 0.12); /* subtle tint */

  --color-text:         #E8F0E8;      /* primary body text */
  --color-text-muted:   #9DB89D;      /* secondary / muted text */
  --color-text-faint:   #5A7A5A;      /* placeholder / disabled */
  --color-white:        #FFFFFF;
  --color-border:       rgba(200, 168, 75, 0.15);
  --color-border-subtle:rgba(255, 255, 255, 0.06);

  /* ── Typography ───────────────────────────── */
  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* ── Spacing ──────────────────────────────── */
  --space-xs:   0.5rem;
  --space-sm:   0.875rem;
  --space-md:   1.25rem;
  --space-lg:   2rem;
  --space-xl:   3rem;
  --space-2xl:  5rem;
  --space-3xl:  8rem;

  /* ── Border Radius ────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  10px;
  --radius-lg:  18px;
  --radius-xl:  28px;
  --radius-pill:9999px;

  /* ── Shadows ──────────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 10px 40px rgba(0, 0, 0, 0.6);
  --shadow-xl:  0 20px 60px rgba(0, 0, 0, 0.7);

  /* ── Glow — Accent-Based ─────────────────── */
  --glow-accent:    0 0 40px rgba(200, 168, 75, 0.35);
  --glow-accent-sm: 0 0 16px rgba(200, 168, 75, 0.25);
  --glow-accent-lg: 0 0 70px rgba(200, 168, 75, 0.45);
  --glow-accent-btn:0 4px 24px rgba(200, 168, 75, 0.4);

  /* ── Motion ───────────────────────────────── */
  --ease-smooth:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   180ms;
  --duration-base:   300ms;
  --duration-slow:   550ms;
  --duration-reveal: 700ms;

  /* ── Layout ───────────────────────────────── */
  --container-max: 1200px;
  --nav-height:    72px;
  --section-pad:   clamp(4rem, 8vw, 7rem);
}