:root {
  /* Palette */
  --c-gold: #F5A302;          /* Golden Horizon */
  --c-navy: #0C1E34;          /* Midnight Navy */
  --c-blue: #0050B3;          /* Regal Blue */
  --c-black: #000000;         /* Onyx Black */
  --c-silver: #C4C4C4;         /* Sterling Silver */
  --c-white: #FFFFFF;         /* Pure White */

  /* Derived neutrals (using palette via rgba) */
  --c-silver-10: rgba(196, 196, 196, 0.10);
  --c-silver-16: rgba(196, 196, 196, 0.16);
  --c-navy-10: rgba(12, 30, 52, 0.10);
  --c-navy-14: rgba(12, 30, 52, 0.14);

  /* Core assignments */
  --c-primary: var(--c-white);
  --c-action: var(--c-gold);
  --c-background: var(--c-white);
  --c-pale-background: var(--c-silver-10);

  /* Text */
  --c-text-dark: var(--c-navy);
  --c-text: rgba(12, 30, 52, 0.82);
  --c-text-light: var(--c-white);

  /* Page */
  --page-background-color: var(--c-background);

  /* Buttons */
  --primary-button-background-color: var(--c-action);
  --primary-button-color: var(--c-navy); /* best contrast on gold */
  --button-border-radius: 6px;

  /* Icons */
  --c-icon: var(--c-gold);

  /* Links */
  --link: var(--c-navy);
  --link-hover: rgba(0, 80, 179, 0.85);
  --link-active: rgba(0, 80, 179, 0.85);

  /* Info bar */
  --info-bar-background-color: var(--c-navy);
  --info-bar-announce-background-color: var(--c-gold);
  --info-bar-announce-text-color: var(--c-navy);
  --info-bar-text-color: var(--c-white);
  --info-bar-link-color: var(--c-gold);

  /* Navigation (logo will pop if it’s white) */
  --nav-background-color: var(--c-navy);
  --nav-text-color: var(--c-white);
  --nav-link-color: var(--c-white);
  --nav-button-background-color: var(--c-gold);
  --nav-button-border-color: var(--c-gold);
  --nav-button-text-color: var(--c-navy);
  --nav-shadow-color: rgba(0, 0, 0, 0.12);

  /* Hero */
  --hero-background-color: var(--c-white);
  --hero-title-color: var(--c-navy);
  --hero-text-color: rgba(12, 30, 52, 0.82);
  --hero-button-background-color: var(--c-gold);
  --hero-button-border-color: var(--c-gold);
  --hero-button-text-color: var(--c-navy);
  --hero-secondary-button-text-color: var(--c-blue);
  --hero-secondary-button-border-color: var(--c-blue);

  /* Hero benefits bar */
  --hero-benefits-background-color: var(--c-gold);
  --hero-benefits-text-color: var(--c-navy);
  --hero-benefits-icon-color: var(--c-navy);

  /* Callout sections */
  --callout-background-color: var(--c-navy);
  --callout-text-color: var(--c-white);

  /* Sidebar selling point icon */
  --c-sidebar-selling-point-icon: var(--c-gold);

  /* Feature section buttons */
  --feature-section-button-background-color: var(--c-blue);
  --feature-section-button-border-color: var(--c-blue);
  --feature-section-button-text-color: var(--c-white);

  /* How it works */
  --how-it-works-background-color: var(--c-navy);
  --how-it-works-title-color: var(--c-white);
  --how-it-works-number-color: var(--c-gold);
  --how-it-works-subtitle-color: var(--c-gold);
  --how-it-works-text-color: rgba(255, 255, 255, 0.88);

  /* Reviews */
  --review-section-star-icons: var(--c-gold);
  --reviews-section-button-background: var(--c-silver-10);
  --reviews-section-button-border: var(--c-silver);
  --reviews-section-button-text: var(--c-navy);

  /* Footer banner */
  --footer-banner-background-color: var(--c-gold);
  --footer-banner-title-color: var(--c-navy);
  --footer-banner-text-color: rgba(12, 30, 52, 0.82);
  --footer-banner-button-background-color: var(--c-navy);
  --footer-banner-button-text-color: var(--c-white);

  /* Footer */
  --footer-background-color: var(--c-navy);
  --footer-text-color: rgba(255, 255, 255, 0.82);
  --footer-link-color: var(--c-white);

  /* Summary stars */
  --c-summary-review-star-icons: var(--c-gold);

  /* Borders */
  --border-color: var(--c-navy-14);
}