:root {
  /* Palette */
  --pv-primary: #0d2b3e; /* brand navy */
  --pv-bg: linear-gradient(
    135deg,
    #0d2b3e 0%,
    #0d2b3e 25%,
    #174a67 50%,
    #174a67 75%,
    #0d2b3e 100%
  );
  --pv-surface: rgba(13, 43, 62, 0.9);
  --pv-accent: #cedc00;
  --pv-accent-hover: #b8c600;

  /* Text & borders */
  --pv-text: #f9f7f1;
  --pv-text-muted: #e6e6e6;
  --pv-border: rgba(13, 43, 62, 0.06);

  /* Radii */
  --pv-radius-sm: 8px;
  --pv-radius-md: 12px;
  --pv-radius-lg: 18px;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Fonts (ensure these match the families loaded in head) */
  --pv-font-base: "Poppins", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
    sans-serif;
  --pv-font-heading: "Baloo 2", cursive;
  --pv-font-nav: "Montserrat", sans-serif;

  /* Backwards compatibility mappings (legacy vars used across the CSS)
     Map legacy names to the canonical pv-* tokens or to the previous values
     so removing the old :root blocks is safe and visual output does not
     unexpectedly change. */
  --default-font: var(--pv-font-base);
  --font-base: var(--pv-font-base);
  --heading-font: var(--pv-font-heading);
  --nav-font: var(--pv-font-nav);

  /* Legacy names from starter-page.html */
  --bg-dark: var(--pv-primary);
  --bg-blue: #174a67;
  --text-main: var(--pv-text);
  --text-sub: var(--pv-text-muted);
  --pv-white: var(--pv-text);
  --pv-white-pure: #ffffff;
  --pv-grey-light: var(--pv-text-muted);
  --pv-grey-mid: #9ca4aa;
  --pv-grey-dark: #0b1720;

  --radius-md: var(--pv-radius-md);
  --radius-lg: var(--pv-radius-lg);

  --fs-xs: 0.875rem;
  --fs-sm: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2.25rem;
  --fs-xxl: 3rem;
  --lh-tight: 1.1;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --accent-color: var(--pv-accent);
  --btn-bg: var(--pv-accent);
  --tennis-ball: var(--pv-accent);
  --pv-lime: var(--pv-accent);
  --btn-text: var(--pv-primary);

  --background-color: var(--pv-bg);
  --surface-color: var(--pv-surface);
  --default-color: var(--pv-text);
  --heading-color: var(--pv-text);
  --contrast-color: var(--pv-text);
  --nav-color: var(--pv-text-muted);
  --nav-hover-color: var(--pv-accent);
  --nav-mobile-background-color: var(--pv-primary);
  --nav-dropdown-background-color: var(--pv-primary);
  --nav-dropdown-color: var(--pv-text-muted);
  --nav-dropdown-hover-color: var(--pv-accent);
}