/**
 * FLYWHEEL THEME VARIABLES - 2025
 * ================================
 * Variables CSS partagées pour les 3 thèmes FLYWHEEL
 *
 * Thèmes:
 * - Premium: Dark / Glassmorphism / Gold
 * - Trust: Light / Corporate / Navy
 * - Energy: Dynamic / Orange / Animated
 *
 * Convention: --{theme}-{property}
 * Exemple: --premium-bg, --trust-accent, --energy-cta
 *
 * @see CLAUDE.md Section 3.9 pour documentation complète
 */

:root {
    /* ═══════════════════════════════════════════════════════════════
       PREMIUM THEME - Dark / Glassmorphism / Gold (#FFD700)
       Usage: Pages premium, upsell, offres haut de gamme
       ═══════════════════════════════════════════════════════════════ */

    /* Backgrounds */
    --premium-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    --premium-bg-solid: #1a1a2e;
    --premium-bg-card: rgba(255, 255, 255, 0.03);
    --premium-bg-card-hover: rgba(255, 255, 255, 0.08);
    --premium-glass: rgba(255, 255, 255, 0.05);
    --premium-glass-border: rgba(255, 255, 255, 0.1);

    /* Colors */
    --premium-accent: #FFD700;
    --premium-accent-light: #FFE55C;
    --premium-accent-dark: #B8860B;
    --premium-text: #ffffff;
    --premium-text-muted: rgba(255, 255, 255, 0.7);
    --premium-text-subtle: rgba(255, 255, 255, 0.5);

    /* Borders & Shadows */
    --premium-border: rgba(255, 215, 0, 0.2);
    --premium-border-subtle: rgba(255, 255, 255, 0.1);
    --premium-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --premium-shadow-glow: 0 0 30px rgba(255, 215, 0, 0.15);

    /* CTA */
    --premium-cta-bg: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    --premium-cta-text: #1a1a2e;
    --premium-cta-hover: linear-gradient(135deg, #FFE55C 0%, #FFB733 100%);

    /* Badges */
    --premium-badge-bg: rgba(255, 215, 0, 0.15);
    --premium-badge-text: #FFD700;
    --premium-badge-border: rgba(255, 215, 0, 0.3);

    /* ═══════════════════════════════════════════════════════════════
       TRUST THEME - Light / Corporate / Navy (#1e3a5f)
       Usage: Pages institutionnelles, confiance, B2B corporate
       ═══════════════════════════════════════════════════════════════ */

    /* Backgrounds */
    --trust-bg: #ffffff;
    --trust-bg-alt: #f8fafc;
    --trust-bg-card: #ffffff;
    --trust-bg-card-hover: #f1f5f9;
    --trust-section-alt: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);

    /* Colors */
    --trust-accent: #1e3a5f;
    --trust-accent-light: #2d5a8a;
    --trust-accent-dark: #0f1d30;
    --trust-text: #1f2937;
    --trust-text-muted: #6b7280;
    --trust-text-subtle: #9ca3af;

    /* Borders & Shadows */
    --trust-border: #e5e7eb;
    --trust-border-accent: rgba(30, 58, 95, 0.2);
    --trust-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --trust-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* CTA */
    --trust-cta-bg: #1e3a5f;
    --trust-cta-text: #ffffff;
    --trust-cta-hover: #2d5a8a;
    --trust-cta-secondary-bg: transparent;
    --trust-cta-secondary-border: #1e3a5f;
    --trust-cta-secondary-text: #1e3a5f;

    /* Badges */
    --trust-badge-bg: rgba(30, 58, 95, 0.1);
    --trust-badge-text: #1e3a5f;
    --trust-badge-border: rgba(30, 58, 95, 0.2);

    /* ═══════════════════════════════════════════════════════════════
       ENERGY THEME - Dynamic / Orange (#FF6B35) / Animated
       Usage: Pages action, promo, conversion urgente
       ═══════════════════════════════════════════════════════════════ */

    /* Backgrounds */
    --energy-bg: linear-gradient(135deg, #fff5f0 0%, #ffffff 100%);
    --energy-bg-solid: #fff5f0;
    --energy-bg-card: #ffffff;
    --energy-bg-card-hover: #fff0e6;
    --energy-section-accent: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);

    /* Colors */
    --energy-accent: #FF6B35;
    --energy-accent-light: #FF8C5A;
    --energy-accent-dark: #E55A2B;
    --energy-pulse: #ff8c5a;
    --energy-text: #1f2937;
    --energy-text-muted: #4b5563;
    --energy-text-on-accent: #ffffff;

    /* Borders & Shadows */
    --energy-border: #fed7c7;
    --energy-border-accent: rgba(255, 107, 53, 0.3);
    --energy-shadow: 0 4px 14px rgba(255, 107, 53, 0.15);
    --energy-shadow-lg: 0 10px 25px rgba(255, 107, 53, 0.2);
    --energy-glow: 0 0 20px rgba(255, 107, 53, 0.3);

    /* CTA */
    --energy-cta-bg: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);
    --energy-cta-text: #ffffff;
    --energy-cta-hover: linear-gradient(135deg, #E55A2B 0%, #FF6B35 100%);
    --energy-cta-shadow: 0 4px 14px rgba(255, 107, 53, 0.4);

    /* Badges */
    --energy-badge-bg: rgba(255, 107, 53, 0.1);
    --energy-badge-text: #FF6B35;
    --energy-badge-border: rgba(255, 107, 53, 0.3);
    --energy-badge-urgent: #dc2626;

    /* ═══════════════════════════════════════════════════════════════
       SHARED VARIABLES - Communs aux 3 thèmes
       ═══════════════════════════════════════════════════════════════ */

    /* Spacing (Bootstrap 5 compatible) */
    --flywheel-spacing-xs: 0.5rem;   /* 8px */
    --flywheel-spacing-sm: 1rem;     /* 16px */
    --flywheel-spacing-md: 1.5rem;   /* 24px */
    --flywheel-spacing-lg: 2rem;     /* 32px */
    --flywheel-spacing-xl: 3rem;     /* 48px */
    --flywheel-spacing-xxl: 4rem;    /* 64px */

    /* Border Radius */
    --flywheel-radius-sm: 0.375rem;  /* 6px */
    --flywheel-radius-md: 0.5rem;    /* 8px */
    --flywheel-radius-lg: 0.75rem;   /* 12px */
    --flywheel-radius-xl: 1rem;      /* 16px */
    --flywheel-radius-full: 9999px;

    /* Typography */
    --flywheel-font-size-xs: 0.75rem;   /* 12px */
    --flywheel-font-size-sm: 0.875rem;  /* 14px */
    --flywheel-font-size-base: 1rem;    /* 16px */
    --flywheel-font-size-lg: 1.125rem;  /* 18px */
    --flywheel-font-size-xl: 1.25rem;   /* 20px */
    --flywheel-font-size-2xl: 1.5rem;   /* 24px */
    --flywheel-font-size-3xl: 1.875rem; /* 30px */
    --flywheel-font-size-4xl: 2.25rem;  /* 36px */
--flywheel-font-size-5xl: 2.5rem;   /* 40px */    --flywheel-font-size-6xl: 3rem;     /* 48px */    --flywheel-font-size-7xl: 3.5rem;   /* 56px */    /* Font weights SXO 2026 */    --flywheel-font-weight-normal: 400;    --flywheel-font-weight-medium: 500;    --flywheel-font-weight-semibold: 600;    --flywheel-font-weight-bold: 700;    --flywheel-font-weight-extrabold: 800;    /* Line heights SXO 2026 */    --flywheel-line-height-tight: 1.1;    --flywheel-line-height-heading: 1.2;    --flywheel-line-height-snug: 1.3;    --flywheel-line-height-normal: 1.6;

    /* Transitions */
    --flywheel-transition-fast: 150ms ease;
    --flywheel-transition-base: 300ms ease;
    --flywheel-transition-slow: 500ms ease;

    /* Z-index layers */
    --flywheel-z-base: 1;
    --flywheel-z-dropdown: 100;
    --flywheel-z-sticky: 200;
    --flywheel-z-modal: 300;
    --flywheel-z-tooltip: 400;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS PARTAGÉES
   ═══════════════════════════════════════════════════════════════ */

/* Pulse animation for Energy theme */
@keyframes flywheel-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* Glow animation for Premium theme */
@keyframes flywheel-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.2); }
    50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.4); }
}

/* Fade in animation */
@keyframes flywheel-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Slide in from left */
@keyframes flywheel-slide-in-left {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Slide in from right */
@keyframes flywheel-slide-in-right {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}