:root {
  --yellow: #F5C000;
  /* PRIMARY — all CTAs, accents, highlights */
  --yellow-hover: #C99A00;
  /* Hover state */
  --yellow-deep: #4A3800;
  /* Text ON yellow backgrounds */
  --yellow-soft: rgba(245, 192, 0, 0.10);

  --font-body: 'Outfit', sans-serif;
  --font-display: 'Bebas Neue', sans-serif;

  --dark: #141412;
  /* Page background, hero, sidebar */
  --dark-2: #1E1E1C;
  /* Cards, modals */
  --dark-3: #242422;
  /* Nested cards, inputs */
  --border: #3A3A38;
  /* All borders */

  --light: #F5F4F0;
  /* Light sections bg */
  --white: #FFFFFF;

  --text-main: #FFFFFF;
  /* Text on dark bg */
  --text-sub: #C8C7C2;
  /* Secondary text on dark */
  --text-muted: #888884;
  /* Hints, placeholders */
  --text-dark: #141412;
  /* Text on yellow or light bg */

  /* FLUID TYPOGRAPHY & SPACING (Responsive by default) */
  --fs-h1: clamp(2.5rem, 8vw, 6rem);
  /* 40px to 96px */
  --fs-h2: clamp(2rem, 6vw, 4.5rem);
  /* 32px to 72px */
  --fs-h3: clamp(1.5rem, 4vw, 2.5rem);
  /* 24px to 40px */
  --fs-body: clamp(0.9rem, 1vw + 0.5rem, 1.1rem);

  --spacing-section: clamp(60px, 10vw, 120px);
  --container-padding: clamp(16px, 5vw, 24px);
}