@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800;900&display=swap");

/**
 * offlead design tokens — single source of truth (web ↔ app parity)
 */
:root {
  --color-primary: #3b7c64;
  --color-primary-light: #4a8b72;
  --color-primary-dark: #2e6151;
  --color-surface: #f3f8f5;
  --color-surface-warm: #f6e8d5;
  --color-accent: #d76549;

  --spruce-green: var(--color-primary);
  --spruce-green-light: var(--color-primary-light);
  --spruce-green-dark: var(--color-primary-dark);

  --white: #ffffff;
  --black: #0a0a0a;
  --grey-50: #fafafa;
  --grey-100: #f5f5f5;
  --grey-200: #e5e5e5;
  --grey-300: #d4d4d4;
  --grey-400: #a3a3a3;
  --grey-500: #737373;
  --grey-600: #525252;
  --grey-700: #404040;
  --grey-800: #262626;
  --grey-900: #171717;

  --border-grey: var(--grey-300);
  --light-grey: var(--grey-100);
  --text-grey: var(--grey-600);
  --dark-grey: var(--grey-800);
  --text-grey-light: var(--grey-500);
  --spruce-green-lightest: #f0f7f4;

  --text-dark: var(--grey-900);
  --font-sans: "Figtree", "Inter", system-ui, -apple-system, sans-serif;

  --nav-height: 72px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: var(--shadow-md);
  --spruce-dark: var(--color-primary-dark);
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
  }
}