/**
 * ==============================================================================
 * OMEGA VISION - DESIGN SYSTEM : VARIABLES & DESIGN TOKENS OFFICIELS
 * ==============================================================================
 * Fichier définissant l'ensemble des constantes graphiques calibrées sur la
 * charte officielle d'Omega Vision (Ouagadougou) :
 * - Couleur signature officielle : Terracotta / Acajou chaud #6A2E11
 * - Palette Light Minimaliste à fort contraste (#0A0A0E / #FFFFFF / Nuances pierre)
 * - Typographies contemporaines (Plus Jakarta Sans + Inter + Space Grotesk)
 * ==============================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap');

:root {
    /* --------------------------------------------------------------------------
     * 1. PALETTE DE COULEURS OFFICIELLE
     * -------------------------------------------------------------------------- */
    /* Couleurs de fond principales */
    --bg-body: #ffffff;
    --bg-surface: #f9f8f6;
    --bg-surface-alt: #f2efe9;
    --bg-surface-elevated: #ffffff;
    --bg-dark: #0a0a0e;
    --bg-dark-surface: #141419;

    /* Typographie & Niveaux de gris textuels à fort contraste */
    --text-main: #0a0a0f;
    --text-muted: #555562;
    --text-light: #8e8e9f;
    --text-inverse: #ffffff;
    --text-inverse-muted: #c4c4d0;

    /* Couleur Signature Officielle du Logo Omega Vision (Terracotta / Acajou noble) */
    --color-accent: #6A2E11;
    --color-accent-hover: #52220b;
    --color-accent-light: #f7ede8;
    --color-accent-dark: #3a1707;
    --color-accent-glow: rgba(106, 46, 17, 0.25);

    /* Couleurs de bordure */
    --border-subtle: #e7e4dc;
    --border-medium: #cfcbc0;
    --border-dark: #0a0a0e;
    --border-dark-subtle: #23232b;

    /* --------------------------------------------------------------------------
     * 2. TYPOGRAPHIE
     * -------------------------------------------------------------------------- */
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Space Grotesk', monospace;

    /* Échelle de tailles de polices fluide */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-md: 1.125rem;   /* 18px */
    --font-size-lg: 1.25rem;    /* 20px */
    --font-size-xl: 1.5rem;     /* 24px */
    --font-size-2xl: 2rem;      /* 32px */
    --font-size-3xl: 2.5rem;    /* 40px */
    --font-size-4xl: 3.25rem;   /* 52px */
    --font-size-5xl: 4.25rem;   /* 68px */
    --font-size-hero: clamp(2.5rem, 6vw + 1rem, 5.5rem);

    /* Épaisseurs */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Hauteurs de ligne */
    --line-height-tight: 1.1;
    --line-height-heading: 1.2;
    --line-height-body: 1.6;

    /* --------------------------------------------------------------------------
     * 3. ESPACEMENTS & MISE EN PAGE
     * -------------------------------------------------------------------------- */
    --space-2xs: 0.25rem;  /* 4px */
    --space-xs: 0.5rem;    /* 8px */
    --space-sm: 0.75rem;   /* 12px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 4rem;     /* 64px */
    --space-4xl: 6rem;     /* 96px */
    --space-5xl: 8rem;     /* 128px */

    /* Conteneurs */
    --container-max-width: 1320px;
    --container-narrow-width: 960px;
    --container-padding: 1.5rem;

    /* --------------------------------------------------------------------------
     * 4. EFFETS & DIVERS
     * -------------------------------------------------------------------------- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    --shadow-subtle: 0 2px 8px rgba(10, 10, 15, 0.04);
    --shadow-card: 0 4px 20px rgba(10, 10, 15, 0.06);
    --shadow-elevated: 0 12px 36px rgba(10, 10, 15, 0.1);
    --shadow-floating: 0 20px 50px rgba(10, 10, 15, 0.15);

    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

    --z-header: 1000;
    --z-drawer: 1050;
    --z-modal: 1100;
}