/* ==========================================================================
   ZEGA TECHNOLOGIES — DESIGN TOKENS
   --------------------------------------------------------------------------
   Base commune du Design System (Phase 02). Toute valeur réutilisable
   (couleur, espacement, rayon, ombre, typo, transition...) doit être
   référencée depuis ce fichier — ne pas disperser de valeurs brutes dans
   les composants ou dans les pages.

   Palette de marque (--navy, --slate, --blue, --cyan, --white, --muted,
   --border, --glass) figée en Phase 01 : NE PAS LA MODIFIER ici.
   ========================================================================== */

:root {
    /* ---------- Couleurs de marque (Phase 01 — figées) ---------- */
    --navy:    #0A0F1E;
    --slate:   #1A2035;
    --blue:    #0066FF;
    --cyan:    #00D4FF;
    --white:   #F8FAFF;
    --muted:   #8892A4;
    --border:  rgba(0, 212, 255, 0.12);
    --glass:   rgba(26, 32, 53, 0.6);

    /* ---------- Couleurs sémantiques ---------- */
    --success:        #22D3A6;
    --success-bg:      rgba(34, 211, 166, 0.1);
    --success-border:  rgba(34, 211, 166, 0.35);

    --danger:          #FF5B6E;
    --danger-bg:       rgba(255, 91, 110, 0.1);
    --danger-border:   rgba(255, 91, 110, 0.35);

    --warning:         #FFB020;
    --warning-bg:      rgba(255, 176, 32, 0.1);
    --warning-border:  rgba(255, 176, 32, 0.35);

    --info:            var(--cyan);
    --info-bg:         rgba(0, 212, 255, 0.1);
    --info-border:     rgba(0, 212, 255, 0.3);

    /* ---------- Surfaces ---------- */
    --surface-base:      var(--navy);
    --surface-raised:    var(--slate);
    --surface-glass:     var(--glass);
    --surface-highlight: rgba(0, 102, 255, 0.08);
    --surface-accent:    linear-gradient(135deg, rgba(0,102,255,0.15), rgba(0,212,255,0.15));
    --overlay:           rgba(10, 15, 30, 0.85);
    --overlay-strong:    rgba(10, 15, 30, 0.95);

    /* ---------- Texte ---------- */
    --text-primary:   var(--white);
    --text-muted:     var(--muted);
    --text-on-accent: #FFFFFF;
    --text-link:      var(--cyan);

    /* ---------- Typographie : familles ---------- */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body:    'Inter', sans-serif;

    /* ---------- Typographie : échelle fluide ---------- */
    --text-display:  clamp(2.6rem, 6vw, 4.6rem);
    --text-h1:       clamp(2.2rem, 5vw, 3.4rem);
    --text-h2:       clamp(1.8rem, 3vw, 2.6rem);
    --text-h3:       clamp(1.3rem, 2.2vw, 1.7rem);
    --text-h4:       1.15rem;
    --text-h5:       1rem;
    --text-body-lg:  1.05rem;
    --text-body:     0.95rem;
    --text-body-sm:  0.875rem;
    --text-caption:  0.78rem;
    --text-eyebrow:  0.72rem;

    --leading-tight:   1.15;
    --leading-snug:    1.3;
    --leading-normal:  1.6;
    --leading-relaxed: 1.75;

    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.04em;
    --tracking-wider:  0.08em;
    --tracking-widest: 0.1em;

    /* ---------- Échelle d'espacement ---------- */
    --space-3xs: 4px;
    --space-2xs: 8px;
    --space-xs:  12px;
    --space-sm:  16px;
    --space-md:  24px;
    --space-lg:  32px;
    --space-xl:  48px;
    --space-2xl: 64px;
    --space-3xl: 80px;
    --space-4xl: 100px;
    --space-5xl: 140px;

    /* ---------- Rayons ---------- */
    --radius-sm:     8px;
    --radius-md:     12px;
    --radius-lg:     16px;
    --radius-xl:     20px;
    --radius-pill:   100px;
    --radius-circle: 50%;

    /* ---------- Ombres ---------- */
    --shadow-sm:         0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md:         0 8px 24px rgba(0, 0, 0, 0.28);
    --shadow-lg:         0 16px 48px rgba(0, 0, 0, 0.35);
    --shadow-glow-blue:  0 8px 24px rgba(0, 102, 255, 0.4);
    --shadow-glow-cyan:  0 8px 32px rgba(0, 212, 255, 0.25);

    /* ---------- Gradients ---------- */
    --gradient-brand:       linear-gradient(135deg, var(--blue), var(--cyan));
    --gradient-dark:        linear-gradient(135deg, #0A1A4E 0%, #0A2040 50%, #001833 100%);
    --gradient-text:        linear-gradient(90deg, var(--blue), var(--cyan));
    --gradient-radial-glow: radial-gradient(circle, rgba(0, 102, 255, 0.22) 0%, transparent 70%);

    /* ---------- Bordures ---------- */
    --border-width:        1px;
    --border-color:        var(--border);
    --border-color-strong: rgba(0, 212, 255, 0.35);

    /* ---------- Transitions ---------- */
    --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:        cubic-bezier(0, 0, 0.2, 1);
    --duration-fast:   0.15s;
    --duration-base:   0.25s;
    --duration-slow:   0.4s;
    --transition-fast: var(--duration-fast) var(--ease-standard);
    --transition-base: var(--duration-base) var(--ease-standard);
    --transition-slow: var(--duration-slow) var(--ease-standard);

    /* ---------- Z-index ---------- */
    --z-base:           1;
    --z-dropdown:       500;
    --z-nav:            1000;
    --z-popup-overlay:  2000;
    --z-popup:          2010;
    --z-tooltip:        3000;

    /* ---------- Layout ---------- */
    --container-max:  1140px;
    --container-wide: 1320px;
    --gutter:         40px;
    --gutter-mobile:  20px;

    /* ---------- Focus ---------- */
    --focus-ring: 0 0 0 3px rgba(0, 212, 255, 0.35);
}

/* --------------------------------------------------------------------------
   Breakpoints officiels (Phase 01) — documentés ici car CSS ne permet pas
   de variabiliser un @media. Utiliser LITTÉRALEMENT ces seuils partout :

     900px  → rupture tablette (nav desktop → nav mobile, grilles 2col → 1col)
     480px  → rupture mobile étroit (dernier ajustement typo/grille)

   Seuils desktop (1440/1280/1024) : pas de rupture dédiée, le fluide
   (clamp/grid auto-fit) suffit — testés visuellement en Phase 02 (section 30).
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    :root { --gutter: var(--gutter-mobile); }
}

/* Accessibilité : neutralise les durées d'animation si l'utilisateur le demande.
   Les composants doivent utiliser var(--duration-*) plutôt que des valeurs figées
   pour bénéficier automatiquement de cette règle. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0.01ms;
        --duration-base: 0.01ms;
        --duration-slow: 0.01ms;
    }
}