:root {
  /* === Colors === */
  /* Brand - Amber */
  --color-amber: #D4923A;
  --color-amber-light: #E8B97A;
  --color-amber-dark: #B07328;

  /* Brand - Teal */
  --color-teal: #5B9EA6;
  --color-teal-light: #A3CDD3;
  --color-teal-dark: #3D7A82;

  /* Semantic */
  --color-success: #7BA886;
  --color-success-light: #B5D4BC;
  --color-success-dark: #5A8A65;
  --color-error-main: #C9544A;
  --color-warning-main: #C97A1E;
  --color-info-main: #7A9DBF;
  --color-white: #FFFFFF;
  --color-phone-frame: #1A1F25;
  --color-phone-screen: #F3F1EE;

  /* RGB triplets for rgba() usage */
  --color-teal-rgb: 91, 158, 166;
  --color-amber-rgb: 212, 146, 58;
  --color-bg-rgb: 247, 245, 242;
  --color-black-rgb: 0, 0, 0;
  --color-white-rgb: 255, 255, 255;

  /* Neutrals - Light */
  --color-bg: #F7F5F2;
  --color-bg-alt: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-text: #1A1F25;
  --color-text-secondary: #6B7280;
  --color-text-tertiary: #9CA3AF;
  --color-border: #E5E7EB;
  --color-border-strong: #D1D5DB;

  /* Links */
  --color-link: #3D7A82;
  --color-link-hover: #5B9EA6;

  /* CTA */
  --color-cta-primary-bg: #D4923A;
  --color-cta-primary-text: #FFFFFF;
  --color-cta-primary-hover: #C07F30;
  --color-cta-secondary-border: #5B9EA6;
  --color-cta-secondary-text: #3D7A82;
  --color-cta-secondary-hover-bg: #5B9EA6;
  --color-cta-secondary-hover-text: #FFFFFF;

  /* Footer */
  --color-footer-bg: #1F2937;
  --color-footer-text: #E5E7EB;
  --color-footer-link: #A3CDD3;
  --color-footer-link-hover: #FFFFFF;
  --color-footer-border: #374151;

  /* Step badge */
  --color-step-badge-bg: #5B9EA6;
  --color-step-badge-text: #FFFFFF;

  /* Feature icon */
  --color-icon: #5B9EA6;

  /* Pricing */
  --color-pricing-highlight: #D4923A;
  --color-pricing-check: #7BA886;

  /* === Spacing === */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 120px;

  /* === Typography === */
  --font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-size-h1: 56px;
  --font-weight-h1: 300;
  --line-height-h1: 1.14;
  --letter-spacing-h1: -0.5px;

  --font-size-h2: 44px;
  --font-weight-h2: 300;
  --line-height-h2: 1.18;
  --letter-spacing-h2: -0.25px;

  --font-size-h3: 36px;
  --font-weight-h3: 400;
  --line-height-h3: 1.22;
  --letter-spacing-h3: 0px;

  --font-size-h4: 28px;
  --font-weight-h4: 500;
  --line-height-h4: 1.29;
  --letter-spacing-h4: 0px;

  --font-size-body: 18px;
  --font-weight-body: 400;
  --line-height-body: 1.556;
  --letter-spacing-body: 0.25px;

  --font-size-body-sm: 14px;
  --line-height-body-sm: 1.43;

  --font-size-cta: 16px;
  --font-weight-cta: 700;
  --line-height-cta: 1.5;
  --letter-spacing-cta: 0.1px;

  --font-size-nav: 16px;
  --font-weight-nav: 500;
  --line-height-nav: 1.5;

  --font-size-label-sm: 12px;
  --font-weight-label-sm: 500;
  --line-height-label-sm: 1.33;
  --letter-spacing-label-sm: 0.5px;

  /* === Layout === */
  --max-width: 1200px;
  --max-width-text: 768px;
  --max-width-line: 600px;

  --gutter-mobile: 24px;
  --gutter-tablet: 32px;
  --gutter-desktop: 40px;

  --page-padding-mobile: 20px;
  --page-padding-tablet: 40px;
  --page-padding-desktop: 80px;

  /* === Borders === */
  --border-radius: 8px;
  --border-radius-sm: 4px;

  /* === Shadows === */
  --shadow-header: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
  --shadow-featured: 0 8px 30px rgba(212, 146, 58, 0.15);
  --shadow-button-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-focus-ring: 0 0 0 3px rgba(91, 158, 166, 0.15);
  --shadow-mockup: 0 25px 60px rgba(0, 0, 0, 0.18), 0 8px 20px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --color-overlay: rgba(0, 0, 0, 0.4);
  --color-header-scrolled-bg: rgba(247, 245, 242, 0.97);

  /* === Transitions === */
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-reveal: 400ms;

  /* === Header === */
  --header-height: 64px;

  /* === Z-index === */
  --z-header: 100;
  --z-mobile-nav: 200;
  --z-overlay: 150;
}

/* Mobile typography overrides */
@media (max-width: 767px) {
  :root {
    --font-size-h1: 36px;
    --font-size-h2: 32px;
    --font-size-h3: 28px;
    --font-size-h4: 24px;
  }
}

/* Tablet typography overrides */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --font-size-h1: 44px;
    --font-size-h2: 36px;
    --font-size-h3: 32px;
    --font-size-h4: 26px;
  }
}