/**
 * H2J Design System - Variables CSS centralisées
 * Généré automatiquement le 2025-11-30 12:00:00
 * NE PAS MODIFIER MANUELLEMENT - Configurez via BO > H2J Tools > Design System
 * 
 * Utilisé par : Soon Gate, Form Gate, Age Gate, et tous les modules/thèmes H2J
 */

:root {
    /* ========================================
       COULEURS
       ======================================== */
    
    /* Couleurs principales */
    --h2j-primary: #C0577C;
    --h2j-secondary: #cfa0e9;
    --h2j-accent: #6366f1;
    
    /* États */
    --h2j-success: #28a745;
    --h2j-error: #dc3545;
    --h2j-warning: #ffc107;
    --h2j-info: #17a2b8;
    
    /* Texte */
    --h2j-text: #1f2937;
    --h2j-text-secondary: #6b7280;
    --h2j-text-light: #ffffff;
    
    /* Arrière-plans */
    --h2j-bg: #ffffff;
    --h2j-bg-secondary: #f3f4f6;
    --h2j-bg-dark: #1f2937;
    
    /* Interaction */
    --h2j-hover: #212121;
    --h2j-focus: #b388dd;
    --h2j-focus-ring: #b388dd33;
    
    /* ========================================
       BORDURES
       ======================================== */
    --h2j-border-color: #d1d5db;
    --h2j-border-width: 1.5px;
    --h2j-border: 1.5px solid #d1d5db;
    
    /* Border radius */
    --h2j-radius-sm: 6px;
    --h2j-radius: 10px;
    --h2j-radius-lg: 16px;
    --h2j-radius-full: 9999px;
    
    /* ========================================
       ESPACEMENTS
       ======================================== */
    --h2j-spacing-xs: 4px;
    --h2j-spacing-sm: 8px;
    --h2j-spacing: 16px;
    --h2j-spacing-lg: 24px;
    --h2j-spacing-xl: 32px;
    
    /* ========================================
       COMPOSANTS
       ======================================== */
    
    /* Inputs */
    --h2j-input-height: 48px;
    --h2j-input-bg: #ffffff;
    --h2j-input-border: #d1d5db;
    --h2j-input-focus-border: #6366f1;
    
    /* Boutons */
    --h2j-btn-height: 48px;
    --h2j-btn-padding-x: 24px;
    
    /* ========================================
       ANIMATIONS
       ======================================== */
    --h2j-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --h2j-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --h2j-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --h2j-easing: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ========================================
       OMBRES
       ======================================== */
    --h2j-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --h2j-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    --h2j-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
    
    /* ========================================
       TYPOGRAPHIE
       ======================================== */
    --h2j-font-family: inherit;
    --h2j-font-size-sm: 14px;
    --h2j-font-size: 16px;
    --h2j-font-size-lg: 18px;
    --h2j-font-size-xl: 24px;
    --h2j-line-height: 1.5;
    
    /* ========================================
       ALIASES COMPATIBILITÉ
       ======================================== */
    
    /* Legacy custom.css */
    --primary: var(--h2j-primary);
    --purple: var(--h2j-secondary);
    --lavande: var(--h2j-secondary);
    --dark: var(--h2j-hover);
    --radius-main: var(--h2j-radius);
    --transition-main: var(--h2j-transition);
    --border-style: var(--h2j-border);
    --input-height: var(--h2j-input-height);
    
    /* Flatpickr IDYLL theme */
    --idyll-lavande: var(--h2j-secondary);
    --idyll-lavande-light: color-mix(in srgb, var(--h2j-secondary) 30%, white);
    --idyll-lavande-dark: color-mix(in srgb, var(--h2j-secondary) 70%, black 30%);
}

/* ========================================
   CLASSES UTILITAIRES H2J
   ======================================== */

.h2j-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--h2j-btn-height);
    padding: 0 var(--h2j-btn-padding-x);
    border: none;
    border-radius: var(--h2j-radius);
    font-size: var(--h2j-font-size);
    font-weight: 600;
    cursor: pointer;
    transition: var(--h2j-transition);
}

.h2j-btn-primary {
    background: var(--h2j-primary);
    color: var(--h2j-text-light);
}

.h2j-btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.h2j-btn-secondary {
    background: var(--h2j-secondary);
    color: var(--h2j-text-light);
}

.h2j-input {
    width: 100%;
    height: var(--h2j-input-height);
    padding: 0 var(--h2j-spacing);
    background: var(--h2j-input-bg);
    border: var(--h2j-border-width) solid var(--h2j-input-border);
    border-radius: var(--h2j-radius);
    font-size: var(--h2j-font-size);
    transition: var(--h2j-transition);
}

.h2j-input:focus {
    outline: none;
    border-color: var(--h2j-input-focus-border);
    box-shadow: 0 0 0 3px var(--h2j-focus-ring);
}

.h2j-card {
    background: var(--h2j-bg);
    border-radius: var(--h2j-radius-lg);
    padding: var(--h2j-spacing-lg);
    box-shadow: var(--h2j-shadow);
}