/*
 * VefaConnect — Design Tokens (2026)
 *
 * Système de tokens partagé. À utiliser en priorité pour tout nouveau composant.
 * Cohabite avec les sets historiques (--about-*, --forum-*, --faq-*, --glo-*, --article-*) :
 * pas de breaking change, juste un set commun à adopter progressivement.
 *
 * Convention : --vefa-{category}-{name}-{modifier?}
 */

:root {
    /* ====== Couleurs — marque ====== */
    --vefa-primary: #3498db;
    --vefa-primary-dark: #2980b9;
    --vefa-primary-darker: #1f6396;
    --vefa-primary-soft: rgba(52, 152, 219, 0.08);
    --vefa-primary-soft-strong: rgba(52, 152, 219, 0.16);

    --vefa-accent: #ff4000;
    --vefa-accent-dark: #d93600;
    --vefa-accent-soft: rgba(255, 64, 0, 0.08);

    /* ====== Couleurs — sémantiques ====== */
    --vefa-success: #16a34a;
    --vefa-success-soft: rgba(22, 163, 74, 0.1);
    --vefa-warning: #f59e0b;
    --vefa-warning-soft: rgba(245, 158, 11, 0.1);
    --vefa-danger: #dc2626;
    --vefa-danger-soft: rgba(220, 38, 38, 0.1);
    --vefa-info: var(--vefa-primary);

    /* ====== Texte ====== */
    --vefa-text: #0f172a;
    --vefa-text-strong: #020617;
    --vefa-text-muted: #475569;
    --vefa-text-subtle: #94a3b8;
    --vefa-text-on-dark: #ffffff;
    --vefa-text-on-primary: #ffffff;

    /* ====== Surfaces & fonds ====== */
    --vefa-bg: #ffffff;
    --vefa-bg-soft: #f8fafc;
    --vefa-bg-muted: #f1f5f9;
    --vefa-surface: #ffffff;
    --vefa-surface-elevated: #ffffff;
    --vefa-surface-glass: rgba(255, 255, 255, 0.72);
    --vefa-surface-glass-strong: rgba(255, 255, 255, 0.92);
    --vefa-overlay: rgba(15, 23, 42, 0.5);

    /* ====== Bordures ====== */
    --vefa-border: #e2e8f0;
    --vefa-border-strong: #cbd5e1;
    --vefa-border-subtle: #f1f5f9;
    --vefa-ring-focus: 0 0 0 3px rgba(52, 152, 219, 0.35);

    /* ====== Gradients ====== */
    --vefa-gradient-hero: linear-gradient(135deg, #eff6ff 0%, #ffffff 55%, #fff7ed 100%);
    --vefa-gradient-cta: linear-gradient(135deg, var(--vefa-primary) 0%, var(--vefa-primary-dark) 100%);
    --vefa-gradient-accent: linear-gradient(135deg, var(--vefa-accent) 0%, #ff7a45 100%);
    --vefa-gradient-promoter: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --vefa-gradient-text: linear-gradient(135deg, var(--vefa-primary) 0%, var(--vefa-accent) 100%);

    /* ====== Spacing (échelle 4px) ====== */
    --vefa-space-1: 4px;
    --vefa-space-2: 8px;
    --vefa-space-3: 12px;
    --vefa-space-4: 16px;
    --vefa-space-5: 24px;
    --vefa-space-6: 32px;
    --vefa-space-7: 48px;
    --vefa-space-8: 64px;
    --vefa-space-9: 96px;
    --vefa-space-10: 128px;

    /* ====== Radius ====== */
    --vefa-radius-sm: 6px;
    --vefa-radius-md: 10px;
    --vefa-radius-lg: 16px;
    --vefa-radius-xl: 24px;
    --vefa-radius-2xl: 32px;
    --vefa-radius-pill: 999px;

    /* ====== Ombres ====== */
    --vefa-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --vefa-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --vefa-shadow-lg: 0 10px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
    --vefa-shadow-xl: 0 20px 35px -10px rgba(15, 23, 42, 0.15), 0 10px 20px -8px rgba(15, 23, 42, 0.08);
    --vefa-shadow-glow: 0 10px 40px -10px rgba(52, 152, 219, 0.4);

    /* ====== Type scale (fluide via clamp pour limiter les overrides mobile) ====== */
    --vefa-fs-xs: 0.75rem;
    --vefa-fs-sm: 0.875rem;
    --vefa-fs-base: 1rem;
    --vefa-fs-lg: 1.125rem;
    --vefa-fs-xl: clamp(1.25rem, 0.5vw + 1.15rem, 1.375rem);
    --vefa-fs-2xl: clamp(1.5rem, 1vw + 1.3rem, 1.75rem);
    --vefa-fs-3xl: clamp(1.875rem, 2vw + 1.4rem, 2.25rem);
    --vefa-fs-4xl: clamp(2.25rem, 3vw + 1.5rem, 3rem);
    --vefa-fs-5xl: clamp(2.75rem, 4vw + 1.5rem, 3.75rem);

    --vefa-fw-normal: 400;
    --vefa-fw-medium: 500;
    --vefa-fw-semibold: 600;
    --vefa-fw-bold: 700;
    --vefa-fw-extrabold: 800;

    --vefa-lh-tight: 1.15;
    --vefa-lh-snug: 1.3;
    --vefa-lh-normal: 1.55;
    --vefa-lh-relaxed: 1.7;

    --vefa-tracking-tight: -0.02em;
    --vefa-tracking-normal: 0;
    --vefa-tracking-wide: 0.05em;

    /* ====== Motion ====== */
    --vefa-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --vefa-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --vefa-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --vefa-duration-fast: 150ms;
    --vefa-duration-base: 250ms;
    --vefa-duration-slow: 400ms;

    /* ====== Z-index ====== */
    --vefa-z-base: 1;
    --vefa-z-dropdown: 10;
    --vefa-z-sticky: 50;
    --vefa-z-modal: 100;

    /* ====== Container ====== */
    --vefa-container-max: 1200px;
    --vefa-container-padding: var(--vefa-space-4);
}

/* Respect des préférences utilisateur — accessibility motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --vefa-duration-fast: 0.01ms;
        --vefa-duration-base: 0.01ms;
        --vefa-duration-slow: 0.01ms;
    }
}