@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ─────────────────────────────────────────
   CSS VARIABLES (matches app exactly)
───────────────────────────────────────── */
:root {
  --bg: hsl(210, 20%, 98%);
  --fg: hsl(220, 30%, 10%);
  --border: hsl(214, 20%, 88%);
  --border-light: hsl(214, 20%, 92%);
  --muted: hsl(215, 16%, 47%);
  --secondary: hsl(210, 18%, 95%);
  --primary: hsl(158, 75%, 36%);
  --primary-fg: #fff;
  --destructive: hsl(0, 72%, 51%);
  --amber: hsl(38, 92%, 50%);
  --white: #fff;
  --radius: 14px;
  --font: 'Inter', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'Menlo', 'Consolas', 'Monaco', monospace;
  --radius-lg: 16px;
  --wa: #25D366;
  --wa-dark: #20c05c;



  /* Derived */
  --primary-10: hsl(158, 75%, 36%, 0.10);
  --primary-08: hsl(158, 75%, 36%, 0.08);
  --primary-15: hsl(158, 75%, 36%, 0.15);
  --primary-20: hsl(158, 75%, 36%, 0.20);
  --primary-25: hsl(158, 75%, 36%, 0.25);
  --primary-30: hsl(158, 75%, 36%, 0.30);
  --primary-60: hsl(158, 75%, 36%, 0.60);
  --primary-dark: hsl(158, 75%, 30%);



}

/* ─────────────────────────────────────────
   RESET
───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--fg);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;font-family:inherit;border:none;background:none;}
input,select,textarea{font-family:inherit;}
img{display:block;}