:root {
  /* Base Colors - Theme fundamentals */
  --c-black: #000000;
  --c-grey-darker: #27272A;
  --c-grey-dark: #3F3F46;
  --c-grey: #52525B;
  --c-grey-light: #D4D4D8;
  --c-grey-lighter: #E4E4E7;
  --c-grey-lightest: #F4F4F5;
  --c-white: #ffffff;

  /* Brand Colors - Primary theme colors */
  --c-primary: #ffffff;      /* Main brand color (Hero and general background) */
  --c-action: #00BB77;       /* CTA button color */
  --c-background: #ffffff;   /* Primary page background */
  --c-pale-background: #FFDAB9; /* Used for special sections like footer banner */

  /* Semantic Colors - UI states */
  --c-positive: #10B981;
  --c-negative: #EF4444;
  --c-text-dark: var(--c-black);
  --c-text: var(--c-black);
  --c-text-light: var(--c-white);
  --c-icon: var(--c-action);

  /* Global UI Elements - Common styles */
  --page-background-color: var(--c-background);
  --primary-button-background-color: var(--c-action);
  --primary-button-color: var(--c-white);
  --button-border-radius: 6px;

  /* Link Styling - Navigation links */
  --link: var(--c-black);
  --link-hover: var(--c-action);
  --link-active: var(--c-action);

  /* Info Bar Components - Top bar styling */
  --info-bar-background-color: var(--c-black);
  --info-bar-announce-background-color: var(--c-action);
  --info-bar-announce-text-color: var(--c-black);
  --info-bar-text-color: var(--c-white);
  --info-bar-link-color: var(--c-action);

  /* Navigation - Main nav styling */
  --nav-background-color: var(--c-primary);
  --nav-text-color: var(--c-black);
  --nav-button-background-color: var(--c-black);
  --nav-button-border-color: var(--c-black);
  --nav-button-text-color: var(--c-white);
  --nav-link-color: var(--c-black);
  --nav-shadow-color: rgba(0, 0, 0, 0);

  /* Hero Section - Main banner */
  --hero-background-color: var(--c-primary); /* White hero */
  --hero-title-color: var(--c-black);
  --hero-text-color: var(--c-black);
  --hero-button-background-color: var(--c-action); /* Green button */
  --hero-button-border-color: var(--c-action);
  --hero-button-text-color: var(--c-white);
  --hero-secondary-button-text-color: #B55A30; /* Rusty orange */
  --hero-secondary-button-border-color: #B55A30;

  /* Hero Benefits Section - Features list */
  --hero-benefits-background-color: var(--c-white);
  --hero-benefits-text-color: var(--c-black);
  --hero-benefits-icon-color: var(--c-black);

  /* Callout Section - Promotional area */
  --callout-background-color: var(--c-black);
  --callout-text-color: var(--c-white);

  /* Feature Section - Product features */
  --c-sidebar-selling-point-icon: var(--c-icon);
  --feature-section-button-background-color: var(--c-action);
  --feature-section-button-border-color: var(--c-action);
  --feature-section-button-text-color: var(--c-white);

  /* How It Works Section - Process steps */
  --how-it-works-background-color: var(--c-black);
  --how-it-works-title-color: var(--c-white);
  --how-it-works-number-color: #FF2C2C;
  --how-it-works-subtitle-color: #FF2C2C;  /* Red for subtitle/step labels */
  --how-it-works-text-color: var(--c-white);

  /* Reviews Section - Testimonials */
  --review-section-star-icons: var(--c-action);
  --reviews-section-button-background: var(--c-grey-lightest);
  --reviews-section-button-border: var(--c-grey-lighter);
  --reviews-section-button-text: var(--c-black);

  /* Footer Banner - CTA area */
  --footer-banner-background-color: #FFDAB9;
  --footer-banner-title-color: var(--c-black);
  --footer-banner-text-color: var(--c-black);
  --footer-banner-button-background-color: var(--c-black);
  --footer-banner-button-text-color: var(--c-white);

  /* Footer - Site footer */
  --footer-background-color: #2E3138;
  --footer-text-color: #FFFFFF;
  --footer-link-color: #ffffff;

  /* Summary Review - Rating display */
  --c-summary-review-star-icons: var(--c-icon);

  /* Borders - Global borders */
  --border-color: rgba(0, 0, 0, 0);
}