/* ============================================================
   Grassfed Design System — Colors & Type
   ============================================================
   Daytime light-mode palette; dark brand-green for navbar/footer.
   Imports Space Grotesk (display) and Inter (body) from Google Fonts.
   ============================================================ */

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

:root {
  /* ---------- Core palette (HSL + HEX parity for tooling) ---------- */
  --bg:              hsl(50, 10%, 96%);        /* #F6F5F1 warm off-white */
  --bg-elevated:     hsl(0, 0%, 100%);         /* #FFFFFF cards */
  --fg:              hsl(168, 55%, 23%);       /* #1A5A50 brand green text */
  --fg-muted:        hsl(155, 20%, 40%);       /* #527A6B captions / meta */
  --fg-subtle:       hsl(155, 15%, 55%);       /* #7E9890 hints */

  --primary:         hsl(155, 68%, 28%);       /* #177851 CTAs, links */
  --primary-hover:   hsl(155, 68%, 24%);       /* darken on hover */
  --primary-fg:      hsl(0, 0%, 100%);

  --accent:          hsl(93, 55%, 42%);        /* #62A930 lime accent */
  --accent-glow:     hsl(93, 60%, 48%);        /* #6FC433 hover/glow */
  --accent-fg:       hsl(155, 60%, 14%);       /* dark text on lime */

  --secondary:       hsl(155, 20%, 90%);       /* #DCE8E3 subtle bg */
  --muted:           hsl(155, 15%, 88%);       /* #D7E0DC muted bg */
  --border:          hsl(155, 15%, 85%);       /* #CED9D4 dividers */
  --border-strong:   hsl(155, 15%, 75%);       /* stronger dividers */

  --dark:            hsl(155, 60%, 14%);       /* #0F3A29 navbar / footer */
  --dark-elevated:   hsl(155, 55%, 18%);       /* cards on dark */
  --dark-fg:         hsl(50, 10%, 96%);        /* text on dark */
  --dark-border:     hsl(155, 40%, 24%);       /* borders on dark */

  --destructive:     hsl(0, 84%, 50%);         /* #EB1F1F errors */
  --destructive-fg:  hsl(0, 0%, 100%);
  --warning:         hsl(38, 92%, 50%);
  --success:         hsl(145, 65%, 38%);

  /* ---------- Product line type-tokens ---------- */
  /* Used wherever Lite + Farm clients sit side-by-side (Clients list,
     Queue, Health). Pill background is the *-bg variant; pill text is
     *-fg. Row-accent borders use the solid color. The three are
     pulled from the existing palette so they never look out-of-brand:
     teal (Lite, reactive/event-driven), amber (Farm, monthly/scheduled),
     indigo (Both, premium union). */
  --type-lite:       hsl(170, 55%, 38%);
  --type-lite-bg:    hsla(170, 55%, 38%, 0.12);
  --type-lite-fg:    hsl(170, 65%, 25%);
  --type-farm:       hsl(35, 70%, 45%);
  --type-farm-bg:    hsla(35, 70%, 45%, 0.13);
  --type-farm-fg:    hsl(28, 75%, 32%);
  --type-both:       hsl(255, 40%, 50%);
  --type-both-bg:    hsla(255, 40%, 50%, 0.13);
  --type-both-fg:    hsl(255, 50%, 38%);

  /* ---------- Data-viz scale (maps / charts) ---------- */
  --data-1:          hsl(168, 55%, 23%);       /* deep green */
  --data-2:          hsl(155, 68%, 28%);       /* teal */
  --data-3:          hsl(140, 50%, 40%);       /* mid green */
  --data-4:          hsl(93, 55%, 42%);        /* lime */
  --data-5:          hsl(60, 60%, 55%);        /* olive-yellow */
  --data-6:          hsl(38, 75%, 55%);        /* warm amber */

  /* ---------- Gradients ----------
     --grad-primary: radial corner glow. Lime sweeps up from bottom-left
     through mid-green into the dark-green field — avoids the muddy
     yellow-green middle a straight linear produces. Use on hero CTAs,
     one-per-page premium moments.
     --grad-soft:    soft linear, lime→primary, for chips / badges / subtle fills.
  */
  --grad-primary:    radial-gradient(120% 180% at 0% 100%, hsl(93, 65%, 63%) 0%, hsl(93, 55%, 42%) 35%, hsl(168, 55%, 23%) 75%, hsl(155, 60%, 14%) 100%);
  --grad-soft:       linear-gradient(135deg, hsl(93, 55%, 42%) 0%, hsl(155, 68%, 28%) 100%);
  --grad-subtle:     linear-gradient(135deg, hsl(155, 15%, 92%) 0%, hsl(155, 15%, 90%) 100%);
  --grad-dark:       linear-gradient(180deg, hsl(155, 60%, 14%) 0%, hsl(155, 60%, 10%) 100%);

  /* ---------- Type ---------- */
  --font-display:    'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:       'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — modular, generous, data-confident */
  --text-xs:         12px;
  --text-sm:         14px;
  --text-base:       16px;
  --text-lg:         18px;
  --text-xl:         22px;
  --text-2xl:        28px;
  --text-3xl:        36px;
  --text-4xl:        48px;
  --text-5xl:        64px;
  --text-6xl:        80px;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-caps:   0.12em;     /* for all-caps eyebrows */

  /* ---------- Spacing (4px base) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;        /* 0.625rem — palette default */
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* ---------- Shadows (green-tinted, never pure black) ---------- */
  --shadow-xs:   0 1px 2px hsla(168, 40%, 15%, 0.04);
  --shadow-sm:   0 2px 4px hsla(168, 40%, 15%, 0.05), 0 1px 2px hsla(168, 40%, 15%, 0.04);
  --shadow-md:   0 4px 12px hsla(168, 40%, 15%, 0.06), 0 2px 4px hsla(168, 40%, 15%, 0.04);
  --shadow-lg:   0 12px 32px hsla(168, 40%, 15%, 0.08), 0 4px 8px hsla(168, 40%, 15%, 0.05);
  --shadow-xl:   0 24px 64px hsla(168, 40%, 15%, 0.12), 0 8px 16px hsla(168, 40%, 15%, 0.06);
  --shadow-inner:inset 0 1px 2px hsla(168, 40%, 15%, 0.06);
  --shadow-glow: 0 0 0 4px hsla(93, 55%, 42%, 0.25);   /* accent focus ring */

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    360ms;

  /* ---------- Grain / noise overlay (SVG turbulence) ---------- */
  --noise-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.22  0 0 0 0 0.16  0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   Semantic type styles
   ============================================================ */

html { font-family: var(--font-body); color: var(--fg); background: var(--bg); }
body { margin: 0; font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; }

.display, h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--fg);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  font-weight: 600;
  margin: 0;
}

