/* === CSS VARIABLES === */
/* Colors */
:root {
    /* Font Family (single font across app) */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    
    /* Primary Colors */
    --color-primary: #1a5674;
    --color-primary-dark: #004085;
    
    /* Secondary Colors */
    --color-secondary: #6c757d;
    --color-secondary-light: #bdc3c7;
    
    /* Accent Colors */
    --color-accent-orange: #ff8c00;
    --color-accent-orange-hover: #e07b00;
    --color-accent-red: #dc3545;
    --color-accent-red-hover: #c82333;
    --color-accent-green: #28a745;
    
    /* Google Colors */
    --color-google: #dc3545;
    --color-google-hover: #c0392b;
    
    /* Text Colors */
    --color-text-primary: #333;
    --color-text-secondary: #555;
    --color-text-tertiary: #666;
    --color-text-light: #777;
    --color-text-muted: #999;
    --color-text-white: #fff;
    
    /* Background Colors */
    --color-bg-primary: #fff;
    --color-bg-secondary: #f8f8f8;
    --color-bg-tertiary: #f4f4f4;
    --color-bg-lighter: #fafafa;
    --color-bg-blue: #0062ff;
    
    /* Border Colors */
    --color-border-lighter: #f0f0f0;
    --color-border-light: #e0e0e0;
    --color-border-dark: #ddd;
    --color-border-input: #ccc;
    
    /* Status Colors */
    --color-success: #28a745;
    --color-error: #dc3545;
    --color-error-bg: #f8d7da;
    --color-error-border: #f5c6cb;
    --color-error-text: #721c24;
    
    --color-warning-border: #ffeeba;
    
    --color-info: #d1ecf1;
    --color-info-swal-darker: #0062ff;
    
    /* Typography Colors */
    --color-h1: #333;
    --color-h2: #101828;
    --color-h3: #101828;
        
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-4xl: 30px;
    --spacing-5xl: 32px;
    --spacing-6xl: 40px;
    --spacing-7xl: 48px;
    --spacing-8xl: 56px;

    /* Layout */
    --container-max-width: 1180px;
    --container-padding-x: var(--spacing-xl);
    
    /* Border Radius */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 5px;
    --radius-xl: 6px;
    --radius-2xl: 8px;
    --radius-full: 25px;
    
    /* Font Sizes */
    --font-size-xs: 0.85rem;
    --font-size-sm: 0.9rem;
    --font-size-base: 0.95rem;
    --font-size-md: 1rem;
    --font-size-mlg: 1.1rem;
    --font-size-lg: 1.2rem;
    --font-size-2xl: 1.8rem;
    --font-size-4xl: 2.8rem;
    --font-size-h1: clamp(2.25rem, 6vw, 4.65rem);
    --font-size-h2: clamp(1.65rem, 4vw, 2.55rem);
    --font-size-h3: 1.05rem;
    
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-semibold: 500;
    --font-weight-bold: 600;
    --font-weight-xbold: 700;
    --font-weight-xxbold: 800;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.1);
    
    /* Transitions */
    --transition-fast: 0.1s ease;
    --transition-base: 0.2s ease;

    /* Landing / marketing */
    --landing-font: var(--font-family-base);
    --landing-bg: #ffffff;
    --landing-bg-soft: #f7faff;
    --landing-bg-muted: #f4f7fb;
    --landing-surface: rgba(255, 255, 255, 0.92);
    --landing-surface-solid: #ffffff;
    --landing-surface-soft: rgba(247, 250, 255, 0.82);
    --landing-text: #101828;
    --landing-text-soft: #344054;
    --landing-text-muted: #667085;
    --landing-border: rgba(16, 24, 40, 0.11);
    --landing-border-strong: rgba(26, 86, 116, 0.22);
    --landing-primary: var(--color-bg-blue);
    --landing-primary-hover: #004dd1;
    --landing-primary-soft: #eaf2ff;
    --landing-brand: var(--color-primary);
    --landing-brand-dark: var(--color-primary-dark);
    --landing-accent: var(--color-accent-orange);
    --landing-accent-soft: #fff4e4;
    --landing-shadow-sm: 0 8px 24px rgba(16, 24, 40, 0.06);
    --landing-shadow-md: 0 18px 48px rgba(16, 24, 40, 0.1);
    --landing-shadow-lg: 0 30px 80px rgba(16, 24, 40, 0.14);
    --landing-radius-sm: 12px;
    --landing-radius-md: 18px;
    --landing-radius-lg: 28px;
    --landing-radius-xl: 36px;
    --landing-container: 1180px;
    --landing-space-section: clamp(4.5rem, 9vw, 8rem);
    --landing-space-tight: clamp(2.75rem, 6vw, 4.5rem);

    /* Content pages (Home, Voice Cloning, Pricing, FAQ, Product Guide, Privacy, Terms, About Us) */
    --content-space-hero-top: clamp(5.5rem, 9vw, 7.75rem);
    --content-space-section: clamp(5rem, 7.5vw, 6.25rem);
    --content-space-stack: clamp(2.75rem, 4vw, 3.25rem);
    --content-page-end: clamp(6.75rem, 9vw, 8rem);

    /* App shell */
    --app-bg: var(--landing-bg-soft);
    --app-surface: var(--landing-surface-solid);
    --app-surface-soft: rgba(247, 250, 255, 0.78);
    --app-border: var(--landing-border);
    --app-border-strong: var(--landing-border-strong);
    --app-text: var(--landing-text);
    --app-text-soft: var(--landing-text-soft);
    --app-text-muted: var(--landing-text-muted);
    --app-primary: var(--landing-primary);
    --app-brand: var(--landing-brand);
    --app-accent: var(--landing-accent);
    --app-radius-sm: var(--landing-radius-sm);
    --app-radius-md: var(--landing-radius-md);
    --app-radius-lg: var(--landing-radius-lg);
    --app-radius-xl: var(--landing-radius-xl);
    --app-shadow-sm: var(--landing-shadow-sm);
    --app-shadow-md: var(--landing-shadow-md);
    --app-shadow-focus: 0 0 0 4px rgba(0, 98, 255, 0.13);

    /* Page accents */
    --not-found-accent: #ff8c00;
    --not-found-accent-dark: #c56a00;
    --result-success: #12b76a;
    --result-success-dark: #067647;
    --result-warning: #f79009;
    --result-warning-dark: #b54708;
}