:root {
  /* Backgrounds */
  --bg-white: #FFFFFF;
  --bg-cream: #F7F5F0;
  --bg-muted: #F3F4F6;
  --bg-section-alt: var(--bg-muted);

  /* Text colors */
  --color-black:       #111111;
  --color-dark-gray:   #444444;
  --color-gray:        #4B5563;
  --color-gray-muted:  #52525B;
  --color-white:       #FFFFFF;

  /* Brand palette — #D74045 */
  --color-brand:             #D74045;
  --color-brand-hover:       #BE3A3E;
  --color-brand-dark:        #9A2E31;
  --color-brand-darker:      #762326;
  --color-brand-light:       #E36367;
  --color-brand-lighter:     #EC888B;
  --color-brand-lightest:    #F5B8BA;
  --color-brand-muted:       rgba(215, 64, 69, 0.08);
  --color-brand-border:      rgba(215, 64, 69, 0.16);
  --color-brand-gradient:    linear-gradient(135deg, var(--color-brand-light) 0%, var(--color-brand) 52%, var(--color-brand-dark) 100%);
  --color-brand-gradient-hover: linear-gradient(135deg, var(--color-brand-lighter) 0%, var(--color-brand-hover) 52%, var(--color-brand-darker) 100%);
  --shadow-brand:            0 8px 24px rgba(215, 64, 69, 0.25);
  --color-brand-rgb:         215, 64, 69;

  /* Legacy aliases (CTAs, accents) */
  --color-red-cta:     var(--color-brand);
  --color-red-hover:   var(--color-brand-hover);
  --color-red-text:    var(--color-brand-darker);
  --color-red-alt:     var(--color-brand);
  --color-red-badge:   var(--color-brand);
  --color-red-icon:    var(--color-brand-light);

  /* Primary UI accents (formerly green) */
  --color-green-hero:        var(--color-brand-dark);
  --color-green-hero-dark:   var(--color-brand-darker);
  --color-green-hero-light:  var(--color-brand);
  --color-green-check:       var(--color-brand-light);
  --color-green-success:     var(--color-brand-lighter);
  --color-green-muted:       var(--color-brand-muted);
  --color-green-border:      var(--color-brand-border);
  --color-green-gradient:    var(--color-brand-gradient);
  --shadow-green:            var(--shadow-brand);
  --color-countdown-from: #252525;
  --color-countdown-to: #0f0f0f;
  --color-countdown-accent: rgba(215, 64, 69, 0.45);

  /* Typography — single family sitewide */
  --font-primary: 'Alexandria', sans-serif;

  /* Font sizes */
  --fs-hero-h2:        clamp(22px, 3.5vw, 32px);
  --fs-hero-h3:        clamp(16px, 2.2vw, 20px);
  --fs-section-h3:     clamp(20px, 2.8vw, 28px);
  --fs-gift-title:     clamp(18px, 2.4vw, 24px);
  --fs-gift-body:      clamp(16px, 2vw, 19px);
  --fs-testimonial-name:  20px;
  --fs-testimonial-title: 14px;
  --fs-testimonial-quote: 15px;
  --fs-cta-desktop:    18px;
  --fs-cta-mobile:     15px;
  --fs-hero-btn:       18px;
  --fs-icon-box:       17px;
  --fs-body:           16px;
  --fs-countdown-digit: clamp(38px, 8.5vw, 52px);
  --fs-countdown-label: 13px;
  --fs-countdown-separator: clamp(28px, 6vw, 38px);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;

  --section-padding-v: clamp(72px, 9vw, 104px);
  --section-block-gap: var(--space-6);
  --section-content-gap: var(--space-7);
  --hero-padding-top: 0;
  --hero-padding-bottom: clamp(48px, 6vw, 72px);
  --container-max: 920px;
  --container-padding-x: clamp(16px, 4vw, 24px);
  --content-readable: var(--container-max);
  --content-medium: var(--container-max);
  --constrained-682: var(--container-max);
  --constrained-648: var(--container-max);
  --prose-line-height: 1.8;

  /* Shell */
  --header-height: 64px;
  --float-cta-height: 88px;

  /* Surfaces */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --border-subtle: rgba(17, 17, 17, 0.08);
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06);
  --shadow-md: 0 8px 24px rgba(17, 17, 17, 0.08);

  /* Buttons */
  --btn-radius: var(--radius-md);
  --btn-cta-pad-v: 18px;
  --btn-cta-pad-h: 28px;
  --btn-cta-pad-mob: 16px;
  --btn-hero-pad-v: 14px;
  --btn-hero-pad-h: 28px;

  /* Countdown */
  --countdown-radius: var(--radius-md);
  --countdown-box-size: clamp(76px, 18vw, 108px);
}