/**
 * ============================================================================
 * DESIGN TOKENS - BUBUL
 * ============================================================================
 *
 * Source de vérité pour toutes les couleurs et variables du projet.
 *
 * Utilise @theme de Tailwind CSS v4 pour générer automatiquement
 * les classes utilitaires.
 *
 * ============================================================================
 * MAPPING PRÉFIXES → CLASSES TAILWIND
 * ============================================================================
 *
 * Le PRÉFIXE de la variable détermine le TYPE de classes générées :
 *
 * | Préfixe variable     | Classes Tailwind générées                      |
 * |----------------------|------------------------------------------------|
 * | --color-*            | bg-*, text-*, border-*, from-*, via-*, to-*   |
 * | --shadow-*           | shadow-*                                       |
 * | --font-*             | font-*                                         |
 * | --radius-*           | rounded-*                                      |
 * | --duration-*         | duration-*                                     |
 * | --ease-*             | ease-*                                         |
 *
 * ============================================================================
 * EXEMPLES D'UTILISATION
 * ============================================================================
 *
 * Définition:
 *   --color-primary: #0C81E4;
 *   --color-gradient-start: #0A6BC4;
 *   --shadow-primary: 0 4px 14px 0 rgb(12 129 228 / 0.25);
 *
 * Classes générées et utilisables:
 *   bg-primary, text-primary, border-primary
 *   from-gradient-start, via-gradient-middle, to-gradient-end
 *   shadow-primary
 *
 * Avec variants Tailwind:
 *   hover:bg-primary, focus:border-primary, hover:shadow-primary-hover
 *
 * ============================================================================
 * CLASSES NATIVES vs CUSTOM
 * ============================================================================
 *
 * Exemple pour le bouton primary:
 *   'bg-gradient-to-r from-gradient-start via-gradient-middle to-gradient-end
 *    text-white shadow-primary hover:shadow-primary-hover
 *    hover:-translate-y-0.5 active:translate-y-0'
 *
 * | Classe                  | Type            | Source                      |
 * |-------------------------|-----------------|------------------------------|
 * | bg-gradient-to-r        | Native Tailwind | Direction du gradient        |
 * | from-gradient-start     | CUSTOM          | --color-gradient-start       |
 * | via-gradient-middle     | CUSTOM          | --color-gradient-middle      |
 * | to-gradient-end         | CUSTOM          | --color-gradient-end         |
 * | text-white              | Native Tailwind | Couleur texte                |
 * | shadow-primary          | CUSTOM          | --shadow-primary             |
 * | hover:shadow-primary-*  | CUSTOM          | --shadow-primary-hover       |
 * | hover:-translate-y-0.5  | Native Tailwind | Transform Y                  |
 *
 * ============================================================================
 */

