/* Lawns and Pavers — Design Tokens
 * Crisp white + emerald + slate direction.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* -------- Turf (emerald primary) -------- */
  --turf-50:  #EAF3EC;
  --turf-100: #CDE3D3;
  --turf-200: #9FC7AE;
  --turf-300: #6FA985;
  --turf-400: #478A62;
  --turf-500: #2F7048;
  --turf-600: #245A3C;
  --turf-700: #1F5A3A; /* brand green — from reference */
  --turf-800: #17432B;
  --turf-900: #0F2E1D;
  --turf-950: #081A10;

  /* -------- Slate (secondary — from reference paver panel) -------- */
  --slate-50:  #F2F4F6;
  --slate-100: #E3E7EB;
  --slate-200: #CBD2D9;
  --slate-300: #B7C1CA;
  --slate-400: #8F9AA6;
  --slate-500: #6B7682;
  --slate-600: #4C5A66; /* brand slate — from reference */
  --slate-700: #38434D;
  --slate-800: #252D34;
  --slate-900: #131820;

  /* -------- Clay (accent, sparingly used on CTA flourish) -------- */
  --clay-100: #F5D7C6;
  --clay-300: #E0906D;
  --clay-500: #B2593A;
  --clay-700: #6F3521;

  /* -------- Neutrals (clean, slate-tinted, NOT warm cream) -------- */
  --white:    #FFFFFF;
  --paper:    #FAFBFC; /* page bg alt — barely off-white */
  --n-50:     #F1F4F6;
  --n-100:    #E6EAEE;
  --n-200:    #D7DDE3;
  --n-300:    #BEC6CE;
  --n-400:    #9AA3AD;

  /* -------- Ink -------- */
  --ink-900: #0B0E12; /* near-black, slight cool */
  --ink-700: #2A2F35;
  --ink-500: #5A6069;
  --ink-300: #9298A1;

  /* -------- Semantic tokens -------- */
  --bg-page:       var(--white);
  --bg-section:    var(--n-50);
  --bg-card:       var(--white);
  --bg-inverse:    var(--turf-700);
  --bg-ink:        var(--ink-900);

  --fg-primary:    var(--ink-900);
  --fg-secondary:  var(--slate-600);
  --fg-muted:      var(--ink-500);
  --fg-inverse:    var(--white);
  --fg-accent:     var(--turf-700);

  --border-default: var(--n-200);
  --border-strong:  var(--slate-300);
  --border-focus:   var(--turf-700);

  --btn-primary-bg:        var(--turf-700);
  --btn-primary-bg-hover:  var(--turf-800);
  --btn-primary-bg-active: var(--turf-900);
  --btn-primary-fg:        var(--white);

  --btn-secondary-bg:        transparent;
  --btn-secondary-border:    var(--ink-900);
  --btn-secondary-fg:        var(--ink-900);
  --btn-secondary-bg-hover:  var(--n-100);

  /* -------- Type -------- */
  --font-display: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  80px;

  --leading-tight:  1.02;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.22em;

  --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;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(11, 14, 18, 0.06);
  --shadow-2: 0 8px 24px -8px rgba(11, 14, 18, 0.12);
  --shadow-3: 0 24px 64px -24px rgba(11, 14, 18, 0.22);

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 400ms;

  --header-h: 72px;
  --container-max: 1200px;
  --container-wide: 1440px;
}

/* ======== Elements ======== */

html, body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: inherit;
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--text-5xl); text-transform: uppercase; }
h2 { font-size: var(--text-3xl); text-transform: uppercase; }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-lg); text-transform: uppercase; letter-spacing: 0; }

h5, h6 { font-family: var(--font-sans); font-weight: 700; margin: 0; }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

p { margin: 0; line-height: var(--leading-loose); color: inherit; text-wrap: pretty; }
small, .text-small { font-size: var(--text-sm); color: var(--fg-muted); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

.display {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  line-height: 1.0;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-transform: uppercase;
}

.lead { font-size: var(--text-lg); line-height: var(--leading-loose); color: var(--fg-secondary); }

code, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; }

a { color: inherit; text-decoration-color: var(--slate-300); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color var(--dur-base) var(--ease-out); }
a:hover { text-decoration-color: var(--ink-900); }

:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-xs); }

/* Primitives */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 12px 20px; min-height: 44px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: var(--text-base);
  font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  text-decoration: none; user-select: none;
}
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn-primary:hover { background: var(--btn-primary-bg-hover); }
.btn-primary:active { background: var(--btn-primary-bg-active); transform: translateY(1px); }
.btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-fg); border-color: var(--btn-secondary-border); }
.btn-secondary:hover { background: var(--btn-secondary-bg-hover); }
.btn-ghost { background: transparent; color: var(--fg-primary); }
.btn-ghost:hover { background: var(--n-100); }

.card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-1); padding: var(--space-5); }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-xs); background: var(--slate-100); color: var(--slate-700); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--white); border: 1px solid var(--n-200); color: var(--ink-900); font-size: var(--text-sm); font-weight: 600; }

.input, .textarea, .select { width: 100%; padding: 12px 14px; min-height: 48px; background: var(--white); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-base); color: var(--fg-primary); transition: border-color var(--dur-fast) var(--ease-out); }
.input:focus, .textarea:focus, .select:focus { outline: 2px solid var(--border-focus); outline-offset: 2px; border-color: transparent; }
.input::placeholder, .textarea::placeholder { color: var(--fg-muted); }
.label { display: block; margin-bottom: 6px; font-size: var(--text-sm); font-weight: 600; color: var(--fg-primary); }

.divider { height: 1px; background: var(--border-default); border: 0; }