/* Import des polices Google */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800&display=swap');

/* Variables CSS pour le système Homy - Aligné avec Tailwind Config */
:root {
    /* ===========================================
       COULEURS - Identiques à Tailwind
       =========================================== */
    --homy-primary: #2C192D;
    --homy-black: #000000;
    --homy-dark: #011F28;
    --homy-white: #FFFFFF;
    --homy-blue: #3CB4E8;
    --homy-purple: #A17DB3;
    --homy-green: #D6E5BA;
    --homy-gray: #F5F5F5;
    --homy-teal: #245F71;
    --homy-orange: #F5A56F;
    --homy-red: #DC2626;

    /* ===========================================
       FONTS - Identiques à Tailwind
       =========================================== */
    --homy-font-raleway: 'Raleway', sans-serif;
    --homy-font-amifer: 'Amifer', sans-serif;
    --homy-font-kabel: 'Neue Kabel', sans-serif;

    /* Font par défaut */
    --homy-font-primary: var(--homy-font-raleway);
    --homy-font-title: var(--homy-font-kabel);

    /* ===========================================
       FONT SIZES - Identiques à Tailwind
       =========================================== */
    /* Custom sizes avec line-height */
    --homy-font-h1-mobile: 25px;
    --homy-line-h1-mobile: 31px;
    --homy-weight-h1: 600;

    --homy-font-h1-desktop: 50px;
    --homy-line-h1-desktop: 56px;

    --homy-font-h2: 18px;
    --homy-line-h2: 24px;
    --homy-weight-h2: 600;

    --homy-font-h3: 16px;
    --homy-line-h3: 22px;
    --homy-weight-h3: 600;

    --homy-font-body: 16px;
    --homy-line-body: 22px;
    --homy-weight-body: 400;

    --homy-font-mini: 14px;
    --homy-line-mini: 20px;
    --homy-weight-mini: 400;

    --homy-font-subtitle: 18px;
    --homy-line-subtitle: 24px;
    --homy-weight-subtitle: 600;

    /* ===========================================
       TAILLES SUPPLÉMENTAIRES POUR FORMS
       =========================================== */
    /* Titre login (un peu plus petit que register) */
    --homy-font-title-login: var(--homy-font-h2);        /* 18px */
    --homy-line-title-login: var(--homy-line-h2);        /* 24px */

    /* Titre register (H1 complet) */
    --homy-font-title-register: var(--homy-font-h1-mobile);   /* 25px mobile */
    --homy-line-title-register: var(--homy-line-h1-mobile);   /* 31px mobile */
    --homy-font-title-register-desktop: var(--homy-font-h1-desktop); /* 50px desktop */
    --homy-line-title-register-desktop: var(--homy-line-h1-desktop); /* 56px desktop */

    /* Sous-titre formulaires */
    --homy-font-form-subtitle: var(--homy-font-mini);        /* 14px */
    --homy-line-form-subtitle: var(--homy-line-mini);        /* 20px */

    /* ===========================================
       SPACING - Standard Tailwind
       =========================================== */
    --homy-spacing-0: 0;
    --homy-spacing-px: 1px;
    --homy-spacing-0_5: 0.125rem;  /* 2px */
    --homy-spacing-1: 0.25rem;     /* 4px */
    --homy-spacing-1_5: 0.375rem;  /* 6px */
    --homy-spacing-2: 0.5rem;      /* 8px */
    --homy-spacing-2_5: 0.625rem;  /* 10px */
    --homy-spacing-3: 0.75rem;     /* 12px */
    --homy-spacing-3_5: 0.875rem;  /* 14px */
    --homy-spacing-4: 1rem;        /* 16px */
    --homy-spacing-5: 1.25rem;     /* 20px */
    --homy-spacing-6: 1.5rem;      /* 24px */
    --homy-spacing-7: 1.75rem;     /* 28px */
    --homy-spacing-8: 2rem;        /* 32px */
    --homy-spacing-9: 2.25rem;     /* 36px */
    --homy-spacing-10: 2.5rem;     /* 40px */
    --homy-spacing-11: 2.75rem;    /* 44px */
    --homy-spacing-12: 3rem;       /* 48px */
    --homy-spacing-14: 3.5rem;     /* 56px */
    --homy-spacing-16: 4rem;       /* 64px */
    --homy-spacing-20: 5rem;       /* 80px */
    --homy-spacing-24: 6rem;       /* 96px */
    --homy-spacing-28: 7rem;       /* 112px */
    --homy-spacing-32: 8rem;       /* 128px */

    /* ===========================================
       SPACING ALIAS - Pour faciliter l'utilisation
       =========================================== */
    --homy-spacing-xs: var(--homy-spacing-1);   /* 4px */
    --homy-spacing-sm: var(--homy-spacing-2);   /* 8px */
    --homy-spacing-md: var(--homy-spacing-4);   /* 16px */
    --homy-spacing-lg: var(--homy-spacing-6);   /* 24px */
    --homy-spacing-xl: var(--homy-spacing-8);   /* 32px */
    --homy-spacing-2xl: var(--homy-spacing-12); /* 48px */

    /* ===========================================
       BORDER RADIUS - Standard Tailwind
       =========================================== */
    --homy-radius-none: 0;
    --homy-radius-sm: 0.125rem;    /* 2px */
    --homy-radius: 0.25rem;        /* 4px */
    --homy-radius-md: 0.375rem;    /* 6px */
    --homy-radius-lg: 0.5rem;      /* 8px */
    --homy-radius-xl: 0.75rem;     /* 12px */
    --homy-radius-2xl: 1rem;       /* 16px */
    --homy-radius-3xl: 1.5rem;     /* 24px */
    --homy-radius-full: 9999px;

    /* ===========================================
       VARIABLES SPÉCIFIQUES HOMY FORMS
       =========================================== */

    /* Utilisé par les formulaires */
    --homy-form-gap: var(--homy-spacing-6);        /* 24px */
    --homy-input-gap: var(--homy-spacing-2);       /* 8px */
    --homy-padding-input: var(--homy-spacing-4);   /* 16px */
    --homy-padding-button: var(--homy-spacing-4) var(--homy-spacing-12); /* 16px 48px */

    /* Bordures */
    --homy-border-width: 2px;
    --homy-border-color-default: var(--homy-purple);
    --homy-border-color-focus: var(--homy-black);
    --homy-border-color-error: var(--homy-red);

    /* Radius spécifiques */
    --homy-radius-input: var(--homy-radius-full);      /* 9999px - rounded-full */
    --homy-radius-button: var(--homy-radius-full);     /* 9999px - rounded-full */
    --homy-radius-checkbox: var(--homy-radius);        /* 4px - rounded */
    --homy-radius-message: var(--homy-radius-lg);      /* 8px - rounded-lg */
    --homy-radius-container: var(--homy-radius-2xl);   /* 16px - rounded-2xl */

    /* Hauteurs */
    --homy-height-input: 51px;
    --homy-height-button: 51px;
    --homy-height-checkbox: 20px;

    /* Transitions */
    --homy-transition-default: all 0.3s ease;

    /* Layout */
    --homy-form-max-width: 520px;
    --homy-form-padding: 32px;
    --homy-form-margin: 32px auto;

    /* ===========================================
       MESSAGES D'ERREUR - Design moderne
       =========================================== */
    --homy-error-bg: #FEF2F2;              /* Rouge très pâle */
    --homy-error-border: #FECACA;          /* Rouge pâle */
    --homy-error-text: #B91C1C;           /* Rouge foncé */
    --homy-error-icon: #DC2626;           /* Rouge standard */

    /* Messages de succès (si besoin) */
    --homy-success-bg: #F0FDF4;           /* Vert très pâle */
    --homy-success-border: #BBF7D0;       /* Vert pâle */
    --homy-success-text: #166534;         /* Vert foncé */

    /* ===========================================
       RESPONSIVE BREAKPOINTS - Standard Tailwind
       =========================================== */
    --homy-breakpoint-sm: 640px;
    --homy-breakpoint-md: 768px;
    --homy-breakpoint-lg: 1024px;
    --homy-breakpoint-xl: 1280px;
    --homy-breakpoint-2xl: 1536px;

    /* ===========================================
       UTILITAIRES POUR LES FORMULAIRES
       =========================================== */

    /* Messages de tailles Tailwind */
    --homy-font-size-label: var(--homy-font-mini);      /* 14px */
    --homy-font-size-input: var(--homy-font-body);      /* 16px */
    --homy-font-size-button: var(--homy-font-body);     /* 16px */
    --homy-font-size-link: var(--homy-font-mini);       /* 14px */
    --homy-font-size-message: var(--homy-font-mini);    /* 14px */

    /* Poids de fonts - Alignés sur Tailwind */
    --homy-font-weight-title: var(--homy-weight-h1);      /* 600 */
    --homy-font-weight-subtitle: var(--homy-weight-body); /* 400 */
    --homy-font-weight-label: 500;                        /* 500 - medium */
    --homy-font-weight-input: var(--homy-weight-body);    /* 400 */
    --homy-font-weight-button: var(--homy-weight-h2);     /* 600 */
    --homy-font-weight-link: var(--homy-weight-body);     /* 400 */
}

