/* ==========================================================================
   Variables CSS centralisées - Thème Opquast V2
   Ce fichier doit être chargé en premier pour que les variables soient disponibles partout
   ========================================================================== */

:root {
    /* ==========================================================================
       COULEURS OPQUAST
       ========================================================================== */

    /* Couleurs principales */
    --opq-navy: #112f42;
    --opq-navy-dark: #1a4258;
    --opq-navy-light: #254356;
    --opq-navy-medium: #2f4554;
    --opq-navy-panel: #385264;
    --opq-turquoise: #1C9B9C;
    --opq-turquoise-hover: #206f78;
    --opq-turquoise-dark: #157878;
    --opq-turquoise-darker: #0F5F5F;
    --opq-turquoise-bright: #5DD3D3;
    --opq-turquoise-light: #E8F5F5;
    --opq-turquoise-pale: #F0FAFA;
    --opq-turquoise-lighter: #d7ecec;
    --opq-yellow: #E9AC30;
    --opq-yellow-hover: #d89e28;
    --opq-yellow-dark: #e8af5f;
    --opq-yellow-light: #FEF6E6;
    --opq-red: #D25148;
    --opq-red-dark: #c63a31;
    --opq-red-light: #faedec;
    --opq-green: #7DB952;
    --opq-green-light: #d8eacb;
    --opq-green-medium: #afd495;

    /* Gris et neutres */
    --opq-slate-dark: #1e293b;
    --opq-gray-dark: #4a6072;
    --opq-gray-medium: #5C636E;
    --opq-gray: #6B7280;
    --opq-gray-muted: #9CA3AF;
    --opq-gray-soft: #999999;
    --opq-gray-light: #F5F5F5;
    --opq-gray-pale: #f9f9f9;
    --opq-gray-lighter: #F8FAFC;
    --opq-gray-100: #ececec;
    --opq-gray-200: #e6e6e6;
    --opq-border: #E1E1E1;
    --opq-border-light: #D1D5DB;

    /* Texte */
    --opq-black: #000000;
    --opq-text-dark: #112f42;
    --opq-text-body: #374151;
    --opq-text-slate: #334155;
    --opq-text-light: #4B5563;
    --opq-text-muted: #4a6072;
    --opq-text-white: #FFFFFF;

    /* Backgrounds */
    --opq-bg-light: #F0F4F8;
    --opq-bg-white: #FFFFFF;

    /* ==========================================================================
       ESPACEMENTS
       ========================================================================== */

    --opq-spacing-xs: 8px;
    --opq-spacing-sm: 16px;
    --opq-spacing-md: 24px;
    --opq-spacing-lg: 32px;
    --opq-spacing-xl: 48px;
    --opq-spacing-2xl: 60px;

    /* ==========================================================================
       LAYOUT
       ========================================================================== */

    --site-max-width: 1200px;
    --opq-border-radius: 8px;
    --opq-border-radius-lg: 12px;
    --opq-border-radius-xl: 16px;
    --opq-border-radius-full: 50px;

    /* ==========================================================================
       TYPOGRAPHIE
       ========================================================================== */

    --opq-font-family: Geograph, sans-serif;
    --opq-font-size-xs: 0.75rem;
    --opq-font-size-sm: 0.85rem;
    --opq-font-size-base: 1rem;
    --opq-font-size-lg: 1.1rem;
    --opq-font-size-xl: 1.25rem;
    --opq-font-size-2xl: 1.5rem;
    --opq-font-size-3xl: 2rem;

    /* ==========================================================================
       ANIMATIONS
       ========================================================================== */

    --opq-transition-fast: 0.15s ease;
    --opq-transition-base: 0.2s ease;
    --opq-transition-slow: 0.3s ease;

    /* ==========================================================================
       TOKENS SÉMANTIQUES (pour dark mode)
       Ces tokens pointent vers les couleurs de base et seront redéfinis en dark mode
       ========================================================================== */

    /* Surfaces */
    --opq-surface-primary: var(--opq-bg-white);
    --opq-surface-secondary: var(--opq-gray-light);
    --opq-surface-elevated: var(--opq-bg-white);
    --opq-surface-inverse: var(--opq-navy);

    /* Texte */
    --opq-text-primary: var(--opq-text-dark);
    --opq-text-secondary: var(--opq-text-muted);
    --opq-text-inverse: var(--opq-text-white);

    /* Bordures */
    --opq-border-default: var(--opq-border);
    --opq-border-subtle: var(--opq-border-light);

    /* Focus */
    --opq-focus-ring: var(--opq-navy);
}

/* ==========================================================================
   BREAKPOINTS RESPONSIVE
   Note: Les breakpoints ne peuvent pas être utilisés comme variables CSS dans
   les media queries. Cette section sert de référence documentaire.

   Breakpoints utilisés dans le thème:
   - Mobile:     max-width: 480px
   - Tablet:     max-width: 768px
   - Desktop:    max-width: 1024px
   - Large:      min-width: 1200px
   ========================================================================== */

/* ==========================================================================
   DARK MODE
   Détection automatique via prefers-color-scheme + override manuel via data-theme
   ========================================================================== */

