/* Global Variables */
:root {
    /* Color Palette */
    --white: #ffffff;
    --black: #000000;
    --deep-black: #0a0a0f;
    --blue-dark: #00263e;
    --blue: #005fa3;
    --blue-hover: #00457a;
    --blue-light: #eaf3ff;
    --blue-accent: #9fcdff;

    --gray-light: #f4f6f8;
    --gray-medium: #d0dce5;
    --gray-dark: #1c1c1e;

    --red: #e3342f;
    --red-light: #f8d7da;
    --red-dark: #a71d2a;

    --green: #38a169;
    --green-light: #d4edda;
    --green-dark: #1e5f3d;

    --yellow: #f6c23e;
    --yellow-light: #fff3cd;
    --yellow-dark: #b38b1b;

    --orange: #f97316;
    --orange-light: #ffe5d1;
    --orange-dark: #c2410c;

    --purple: #6f42c1;
    --purple-light: #e5d0f7;
    --purple-dark: #4b2980;

    --cyan: #17a2b8;
    --cyan-electrical: #00c3ff;
    --cyan-light: #d1f1f7;
    --cyan-dark: #0c5965;

    --pink: #e83e8c;
    --pink-fuchsia: #ff00d4;
    --pink-light: #fcd8e8;
    --pink-dark: #b0215c;

    --indigo: #6610f2;
    --indigo-light: #d6ccf9;
    --indigo-dark: #3c0e9a;

    --teal: #20c997;
    --teal-light: #d2f4ec;
    --teal-dark: #107860;

    --lime: #84cc16;
    --lime-light: #e9f6d4;
    --lime-dark: #558a10;

    --amber: #f59e0b;
    --amber-light: #fdf3cf;
    --amber-dark: #b37007;

    --violet: #8b5cf6;
    --violet-electrical: #6e00ff;
    --violet-light: #e2d8fb;
    --violet-dark: #5b34ad;

    --rose: #f43f5e;
    --rose-light: #fcd7de;
    --rose-dark: #9f1e32;

    --sky: #38bdf8;
    --sky-light: #d4efff;
    --sky-dark: #0d74b0;

    --neon-green: #39ff14;
    --neon-blue: #00ffff;
    --neon-pink: #ff4ff8;
    --neon-yellow: #faff00;
    --electric-purple: #bf00ff;

    --success: #28a745;
    --error: #dc3545;
    --warning: #ffc107;
    --info: #17a2b8;

    --card-background: #e0e7ef;
    --card-gradient: linear-gradient(135deg, #dce3ed, #b9c4d4);

    /* Typography */
    --font-primary: 'Neue Metana', 'Cormorant Garamond', 'EB Garamond', serif; /* Élégance, autorité, luxe */
    --font-secondary: 'Inter', 'Segoe UI', 'Roboto', sans-serif;               /* Lisibilité UI moderne */
    --font-display: 'Unbounded', serif;    /* Pour les titres visuels forts */
    --font-ui: 'Space Grotesk', 'DM Sans', 'Poppins', sans-serif;              /* Interface design web/app */
    --font-code: 'Fira Code', 'JetBrains Mono', monospace;                     /* Code propre & clair */
    --font-size-base: 16px;
    --font-size-xs: 0.618rem;      /* extra-small */
    --font-size-sm: 0.9rem;        /* small */
    --font-size-md: 1rem;          /* medium (base) */
    --font-size-lg: 1.618rem;      /* large */
    --font-size-xl: 2.618rem;      /* extra-large */
    --font-size-xxl: 4.236rem;     /* extra-extra-large */
    --font-size-display: 6.854rem; /* display headline */
    
    /* Responsive Typography using clamp */
    --font-fluid-xs: clamp(0.6rem, 0.9vw, 0.75rem);
    --font-fluid-sm: clamp(0.8rem, 1vw, 0.95rem);
    --font-fluid-md: clamp(1rem, 1.25vw, 1.125rem);
    --font-fluid-lg: clamp(1.25rem, 1.5vw, 1.618rem);
    --font-fluid-xl: clamp(2rem, 2.5vw, 2.618rem);
    --font-fluid-xxl: clamp(3rem, 4vw, 4.236rem);
    --font-fluid-display: clamp(4rem, 6vw, 6.854rem);

    /* Layout & Effects */
    --shadow-card: 0 0 20px rgba(0, 0, 0, 0.05);
    --shadow-dropdown: 0 8px 16px rgba(0, 0, 0, 0.1);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
}