/* ==========================================================================
   KiteLine Lawn Care — Design Tokens
   Shared foundation (color, type, spacing) for all site components.
   ========================================================================== */

:root {
  /* Brand color */
  --kl-evergreen: #063f32;
  --kl-evergreen-60: rgba(6, 63, 50, 0.6);
  --kl-evergreen-12: rgba(6, 63, 50, 0.12);
  --kl-evergreen-08: rgba(6, 63, 50, 0.08);
  --kl-gold: #f2c230;
  --kl-gold-dark: #d9a91d;
  --kl-warm-white: #f5f3ec;
  --kl-charcoal: #171a18;
  --kl-white: #ffffff;

  /* Semantic aliases */
  --kl-surface: var(--kl-warm-white);
  --kl-text: var(--kl-evergreen);
  --kl-text-muted: var(--kl-evergreen-60);
  --kl-accent: var(--kl-gold);
  --kl-rule: var(--kl-evergreen-12);

  /* Type */
  --kl-font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --kl-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --kl-font-serif: "Fraunces", Georgia, serif;

  /* Layout */
  --kl-max-width: 1400px;
  --kl-gutter: 40px;

  /* Motion */
  --kl-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Card — the one shared "card" language for the whole site: radius +
     soft evergreen-tinted shadow. Fill color varies by component, but
     every card uses these. */
  --kl-card-radius: 20px;
  --kl-card-shadow: 0 20px 40px rgba(6, 63, 50, 0.08), 0 4px 12px rgba(6, 63, 50, 0.04);
  --kl-card-shadow-hover: 0 26px 52px rgba(6, 63, 50, 0.12), 0 6px 16px rgba(6, 63, 50, 0.06);
}

@media (max-width: 640px) {
  :root {
    --kl-gutter: 20px;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: 100px;
}

body {
  margin: 0;
  font-family: var(--kl-font-display);
  background: var(--kl-warm-white);
  color: var(--kl-charcoal);
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}