/* Dark mode automatique (préférence système) - s'applique sauf si light forcé */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Couleurs principales inversées */
        --opq-navy: #E8F5F5;
        --opq-navy-dark: #d7ecec;
        --opq-navy-light: #c5e3e3;
        --opq-navy-medium: #b3d9d9;
        --opq-navy-panel: #1e3a4c;
        --opq-turquoise: #2CBDBD;
        --opq-turquoise-hover: #3fd1d1;
        --opq-turquoise-dark: #25a5a5;
        --opq-turquoise-bright: #5DD3D3;
        --opq-turquoise-light: #1a3d3d;
        --opq-turquoise-pale: #152e2e;
        --opq-yellow: #F5C14D;
        --opq-yellow-hover: #f7cb66;
        --opq-yellow-light: #3d3525;
        --opq-red: #E57373;
        --opq-red-light: #3d2525;
        --opq-green: #8FD460;
        --opq-green-light: #2a3d25;

        /* Gris inversés */
        --opq-slate-dark: #e2e8f0;
        --opq-gray-dark: #c5d1dc;
        --opq-gray-medium: #a3b1c1;
        --opq-gray: #8a9aad;
        --opq-gray-muted: #6b7a8a;
        --opq-gray-soft: #7a8a9a;
        --opq-gray-light: #1a2332;
        --opq-gray-pale: #151c28;
        --opq-gray-lighter: #121820;
        --opq-gray-100: #252f3d;
        --opq-gray-200: #2a3544;
        --opq-border: #3a4555;
        --opq-border-light: #4a5568;

        /* Texte inversé */
        --opq-black: #FFFFFF;
        --opq-text-dark: #F3F4F6;
        --opq-text-body: #E5E7EB;
        --opq-text-slate: #D1D5DB;
        --opq-text-light: #C4CAD4;
        --opq-text-muted: #A0AEC0;
        --opq-text-white: #111827;

        /* Backgrounds inversés */
        --opq-bg-light: #1a2332;
        --opq-bg-white: #111827;

        /* Tokens sémantiques dark */
        --opq-surface-primary: #111827;
        --opq-surface-secondary: #1a2332;
        --opq-surface-elevated: #1f2937;
        --opq-surface-inverse: #F3F4F6;
        --opq-text-primary: #F3F4F6;
        --opq-text-secondary: #A0AEC0;
        --opq-text-inverse: #111827;
        --opq-border-default: #3a4555;
        --opq-border-subtle: #4a5568;
        --opq-focus-ring: #2CBDBD;
    }
}

/* Dark mode manuel (override utilisateur) */
:root[data-theme="dark"] {
    /* Couleurs principales inversées */
    --opq-navy: #E8F5F5;
    --opq-navy-dark: #d7ecec;
    --opq-navy-light: #c5e3e3;
    --opq-navy-medium: #b3d9d9;
    --opq-navy-panel: #1e3a4c;
    --opq-turquoise: #2CBDBD;
    --opq-turquoise-hover: #3fd1d1;
    --opq-turquoise-dark: #25a5a5;
    --opq-turquoise-bright: #5DD3D3;
    --opq-turquoise-light: #1a3d3d;
    --opq-turquoise-pale: #152e2e;
    --opq-yellow: #F5C14D;
    --opq-yellow-hover: #f7cb66;
    --opq-yellow-light: #3d3525;
    --opq-red: #E57373;
    --opq-red-light: #3d2525;
    --opq-green: #8FD460;
    --opq-green-light: #2a3d25;

    /* Gris inversés */
    --opq-slate-dark: #e2e8f0;
    --opq-gray-dark: #c5d1dc;
    --opq-gray-medium: #a3b1c1;
    --opq-gray: #8a9aad;
    --opq-gray-muted: #6b7a8a;
    --opq-gray-soft: #7a8a9a;
    --opq-gray-light: #1a2332;
    --opq-gray-pale: #151c28;
    --opq-gray-lighter: #121820;
    --opq-gray-100: #252f3d;
    --opq-gray-200: #2a3544;
    --opq-border: #3a4555;
    --opq-border-light: #4a5568;

    /* Texte inversé */
    --opq-black: #FFFFFF;
    --opq-text-dark: #F3F4F6;
    --opq-text-body: #E5E7EB;
    --opq-text-slate: #D1D5DB;
    --opq-text-light: #C4CAD4;
    --opq-text-muted: #A0AEC0;
    --opq-text-white: #111827;

    /* Backgrounds inversés */
    --opq-bg-light: #1a2332;
    --opq-bg-white: #111827;

    /* Tokens sémantiques dark */
    --opq-surface-primary: #111827;
    --opq-surface-secondary: #1a2332;
    --opq-surface-elevated: #1f2937;
    --opq-surface-inverse: #F3F4F6;
    --opq-text-primary: #F3F4F6;
    --opq-text-secondary: #A0AEC0;
    --opq-text-inverse: #111827;
    --opq-border-default: #3a4555;
    --opq-border-subtle: #4a5568;
    --opq-focus-ring: #2CBDBD;
}