/*
 * hub-www — Design tokens
 * Source de vérité : orgs/hub-www/docs/design-language.md (semantic-hub).
 * Modifier ce fichier en PR uniquement après mise à jour du document.
 */

:root {
    /* ── Couleurs — base slate ──────────────────────────────── */
    --color-bg:              #020617;
    --color-surface:         #0F172A;
    --color-surface-elev:    #1E293B;
    --color-border:          #1E293B;
    --color-border-strong:   #334155;
    --color-text:            #F1F5F9;
    --color-text-muted:      #94A3B8;
    --color-text-subtle:     #64748B;

    /* ── Accent — Electric cyan ─────────────────────────────── */
    --color-accent:          #22D3EE;
    --color-accent-strong:   #06B6D4;
    --color-accent-muted:    rgba(34, 211, 238, 0.12);
    --color-accent-faint:    rgba(34, 211, 238, 0.04);

    /* ── Signal (sémantique status) ─────────────────────────── */
    --color-success:         #34D399;
    --color-warning:         #FBBF24;
    --color-error:           #F87171;

    /* ── Catégories projets (taxonomie hub-projects) ────────── */
    /* Une couleur par groupe racine ou sous-groupe. Teintes pastel
       pour ne pas hurler à côté des diagrammes vifs. Utilisées via
       .project-badge--<cat>. */
    --color-cat-pilotage:        #22D3EE;
    --color-cat-connaissance:    #A78BFA;
    --color-cat-infrastructure:  #FBBF24;
    --color-cat-outils:          #94A3B8;
    --color-cat-facade:          #F472B6;
    --color-cat-produits:        #10B981;
    --color-cat-atelier:         #FB923C;
    --color-cat-deprecie:        #F87171;

    /* ── Typographie ────────────────────────────────────────── */
    --font-sans: "Inter", "Geist", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", "Geist Mono", ui-monospace, "SF Mono", monospace;

    --text-display:  4rem;
    --text-h1:       2.5rem;
    --text-h2:       1.875rem;
    --text-h3:       1.375rem;
    --text-body:     1.0625rem;
    --text-sm:       0.875rem;
    --text-xs:       0.75rem;

    --leading-tight:   1.15;
    --leading-snug:    1.35;
    --leading-normal:  1.5;
    --leading-relaxed: 1.65;

    /* ── Espacement (base 4) ────────────────────────────────── */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.5rem;
    --space-6:   2rem;
    --space-8:   3rem;
    --space-10:  4rem;
    --space-12:  6rem;
    --space-16:  8rem;

    /* ── Radius ─────────────────────────────────────────────── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-full: 9999px;

    /* ── Ombres ─────────────────────────────────────────────── */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 0 1px var(--color-accent-muted),
                   0 8px 32px rgba(34, 211, 238, 0.08);

    /* ── Layout ─────────────────────────────────────────────── */
    --container-max: 72rem;
    --grid-gap:      var(--space-5);

    /* ── Motion ─────────────────────────────────────────────── */
    --transition-fast:    150ms ease-out;
    --transition-default: 200ms ease-out;
}

/* Pulse réservé aux indicateurs status — seule animation autorisée. */
@keyframes pulse-status {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* Respect des préférences utilisateur. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}