/* ===========================================
   CLASSES UTILITAIRES - Style Tailwind
   =========================================== */

/* Typography helpers */
.homy-h1-mobile {
    font-size: var(--homy-font-h1-mobile);
    line-height: var(--homy-line-h1-mobile);
    font-weight: var(--homy-weight-h1);
}

.homy-h1-desktop {
    font-size: var(--homy-font-h1-desktop);
    line-height: var(--homy-line-h1-desktop);
    font-weight: var(--homy-weight-h1);
}

.homy-h2 {
    font-size: var(--homy-font-h2);
    line-height: var(--homy-line-h2);
    font-weight: var(--homy-weight-h2);
}

.homy-h3 {
    font-size: var(--homy-font-h3);
    line-height: var(--homy-line-h3);
    font-weight: var(--homy-weight-h3);
}

.homy-body {
    font-size: var(--homy-font-body);
    line-height: var(--homy-line-body);
    font-weight: var(--homy-weight-body);
}

.homy-mini {
    font-size: var(--homy-font-mini);
    line-height: var(--homy-line-mini);
    font-weight: var(--homy-weight-mini);
}

.homy-subtitle {
    font-size: var(--homy-font-subtitle);
    line-height: var(--homy-line-subtitle);
    font-weight: var(--homy-weight-subtitle);
}

/* Color helpers */
.homy-text-primary { color: var(--homy-primary); }
.homy-text-black { color: var(--homy-black); }
.homy-text-white { color: var(--homy-white); }
.homy-text-blue { color: var(--homy-blue); }
.homy-text-purple { color: var(--homy-purple); }
.homy-text-green { color: var(--homy-green); }
.homy-text-gray { color: var(--homy-gray); }
.homy-text-teal { color: var(--homy-teal); }
.homy-text-orange { color: var(--homy-orange); }
.homy-text-red { color: var(--homy-red); }

.homy-bg-primary { background-color: var(--homy-primary); }
.homy-bg-black { background-color: var(--homy-black); }
.homy-bg-white { background-color: var(--homy-white); }
.homy-bg-blue { background-color: var(--homy-blue); }
.homy-bg-purple { background-color: var(--homy-purple); }
.homy-bg-green { background-color: var(--homy-green); }
.homy-bg-gray { background-color: var(--homy-gray); }
.homy-bg-teal { background-color: var(--homy-teal); }
.homy-bg-orange { background-color: var(--homy-orange); }
.homy-bg-red { background-color: var(--homy-red); }