/* Design tokens.
   Colours are stored as bare HSL triplets so any of them can be used at partial
   alpha with hsl(var(--x) / 0.5) — the same trick the original design system uses. */

:root {
  /* Surfaces */
  --background: 210 20% 98%;
  --foreground: 215 25% 15%;
  --card: 0 0% 100%;
  --section-alt: 210 20% 95%;
  --muted: 210 15% 93%;
  --muted-foreground: 215 12% 50%;
  --border: 214 20% 88%;
  --input: 214 20% 88%;
  --ring: 185 75% 42%;

  /* Brand */
  --primary: 185 75% 42%; /* teal — the logo colour, carries every primary action */
  --primary-foreground: 0 0% 100%;
  --secondary: 145 65% 42%; /* green — reserved for WhatsApp / "talk to us" */
  --secondary-foreground: 0 0% 100%;
  --accent: 35 95% 55%; /* amber — used once, on the closing urgency CTA */
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;

  /* Composed backgrounds */
  --hero-overlay: linear-gradient(135deg, hsl(185 75% 12% / 0.88), hsl(185 60% 22% / 0.75));
  --urgency-gradient: linear-gradient(135deg, hsl(185 75% 42%), hsl(185 80% 30%));
  --cta-gradient: linear-gradient(135deg, hsl(145 65% 42%), hsl(145 70% 35%));

  /* Type */
  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-section: clamp(1.875rem, 1.4rem + 1.6vw, 2.25rem);

  /* Rhythm — sections breathe more than cards, cards more than list rows. */
  --radius: 0.75rem;
  --radius-sm: 0.5rem;
  --space-section: clamp(3.5rem, 2.5rem + 3vw, 5rem);
  --container: 72rem;
  --header-height: 4rem;

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px hsl(215 25% 15% / 0.06);
  --shadow-md: 0 4px 12px hsl(215 25% 15% / 0.09);
  --shadow-lg: 0 10px 30px hsl(215 25% 15% / 0.12);
}