/* Design tokens. Source: docs/design/01-style-tiles (Foundations) and the WAAGS brand board. */

:root {
  /* Brand colors (brand board). Lime is an accent, never a large surface or text on light backgrounds. */
  --color-forest: #203627;
  --color-forest-hover: #2c4a35;
  --color-lime: #e0de2c;
  --color-lime-hover: #eceb63;
  --color-sky: #9dc4d5;
  --color-forest-deep: #182b1e;   /* darker band behind the chat */
  --color-forest-raised: #2b4634; /* bubbles and avatar on forest */
  --gradient-signature: linear-gradient(90deg, var(--color-sky), var(--color-lime));
  --gradient-panel: linear-gradient(140deg, var(--color-sky), var(--color-lime));

  /* Neutrals */
  --color-bg: #f7f7f2;
  --color-surface: #ffffff;
  --color-white: #ffffff;
  --color-text: #141613;
  --color-muted: #4e5d52;
  --color-border: #e4e4dc;
  --color-border-strong: #cdd6ce;

  /* Type: Outfit only, weights 100 to 900. Keep Thin and Light for large sizes. */
  --font-sans: 'Outfit', system-ui, sans-serif;
  --fw-thin: 100;
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --text-display: clamp(1.875rem, 0.9rem + 3.2vw, 3rem); /* 30px on phones, 48px on desktop */
  --text-lead: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem); /* 17px to 20px */
  --text-h2: 1.5rem;
  --text-subhead: 1.1875rem;
  --text-body: 1.0625rem; /* 17px, never below 16px */
  --text-small: 0.875rem;
  --text-eyebrow: 0.8125rem;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-card: 18px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgb(32 54 39 / 0.1);
  --shadow-md: 0 8px 20px -8px rgb(32 54 39 / 0.22);
  --shadow-lg: 0 24px 50px -20px rgb(32 54 39 / 0.34);

  /* Layout */
  --container: 1280px;
  --gutter: var(--space-5);
  /* Matches .nav-shell's reserved height (header.css) — used as the anchor-
     scroll clearance (scroll-margin-top) so jumping to a section doesn't
     land it under the now-sticky header. */
  --header-h: 60px;
}

@media (min-width: 600px) {
  :root { --gutter: var(--space-8); }
}

@media (min-width: 900px) {
  :root { --gutter: var(--space-12); }
  :root { --header-h: 76px; }
}