/* 
 * Variables CSS - Système de couleurs rose/blanc moderne 2025
 * Portfolio tech professionnel optimisé pour lisibilité académique
 * Conforme aux standards WCAG 2.1 niveau AAA
 */

:root {
    /* ========== PALETTE ROSE/BLANC MODERNE 2025 ========== */
    
    /* Couleurs principales - Rose académique */
    --primary-color: #be185d; /* Rose professionnel */
    --primary-hover: #9f1239; /* Rose foncé hover */
    --primary-light: #e11d48; /* Rose vif pour accents */
    --secondary-color: #831843; /* Rose bordeaux élégant */
    --secondary-hover: #7c2d12; /* Marron rosé pour profondeur */
    --accent-color: #f97316; /* Orange rosé complémentaire */
    --accent-hover: #ea580c; /* Orange profond */

    /* Couleurs de texte - Lisibilité maximale pour contenu académique */
    --text-primary: #1a1a1a; /* Noir doux pour lecture prolongée */
    --text-secondary: #374151; /* Gris foncé professionnel */
    --text-tertiary: #6b7280; /* Gris moyen pour métadonnées */
    --text-light: #9ca3af; /* Gris clair pour annotations */
    --text-white: #ffffff;
    --text-inverse: #f9fafb; /* Blanc cassé sur fonds foncés */
    --text-rose: var(--primary-color); /* Rose pour les éléments importants */

    /* Couleurs de fond - Base blanche avec nuances roses */
    --bg-primary: #ffffff; /* Blanc pur base */
    --bg-secondary: #fefefe; /* Blanc légèrement cassé */
    --bg-tertiary: #fdf2f8; /* Rose très pâle */
    --bg-card: #ffffff; /* Cartes sur fond blanc */
    --bg-rose-subtle: #fdf2f8; /* Rose subtil pour zones spéciales */
    --bg-rose-light: #fce7f3; /* Rose clair pour highlights */
    --bg-overlay: rgba(190, 24, 93, 0.1); /* Overlay rose transparent */
    --bg-modal: rgba(26, 26, 26, 0.85); /* Modal sombre */

    /* Couleurs de bordure - Élégance minimaliste */
    --border-color: #f3f4f6; /* Bordures subtiles */
    --border-hover: #e5e7eb; /* Bordures hover */
    --border-focus: var(--primary-color); /* Focus rose */
    --border-rose: #fce7f3; /* Bordures rosées */
    --border-accent: var(--accent-color); /* Bordures accent */

    /* États d'interaction - Harmonisés avec la palette rose */
    --success-color: #059669; /* Vert conservé pour cohérence */
    --success-bg: #f0fdf4;
    --error-color: #dc2626; /* Rouge conservé pour urgence */
    --error-bg: #fef2f2;
    --warning-color: #d97706; /* Orange harmonisé */
    --warning-bg: #fffbeb;
    --info-color: var(--primary-color); /* Rose pour infos */
    --info-bg: var(--bg-rose-light);

    /* Ombres roses élégantes */
    --shadow-xs: 0 1px 2px 0 rgb(190 24 93 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(190 24 93 / 0.08);
    --shadow-md: 0 4px 6px -1px rgb(190 24 93 / 0.08), 0 2px 4px -2px rgb(190 24 93 / 0.05);
    --shadow-lg: 0 10px 15px -3px rgb(190 24 93 / 0.08), 0 4px 6px -4px rgb(190 24 93 / 0.03);
    --shadow-xl: 0 20px 25px -5px rgb(190 24 93 / 0.08), 0 8px 10px -6px rgb(190 24 93 / 0.03);
    --shadow-2xl: 0 25px 50px -12px rgb(190 24 93 / 0.15);
    --shadow-rose: 0 4px 14px 0 rgb(190 24 93 / 0.15); /* Ombre spéciale rose */

    /* Dégradés modernes roses */
    --gradient-primary: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --gradient-accent: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    --gradient-subtle: linear-gradient(135deg, var(--bg-primary), var(--bg-tertiary));
    --gradient-rose: linear-gradient(135deg, var(--bg-rose-light), var(--bg-rose-subtle));

    /* ========== TYPOGRAPHIE ACADÉMIQUE OPTIMISÉE ========== */
    
    /* Polices pour lisibilité maximale */
    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-serif: 'Crimson Text', Georgia, 'Times New Roman', serif; /* Pour citations */
    --font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, 'Liberation Mono', Menlo, monospace;    /* Échelle typographique optimisée pour la lecture */
    --text-xs: 0.75rem;     /* 12px - Annotations */
    --text-sm: 0.875rem;    /* 14px - Métadonnées */
    --text-base: 1rem;      /* 16px - Corps de texte principal */
    --text-lg: 1.125rem;    /* 18px - Texte important */
    --text-xl: 1.25rem;     /* 20px - Sous-titres */
    --text-2xl: 1.5rem;     /* 24px - Titres sections */
    --text-3xl: 1.875rem;   /* 30px - Titres principaux */
    --text-4xl: 2.25rem;    /* 36px - Titre hero */
    --text-5xl: 3rem;       /* 48px - Display */

    /* Hauteurs de ligne pour lisibilité académique */
    --leading-tight: 1.25;   /* Titres */
    --leading-normal: 1.5;   /* Corps standard */
    --leading-relaxed: 1.625; /* Texte long */
    --leading-loose: 2;      /* Espacé pour annotations */

    /* Graisses de police */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* ========== ESPACEMENT MODERNE ========== */
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.5rem;   /* 8px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */
    --spacing-2xl: 3rem;    /* 48px */
    --spacing-3xl: 4rem;    /* 64px */
    --spacing-4xl: 6rem;    /* 96px */

    /* ========== RAYONS DE BORDURE ========== */
    --radius-xs: 0.125rem;  /* 2px */
    --radius-sm: 0.25rem;   /* 4px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-2xl: 1.25rem;  /* 20px */
    --radius-3xl: 1.5rem;   /* 24px */
    --radius-full: 9999px;

    /* ========== TRANSITIONS FLUIDES ========== */
    --transition-fast: 150ms ease-out;
    --transition-normal: 250ms ease-out;
    --transition-slow: 350ms ease-out;
    --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ========== LAYOUT ========== */
    --container-max-width: 1200px;
    --container-padding: 2rem;
    --section-padding: 4rem 0;
    --header-height: 70px;

    /* ========== Z-INDEX ========== */
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-tooltip: 1070;
    --z-top: 9999;

    /* ========== BREAKPOINTS (pour JS) ========== */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* ========== THÈME SOMBRE (OPTIONNEL) ========== */
[data-theme="dark"] {
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-tertiary: #d1d5db;
    --text-light: #9ca3af;
    --text-inverse: #1a1a1a;
    
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --bg-card: #1f2937;
    --bg-rose-subtle: #2d1b29;
    --bg-rose-light: #3f1e35;
    --bg-overlay: rgba(190, 24, 93, 0.2);
    --bg-modal: rgba(0, 0, 0, 0.9);
    
    --border-color: #374151;
    --border-hover: #4b5563;
    --border-rose: #4c1d95;
}

/* ========== MOTION RÉDUITE (ACCESSIBILITÉ) ========== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-normal: 0ms;
        --transition-slow: 0ms;
        --transition-spring: 0ms;
        --transition-bounce: 0ms;
    }
}

/* ========== ÉCRANS HAUTE DENSITÉ ========== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    :root {
        --shadow-sm: 0 0.5px 1.5px 0 rgb(190 24 93 / 0.08);
        --shadow-md: 0 2px 3px -0.5px rgb(190 24 93 / 0.08), 0 1px 2px -1px rgb(190 24 93 / 0.05);
    }
}