@theme {
    /* =================================================================== */
    /* COULEURS PRINCIPALES                                                */
    /* =================================================================== */

    --color-primary: #0C81E4;
    --color-primary-light: #3D9EEB;
    --color-primary-dark: #0A6BC4;
    --color-primary-hover: #0B74D1;
    --color-primary-muted: rgb(12 129 228 / 0.04);
    --color-primary-subtle: rgb(12 129 228 / 0.12);

    /* =================================================================== */
    /* COULEURS SECONDAIRES                                                */
    /* =================================================================== */

    --color-secondary: #6B7280;
    --color-secondary-light: #9CA3AF;
    --color-secondary-dark: #4B5563;
    --color-secondary-hover: #5B6370;

    /* =================================================================== */
    /* COULEURS SÉMANTIQUES                                                */
    /* =================================================================== */

    /* Success (Vert) */
    --color-success: #309344;
    --color-success-light: #34D399;
    --color-success-dark: #267A35;
    --color-success-hover: #2B8540;

    /* Error (Rouge) */
    --color-error: #D10000;
    --color-error-light: #F87171;
    --color-error-dark: #A80000;
    --color-error-hover: #BC0000;

    /* Warning (Orange) */
    --color-warning: #F59E0B;
    --color-warning-light: #FCD34D;
    --color-warning-dark: #B45309;
    --color-warning-hover: #E09000;
    --color-warning-muted: rgb(255 193 7 / 0.06);
    --color-warning-subtle: rgb(255 193 7 / 0.2);

    /* Info (Bleu clair) */
    --color-info: #0EA5E9;
    --color-info-light: #7DD3FC;
    --color-info-dark: #0284C7;
    --color-info-hover: #0D96D6;

    /* SAM */
    --color-sam-bg: #f8f7fc;
    --color-sam-dark: #1a1535;
    --color-sam-border: #e0d9f7;
    --color-sam-hover: #faf9ff;

    /* Cohorts / Purple (Violet) — Serenia */
    --color-cohorts: #8b5cf6;
    --color-cohorts-light: #a78bfa;
    --color-cohorts-dark: #7c3aed;
    --color-cohorts-hover: #7c3aed;

    /* Promptly (Orange) */
    --color-promptly: #F97316;
    --color-promptly-light: #FB923C;
    --color-promptly-dark: #EA580C;
    --color-promptly-hover: #EA580C;

    /* Pixia (Indigo) */
    --color-pixia: #6366F1;
    --color-pixia-light: #818CF8;
    --color-pixia-dark: #4F46E5;
    --color-pixia-hover: #5558E8;
    --color-pixia-muted: rgb(99 102 241 / 0.06);
    --color-pixia-subtle: rgb(99 102 241 / 0.12);

    /* Teal (Promptly) */
    --color-teal: #1F9C97;
    --color-teal-light: #2DD4C8;
    --color-teal-dark: #147F80;
    --color-teal-hover: #1A8884;

    /* Pink (Monalisia / Créatif) */
    --color-pink: #EC4899;
    --color-pink-light: #F472B6;
    --color-pink-dark: #DB2777;
    --color-pink-hover: #E13F8C;


    /* =================================================================== */
    /* COULEURS NEUTRES                                                    */
    /* =================================================================== */

    --color-white: #FFFFFF;
    --color-black: #2D2D2D;
    --color-black-hover: #1A1A1A;

    /* Grays */
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F5F5F5;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;

    /* =================================================================== */
    /* COULEURS GRADIENTS (pour les boutons)                               */
    /* =================================================================== */

    /* Primary (Bleu) */
    --color-gradient-start: #0A6BC4;
    --color-gradient-middle: #0C81E4;
    --color-gradient-end: #3AB8E8;

    /* Success (Vert) */
    --color-gradient-success-start: #267A35;
    --color-gradient-success-middle: #309344;
    --color-gradient-success-end: #34D399;

    /* Error (Rouge) */
    --color-gradient-error-start: #A80000;
    --color-gradient-error-middle: #D10000;
    --color-gradient-error-end: #F87171;

    /* Warning (Orange) */
    --color-gradient-warning-start: #D97706;
    --color-gradient-warning-middle: #F59E0B;
    --color-gradient-warning-end: #FCD34D;

    /* Cohorts (Violet) — Serenia */
    --color-gradient-cohorts-start: #7C3AED;
    --color-gradient-cohorts-middle: #8B5CF6;
    --color-gradient-cohorts-end: #A78BFA;

    /* Promptly (Orange) */
    --color-gradient-promptly-start: #EA580C;
    --color-gradient-promptly-middle: #F97316;
    --color-gradient-promptly-end: #FB923C;

    /* Pink / Slidia (Rose) */
    --color-gradient-pink-start: #C4167A;
    --color-gradient-pink-middle: #E91E8C;
    --color-gradient-pink-end: #EC4899;

    /* Pixia (Indigo) */
    --color-gradient-pixia-start: #4F46E5;
    --color-gradient-pixia-middle: #6366F1;
    --color-gradient-pixia-end: #818CF8;

    /* Info / SAM (Cyan) */
    --color-gradient-info-start: #0891B2;
    --color-gradient-info-middle: #06B6D4;
    --color-gradient-info-end: #38BDF8;

    /* Monalisia (Orange) */
    --color-gradient-monalisia-start: #D97706;
    --color-gradient-monalisia-middle: #ED8600;
    --color-gradient-monalisia-end: #F59E0B;

    /* =================================================================== */
    /* OMBRES                                                              */
    /* =================================================================== */

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);

    /* Ombres colorées pour boutons
       Effet hover: glow coloré qui "soulève" le bouton
       Format: 0 7px 19px 0 rgba(color / 0.47) */
    --shadow-primary: 0 4px 14px 0 rgb(12 129 228 / 0.25);
    --shadow-primary-hover: 0 7px 19px 0 rgb(12 129 228 / 0.47);
    --shadow-success: 0 4px 14px 0 rgb(48 147 68 / 0.25);
    --shadow-success-hover: 0 7px 19px 0 rgb(48 147 68 / 0.47);
    --shadow-error: 0 4px 14px 0 rgb(209 0 0 / 0.25);
    --shadow-error-hover: 0 7px 19px 0 rgb(209 0 0 / 0.47);
    --shadow-warning: 0 4px 14px 0 rgb(245 158 11 / 0.25);
    --shadow-warning-hover: 0 7px 19px 0 rgb(245 158 11 / 0.47);
    --shadow-dark: 0 4px 14px 0 rgb(0 0 0 / 0.15);
    --shadow-dark-hover: 0 7px 19px 0 rgb(0 0 0 / 0.35);
    --shadow-cohorts: 0 4px 14px 0 rgb(139 92 246 / 0.25);
    --shadow-cohorts-hover: 0 7px 19px 0 rgb(139 92 246 / 0.47);
    --shadow-promptly: 0 4px 14px 0 rgb(249 115 22 / 0.25);
    --shadow-promptly-hover: 0 7px 19px 0 rgb(249 115 22 / 0.47);
    --shadow-pink: 0 4px 14px 0 rgb(233 30 140 / 0.25);
    --shadow-pink-hover: 0 7px 19px 0 rgb(233 30 140 / 0.47);
    --shadow-info: 0 4px 14px 0 rgb(6 182 212 / 0.25);
    --shadow-info-hover: 0 7px 19px 0 rgb(6 182 212 / 0.47);
    --shadow-pixia: 0 4px 14px 0 rgb(99 102 241 / 0.25);
    --shadow-pixia-hover: 0 7px 19px 0 rgb(99 102 241 / 0.47);

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

    --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-secondary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* =================================================================== */
    /* BORDER RADIUS                                                       */
    /* =================================================================== */

    --radius-none: 0;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --radius-full: 9999px;

    /* =================================================================== */
    /* TRANSITIONS                                                         */
    /* =================================================================== */

    --duration-fast: 150ms;
    --duration-medium: 200ms;
    --duration-base: 300ms;
    --duration-slow: 500ms;

    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);

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

    --animate-float-blob-1: float-blob-1 20s ease-in-out infinite;
    --animate-float-blob-2: float-blob-2 15s ease-in-out infinite;
    --animate-float-blob-3: float-blob-3 25s ease-in-out infinite;

    /* Success animations (export modal) */
    --animate-bounce-slow: bounce-slow 2s ease-in-out infinite;
    --animate-ping-slow: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    --animate-ping-slower: ping-slower 2.5s cubic-bezier(0, 0, 0.2, 1) infinite;

    /* Dashboard stagger animations */
    --animate-fade-up: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    --animate-fade-up-1: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
    --animate-fade-up-2: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
    --animate-fade-up-3: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both;
    --animate-fade-up-4: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both;
    --animate-fade-up-5: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.40s both;
    --animate-fade-up-6: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.48s both;
}