h1 { font-size: var(--text-5xl); font-weight: 600; letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-3xl); font-weight: 600; }
h3 { font-size: var(--text-xl); font-weight: 600; letter-spacing: var(--tracking-snug); line-height: var(--leading-snug); }
h4 { font-family: var(--font-body); font-size: var(--text-lg); font-weight: 600; color: var(--fg); margin: 0; }

p { margin: 0 0 var(--space-4); color: var(--fg); }
.text-muted { color: var(--fg-muted); }
.text-subtle { color: var(--fg-subtle); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

.lede {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-muted);
  font-weight: 400;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--muted);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid hsla(155, 68%, 28%, 0.25);
  transition: border-color var(--dur-fast) var(--ease-out);
}
a:hover { border-bottom-color: var(--primary); }

/* ============================================================
   Utilities
   ============================================================ */
.noise-overlay { position: relative; }
.noise-overlay::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--noise-url);
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.surface-dark {
  background: var(--dark);
  color: var(--dark-fg);
  --fg: var(--dark-fg);
  --fg-muted: hsl(155, 20%, 72%);
  --border: var(--dark-border);
  --bg-elevated: var(--dark-elevated);
}

/* ============================================================
   Product-line type pills + accents
   ============================================================ */
.type-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full, 999px);
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
  border: 1px solid transparent;
}
.type-pill-lite { background: var(--type-lite-bg); color: var(--type-lite-fg); }
.type-pill-farm { background: var(--type-farm-bg); color: var(--type-farm-fg); }
.type-pill-both { background: var(--type-both-bg); color: var(--type-both-fg); }

.row-accent { border-left: 3px solid transparent; }
.row-accent-lite { border-left-color: var(--type-lite); }
.row-accent-farm { border-left-color: var(--type-farm); }
.row-accent-both { border-left-color: var(--type-both); }

/* Filter chip strip — used on every cross-functional list. Active
   chip uses the relevant type color so the chip itself is a legend. */
.filter-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.filter-chip {
  padding: 5px 12px;
  border-radius: var(--radius-full, 999px);
  font-size: var(--text-xs);
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--fg-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.filter-chip:hover { color: var(--fg); }
.filter-chip.active { color: var(--fg); border-color: var(--fg-muted); background: var(--secondary); }
.filter-chip.active.chip-lite { background: var(--type-lite-bg); border-color: var(--type-lite); color: var(--type-lite-fg); }
.filter-chip.active.chip-farm { background: var(--type-farm-bg); border-color: var(--type-farm); color: var(--type-farm-fg); }
.filter-chip.active.chip-both { background: var(--type-both-bg); border-color: var(--type-both); color: var(--type-both-fg); }
.filter-chip .chip-count {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.7;
}