:root {
  --font-primary: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-secondary: "Merriweather", Georgia, serif;

  /* R7 core tokens (minimal migration layer) */
  --r7-space-0: 0;
  --r7-space-1: 0.5rem; /* 8px */
  --r7-space-2: 1rem;   /* 16px */
  --r7-space-3: 1.5rem; /* 24px */
  --r7-space-4: 2rem;   /* 32px */

  --r7-radius-2: 0.75rem;
  --r7-radius-3: 1rem;

  --r7-shadow-soft: 0 10px 30px hsla(0, 0%, 0%, 0.08), 0 2px 10px hsla(0, 0%, 0%, 0.06);

  --r7-duration-1: 140ms;
  --r7-duration-2: 220ms;
  --r7-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Surfaces */
  --surface-0: hsl(0, 0%, 97%);

  /* Text */
  --text-inverse: hsl(0, 0%, 100%);
  --text-inverse-muted: hsla(0, 0%, 100%, 0.86);

  /* Brand accents (from kit) */
  --brand-mauve-600: hsl(321, 18%, 45%); /* AA with white text */
  --brand-pink-400: hsl(0, 54%, 74%);

  /* CTA */
  --cta-bg: var(--brand-mauve-600);
  --cta-bg-hover: var(--brand-pink-400);
  --cta-text: var(--text-inverse);

  /* Focus */
  --focus-ring: hsl(0, 0%, 100%);

  /* Hero overlay (dark like original) */
  --hero-overlay-top: hsla(217, 27%, 15%, 0.72);
  --hero-overlay-bottom: hsla(217, 27%, 12%, 0.82);
  --hero-kicker: var(--brand-pink-400);


  /* Surfaces / text for light sections */
  --surface-1: hsl(0, 60%, 97%);           /* soft band (kit: #FFEEEE vibe) */
  --surface-card: hsl(0, 0%, 100%);        /* white cards */
  --border-subtle: hsla(217, 27%, 31%, 0.14);

  --text-primary: hsl(217, 27%, 31%);      /* kit: #3A4B66 */
  --text-muted: hsl(321, 12%, 40%);        /* darker mauve for AA on light bg */

  --radius-lg: var(--r7-radius-3);

  --shadow-ambient-soft: 0 10px 24px hsla(217, 27%, 10%, 0.06);
  --shadow-direct-soft: 0 4px 12px hsla(217, 27%, 10%, 0.06);
  --shadow-soft: var(--r7-shadow-soft);

  --surface-panel: hsl(332, 22%, 88%);
  --surface-panel-soft: hsla(332, 22%, 88%, 0.72);
  --surface-feature-card: hsla(0, 0%, 100%, 0.14);

  --feature-title: hsl(321, 18%, 45%);
  --feature-text: hsl(321, 12%, 40%);
  --feature-icon-bg: hsla(0, 0%, 100%, 0.2);
  --feature-icon-color: hsl(321, 18%, 45%);
  --feature-overlap: clamp(2rem, 6vw, 5rem);

  --shadow-ambient-lg: 0 18px 42px hsla(217, 27%, 10%, 0.08);
  --shadow-direct-lg: 0 8px 20px hsla(217, 27%, 10%, 0.08);
  --shadow-lg-soft: var(--shadow-ambient-lg), var(--shadow-direct-lg);

  --levels-kicker: hsl(191, 61%, 46%);
  --levels-title: hsl(236, 57%, 18%);
  --levels-text: hsl(217, 18%, 36%);
  --levels-lead: hsl(321, 18%, 45%);
  --levels-summary: hsl(217, 27%, 31%);
  --levels-summary-hover: hsl(321, 18%, 45%);
  --levels-summary-border: hsla(217, 27%, 31%, 0.16);
  --levels-grid-gap: 0;

  /* Images */
  --hero-image-desktop: url("../img/hero/Hero Desktop.webp");
  --hero-image-tablet: url("../img/hero/Hero Tablet.webp");
  --hero-image-mobile: url("../img/hero/Hero Mobile.webp");
}