/* ===================================
   KREAFINITY — Design Tokens
   Source unique de vérité pour les couleurs, rayons, ombres.
   Chargé EN PREMIER par les trois espaces (public, client, admin).
   L'admin ré-écrase certaines valeurs dans style.css (palette legacy)
   jusqu'à sa migration.
   =================================== */

:root {
    /* Couleurs principales - Palette moderne */
    --primary: #4F46E5;
    --gray-light: #F1F5F9;
    --primary-light: #818CF8;
    --primary-dark: #312E81;
    --accent: #22D3EE;
    --accent-light: #38BDF8;

    /* Neutrals - Tons épurés */
    --dark: #0F172A;
    --dark-soft: #1E293B;
    --gray-900: #0F172A;
    --gray-800: #1E293B;
    --gray-700: #334155;
    --gray-600: #475569;
    --gray-500: #64748B;
    --gray-400: #94A3B8;
    --gray-300: #CBD5E1;
    --gray-200: #E2E8F0;
    --gray-100: #F1F5F9;
    --gray-50: #F8FAFC;
    --white: #FFFFFF;

    /* Status colors */
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #3B82F6;

    /* Spacing & Effects */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Shadows - teintées ardoise (plus douces que le noir pur) */
    --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
    --shadow-xl: 0 25px 50px -12px rgba(15, 23, 42, 0.15);

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.18);

    /* ── Tokens sémantiques ──────────────────────────────
       À utiliser dans tout nouveau code à la place des
       couleurs brutes : ils basculent seuls en mode sombre. */
    --surface: var(--white);          /* fond des cartes/panneaux */
    --surface-alt: var(--gray-50);    /* fond secondaire (sections) */
    --surface-inset: var(--gray-100); /* champs, zones en creux */
    --text: var(--gray-700);          /* texte courant */
    --text-strong: var(--gray-900);   /* titres */
    --text-muted: var(--gray-500);    /* texte secondaire */
    --border: var(--gray-200);        /* bordures par défaut */
    --border-strong: var(--gray-300);
    --brand: var(--primary);
    --brand-contrast: var(--white);   /* texte sur fond brand */

    /* Alias de compatibilité (anciens noms utilisés par style.css/admin.css,
       à résorber au fil de la migration des pages) */
    --gray: var(--gray-500);
    --neon-blue: var(--accent);

    color-scheme: light;
}

/* Valeurs des tokens en mode sombre.
   Les pages existantes restent couvertes par dark-theme.css ;
   tout code écrit avec les tokens sémantiques est couvert ici. */
[data-theme="dark"] {
    --surface: #1E293B;
    --surface-alt: #0F172A;
    --surface-inset: #334155;
    --text: #CBD5E1;
    --text-strong: #F1F5F9;
    --text-muted: #94A3B8;
    --border: #334155;
    --border-strong: #475569;
    --brand: #818CF8;
    --brand-contrast: #0F172A;

    --glass-bg: rgba(30, 41, 59, 0.7);
    --glass-border: rgba(148, 163, 184, 0.18);

    color-scheme: dark;
}

/* ── Raffinements globaux (Phase 3, option A « indigo raffiné ») ── */

/* Sélection de texte aux couleurs de la marque */
::selection {
    background: var(--primary);
    color: var(--white);
}

/* Focus clavier visible et cohérent partout (accessibilité WCAG 2.4.7) */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Respect de la préférence « réduire les animations » (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }
}