/*
 * TawTaw Brand Guidelines - Landing Page Styles
 * Version 1.0
 * Conforme aux guidelines TawTaw
 */

:root {
    /* Couleurs Primaires TawTaw */
    --tawtaw-orange: #FF6600;
    --tawtaw-blue: #0D67B7;
    
    /* Couleurs Secondaires */
    --tawtaw-blue-dark: #004A87;
    --tawtaw-orange-medium: #FF8533;
    --tawtaw-blue-light: #E8F2FF;
    --tawtaw-orange-light: #FFF3E6;
    
    /* Couleurs Sémantiques */
    --tawtaw-success: #4CAF50;
    --tawtaw-error: #E74C3C;
    --tawtaw-warning: #F39C12;
    --tawtaw-info: #2196F3;
    
    /* Couleurs Neutres */
    --tawtaw-white: #FFFFFF;
    --tawtaw-gray-very-light: #F5F5F5;
    --tawtaw-gray-light: #E0E0E0;
    --tawtaw-gray-medium: #CCCCCC;
    --tawtaw-gray-dark: #666666;
    --tawtaw-text-dark: #333333;
    
    /* Gradients TawTaw */
    --tawtaw-gradient-orange: linear-gradient(135deg, #FF6600 0%, #FF8533 100%);
    --tawtaw-gradient-blue: linear-gradient(135deg, #0D67B7 0%, #004A87 100%);
    --tawtaw-gradient-light: linear-gradient(135deg, #E8F2FF 0%, #FFF3E6 100%);
    
    /* Ombres */
    --tawtaw-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tawtaw-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --tawtaw-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --tawtaw-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    
    /* Espacements (Grille 8px) */
    --tawtaw-space-xs: 8px;
    --tawtaw-space-sm: 16px;
    --tawtaw-space-md: 24px;
    --tawtaw-space-lg: 32px;
    --tawtaw-space-xl: 40px;
    
    /* Border Radius */
    --tawtaw-radius-xs: 4px;
    --tawtaw-radius-sm: 8px;
    --tawtaw-radius-md: 12px;
    --tawtaw-radius-lg: 16px;
    --tawtaw-radius-round: 50%;
    
    /* Typographie - Tailles */
    --tawtaw-font-h1: 32px;
    --tawtaw-font-h2: 24px;
    --tawtaw-font-h3: 18px;
    --tawtaw-font-body: 16px;
    --tawtaw-font-body-small: 14px;
    --tawtaw-font-caption: 12px;
    --tawtaw-font-button: 14px;
    
    /* Typographie - Poids */
    --tawtaw-weight-bold: 700;
    --tawtaw-weight-semibold: 600;
    --tawtaw-weight-regular: 400;
    
    /* Typographie - Line Height */
    --tawtaw-line-h1: 1.2;
    --tawtaw-line-h2: 1.3;
    --tawtaw-line-h3: 1.4;
    --tawtaw-line-body: 1.6;
    --tawtaw-line-body-small: 1.5;
    --tawtaw-line-caption: 1.4;
    --tawtaw-line-button: 1.4;
}

/* Typographie - Police principale */
body {
    font-family: 'Inter', 'Segoe UI', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Override des couleurs primaires pour compatibilité */
:root {
    --primary: var(--tawtaw-orange);
    --primary-dark: var(--tawtaw-blue-dark);
    --secondary: var(--tawtaw-blue);
    --success: var(--tawtaw-success);
    --warning: var(--tawtaw-warning);
    --error: var(--tawtaw-error);
    --info: var(--tawtaw-info);
    --dark: var(--tawtaw-text-dark);
    --light: var(--tawtaw-gray-very-light);
    --gradient-1: var(--tawtaw-gradient-orange);
    --gradient-2: var(--tawtaw-gradient-blue);
}

/* Classes utilitaires TawTaw */
.tawtaw-bg-orange {
    background-color: var(--tawtaw-orange) !important;
}

.tawtaw-bg-blue {
    background-color: var(--tawtaw-blue) !important;
}

.tawtaw-text-orange {
    color: var(--tawtaw-orange) !important;
}

.tawtaw-text-blue {
    color: var(--tawtaw-blue) !important;
}

.tawtaw-btn-primary {
    background: var(--tawtaw-gradient-orange);
    color: var(--tawtaw-white);
    border: none;
    border-radius: var(--tawtaw-radius-sm);
    padding: var(--tawtaw-space-sm) var(--tawtaw-space-lg);
    font-weight: var(--tawtaw-weight-semibold);
    font-size: var(--tawtaw-font-button);
    transition: all 0.3s ease;
}

.tawtaw-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--tawtaw-shadow-lg);
    color: var(--tawtaw-white);
}

.tawtaw-btn-secondary {
    background: var(--tawtaw-gradient-blue);
    color: var(--tawtaw-white);
    border: none;
    border-radius: var(--tawtaw-radius-sm);
    padding: var(--tawtaw-space-sm) var(--tawtaw-space-lg);
    font-weight: var(--tawtaw-weight-semibold);
    font-size: var(--tawtaw-font-button);
    transition: all 0.3s ease;
}

.tawtaw-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: var(--tawtaw-shadow-lg);
    color: var(--tawtaw-white);
}

/* Hiérarchie Typographique */
h1 {
    font-size: var(--tawtaw-font-h1);
    font-weight: var(--tawtaw-weight-bold);
    line-height: var(--tawtaw-line-h1);
    color: var(--tawtaw-text-dark);
}

h2 {
    font-size: var(--tawtaw-font-h2);
    font-weight: var(--tawtaw-weight-semibold);
    line-height: var(--tawtaw-line-h2);
    color: var(--tawtaw-text-dark);
}

h3 {
    font-size: var(--tawtaw-font-h3);
    font-weight: var(--tawtaw-weight-semibold);
    line-height: var(--tawtaw-line-h3);
    color: var(--tawtaw-text-dark);
}

p {
    font-size: var(--tawtaw-font-body);
    font-weight: var(--tawtaw-weight-regular);
    line-height: var(--tawtaw-line-body);
    color: var(--tawtaw-gray-dark);
}

/* Responsive Typography */
@media (max-width: 768px) {
    :root {
        --tawtaw-font-h1: 28px;
        --tawtaw-font-h2: 22px;
        --tawtaw-font-h3: 16px;
    }
}