:root {

  /* =========================================================
     FORT KNOX SELF STORAGE
     Brand palette derived from supplied logo
     ========================================================= */

  --c-black: #0B162C;
  --c-grey-darker: #1A2438;
  --c-grey-dark: #3F4655;
  --c-grey: #7F7D8A;
  --c-grey-light: #D7D8DC;
  --c-grey-lighter: #E8E9EC;
  --c-grey-lightest: #F5F6F8;
  --c-white: #FFFFFF;

  /* Brand colours */
  --c-navy: #0B162C;
  --c-yellow: #FEE800;
  --c-fortress-grey: #7F7D8A;

  /*
   * Primary = dark Fort Knox navy
   * Action = yellow from SELF STORAGE logo
   */
  --c-primary: var(--c-navy);
  --c-action: var(--c-yellow);

  --c-background: var(--c-white);
  --c-pale-background: var(--c-grey-lightest);

  --c-positive: #10B981;
  --c-negative: #EF4444;

  --c-text-dark: var(--c-navy);
  --c-text: var(--c-grey-dark);
  --c-text-light: var(--c-white);

  /* =========================================================
     GLOBAL
     ========================================================= */

  --page-background-color: var(--c-background);

  --primary-button-background-color: var(--c-yellow);
  --primary-button-color: var(--c-navy);
  --button-border-radius: 4px;

  --c-icon: var(--c-navy);

  --link: var(--c-navy);
  --link-hover: var(--c-grey-dark);
  --link-active: var(--c-navy);

  /* =========================================================
     TOP INFORMATION / ANNOUNCEMENT BAR
     ========================================================= */

  --info-bar-background-color: var(--c-navy);

  --info-bar-announce-background-color: var(--c-yellow);
  --info-bar-announce-text-color: var(--c-navy);

  --info-bar-text-color: var(--c-white);
  --info-bar-link-color: var(--c-yellow);

  /* =========================================================
     NAVIGATION
     Dark header mirrors the logo background
     ========================================================= */

  --nav-background-color: var(--c-navy);
  --nav-text-color: var(--c-white);

  --nav-button-background-color: var(--c-yellow);
  --nav-button-border-color: var(--c-yellow);
  --nav-button-text-color: var(--c-navy);

  --nav-link-color: var(--c-white);
  --nav-shadow-color: rgba(11, 22, 44, 0.15);

  /* =========================================================
     HERO
     Clean white hero lets the Fort Knox logo stand out
     ========================================================= */

  --hero-background-color: var(--c-white);

  --hero-title-color: var(--c-navy);
  --hero-text-color: var(--c-grey-dark);

  --hero-button-background-color: var(--c-yellow);
  --hero-button-border-color: var(--c-yellow);
  --hero-button-text-color: var(--c-navy);

  --hero-secondary-button-text-color: var(--c-navy);
  --hero-secondary-button-border-color: var(--c-navy);

  /* =========================================================
     HERO BENEFITS / SELLING POINT BAR
     Strong navy brand strip
     ========================================================= */

  --hero-benefits-background-color: var(--c-navy);
  --hero-benefits-text-color: var(--c-white);
  --hero-benefits-icon-color: var(--c-yellow);

  /* =========================================================
     CALLOUT
     ========================================================= */

  --callout-background-color: var(--c-navy);
  --callout-text-color: var(--c-white);

  /* =========================================================
     SIDEBAR / UNIT BOOKING
     ========================================================= */

  --c-sidebar-selling-point-icon: var(--c-yellow);

  /* =========================================================
     FEATURE SECTIONS
     ========================================================= */

  --feature-section-button-background-color: var(--c-yellow);
  --feature-section-button-border-color: var(--c-yellow);
  --feature-section-button-text-color: var(--c-navy);

  /* =========================================================
     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-yellow);
  --how-it-works-subtitle-color: var(--c-yellow);
  --how-it-works-text-color: var(--c-white);

  /* =========================================================
     REVIEWS
     ========================================================= */

  --review-section-star-icons: var(--c-yellow);

  --reviews-section-button-background: var(--c-white);
  --reviews-section-button-border: var(--c-grey-lighter);
  --reviews-section-button-text: var(--c-navy);

  /* =========================================================
     FOOTER CTA BANNER
     Yellow creates a strong final conversion point
     ========================================================= */

  --footer-banner-background-color: var(--c-yellow);

  --footer-banner-title-color: var(--c-navy);
  --footer-banner-text-color: var(--c-navy);

  --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: var(--c-grey-light);
  --footer-link-color: var(--c-white);

  /* =========================================================
     MISC
     ========================================================= */

  --c-summary-review-star-icons: var(--c-yellow);

  --border-color: rgba(11, 22, 44, 0.10);
}