/* Blob keyframes - outside @theme as they're not theme values */
@keyframes float-blob-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

@keyframes float-blob-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-40px, 30px) scale(1.05); }
    66% { transform: translate(25px, -25px) scale(0.9); }
}

@keyframes float-blob-3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    50% { transform: translate(calc(-50% + 40px), calc(-50% - 40px)) scale(1.15) rotate(180deg); }
}

/* Dashboard stagger fade-up */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Success animations - export modal */
@keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes ping-slow {
    0% { transform: scale(1); opacity: 0.75; }
    75%, 100% { transform: scale(1.5); opacity: 0; }
}

@keyframes ping-slower {
    0% { transform: scale(1); opacity: 0.5; }
    75%, 100% { transform: scale(1.8); opacity: 0; }
}

/* ============================================================================
   CANAUX RVB DE LA COULEUR PRIMAIRE
   ============================================================================
   Canaux séparés de --color-primary, pour les `rgba(var(--color-primary-rgb), α)`
   des ombres et des fonds translucides.

   Il vit ICI, au niveau global, et non seulement sur les conteneurs d'outils,
   parce que des composants PARTAGÉS s'en servent (_organisms/choice-card) : sans
   valeur de repli globale, un `rgba(var(--color-primary-rgb), .12)` écrit dans une
   molécule commune serait une déclaration invalide — donc une ombre absente — sur
   toute page qui ne recolore pas son conteneur.

   Hors du bloc `@theme` À DESSEIN : Tailwind y traite toute clé `--color-*` comme
   une couleur du thème et lui fabrique des utilitaires (`bg-primary-rgb`…) dont la
   valeur « 12, 129, 228 » n'est pas une couleur valide. Un `:root` ordinaire produit
   exactement la même variable, sans cette entrée fantôme dans la palette.

   Les pages d'outil le surchargent en même temps que --color-primary : les deux ne
   doivent JAMAIS être dissociés, sous peine d'une ombre d'une couleur et d'un fond
   d'une autre — c'est précisément le défaut corrigé sur la page de choix de Slidia.
   ============================================================================ */
:root {
    --color-primary-rgb: 12, 129, 228;
}