/**
 * GRAVITY DESIGN TOKENS
 * Single source of truth for color, space, motion, and form.
 */
:root {
  /* Gravity Brand Palette */
  --brand-navy: #0A0F1C;          /* Deep space background */
  --brand-navy-light: #151E32;    /* Slightly elevated container */
  --brand-orange: #FF5A1F;        /* Striking interaction color */
  --brand-orange-hover: #E04810;  /* Active interaction state */
  
  /* Backgrounds & Surfaces */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F8F9FA;
  --bg-tertiary: #F1F5F9;
  
  /* Text Colors */
  --text-primary: #0A0F1C;
  --text-secondary: #475569;
  --text-inverse: #FFFFFF;
  --text-inverse-muted: rgba(255, 255, 255, 0.8);
  
  /* Borders */
  --border-light: #EAECEF;
  --border-dark: rgba(255, 255, 255, 0.1);

  /* Physics & Gravity Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Shadows (Floating Minimalist Physics) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-card: 0 10px 30px -5px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 20px 40px -10px rgba(0, 0, 0, 0.12);
  --shadow-faq: 0 4px 16px rgba(10, 15, 28, 0.04);
  --shadow-faq-active: 0 8px 24px rgba(10, 15, 28, 0.08);
  --shadow-glow: 0 8px 24px -8px rgba(255, 90, 31, 0.4);
  
  /* Geometry */
  --radius-sm: 6px;
  --radius-btn: 8px;
  --radius-card: 16px;
  --radius-section: 24px;
  
  /* Motion & Micro-interactions */
  --transition-snappy: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-card: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-btn: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    font-family: var(--font-sans) !important;
    background-color: var(--bg-primary) !important;
    color: var(--text-secondary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans) !important;
    color: var(--brand-navy);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Global button and card over-rides to instantly enforce uniformity */
.button, .btn, .btn-pri, button {
    transition: var(--transition-btn) !important;
    border-radius: var(--radius-btn) !important;
}
.button:hover, .btn:hover, .btn-pri:hover, button.btn-pri:hover, .cta-nav:hover, .cta-btn:hover {
    background-color: var(--brand-orange-hover) !important;
    color: var(--text-inverse) !important;
}

/* Base Hyperlink and Interaction Overrides */
a {
    color: inherit;
    transition: color 0.2s ease-in-out;
}
a:hover {
    color: var(--brand-orange) !important;
}

/* Specific component overrides to maintain circular pill layouts */
.hero-dot-item, .hero-dot-list {
    border-radius: 9999px !important;
}

.card, .benefit-card, .faq-item, .service-card {
    transition: var(--transition-card) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-card) !important;
}

.card:hover, .benefit-card:hover, .service-card:hover {
    box-shadow: var(--shadow-card-hover) !important;
    transform: translateY(-4px);
}

/* High Contrast Typography Overrides for Dark Sections */
.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6,
.page-hero h1, .page-hero h2, .page-hero h3, .page-hero h4, .page-hero h5, .page-hero h6,
.cta-box h1, .cta-box h2, .cta-box h3, .cta-box h4, .cta-box h5, .cta-box h6,
.footer h1, .footer h2, .footer h3, .footer h4 {
    color: var(--text-inverse) !important;
}

.hero p, .page-hero p, .cta-box p {
    color: var(--text-inverse-muted) !important;
}

/* Isolate white containers inside dark sections */
.hero-form-step .hero-step-title,
.hero-form-step label,
form label {
    color: var(--brand-navy) !important;
}

.hero-content span:not(.hl):not(.hero-slider-progress-fill) {
    color: var(--text-inverse-muted);
}

/* Explicit Active Buttons */
.hero-dot-item span { color: var(--text-inverse-muted) !important; }
.hero-dot-item.active span { color: var(--text-inverse) !important; }