{% extends 'base.html.twig' %}

{% block title %}Couleurs - Design System - Bubul{% endblock %}

{% block body %}
<div class="min-h-screen bg-gray-50">

    {# ===== HEADER ===== #}
    <header class="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div class="max-w-7xl mx-auto px-6 py-4">
            <div class="flex items-center gap-4">
                <a href="{{ path('admin_design_system') }}" class="text-gray-400 hover:text-gray-600 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                </a>
                <div>
                    <div class="flex items-center gap-2">
                        <span class="text-sm text-gray-500">Tokens</span>
                        <span class="text-gray-300">/</span>
                        <h1 class="text-xl font-bold text-gray-900 font-[Poppins]">Couleurs</h1>
                    </div>
                    <p class="text-sm text-gray-500 mt-0.5">Palette de couleurs du design system</p>
                </div>
            </div>
        </div>
    </header>

    <div class="max-w-7xl mx-auto px-6 py-8">

        {# ===== COULEURS PRINCIPALES ===== #}
        <section class="mb-12">
            <h2 class="text-lg font-semibold text-gray-900 mb-4">Couleurs principales</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">

                {# Primary #}
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-20 rounded-lg bg-primary mb-3"></div>
                    <h3 class="font-semibold text-gray-900 text-sm">Primary</h3>
                    <p class="text-xs text-gray-500 font-mono mt-1">#0C81E4</p>
                    <p class="text-xs text-gray-400 mt-1">--color-primary</p>
                </div>

                {# Primary Light #}
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-20 rounded-lg bg-primary-light mb-3"></div>
                    <h3 class="font-semibold text-gray-900 text-sm">Primary Light</h3>
                    <p class="text-xs text-gray-500 font-mono mt-1">#3D9EEB</p>
                    <p class="text-xs text-gray-400 mt-1">--color-primary-light</p>
                </div>

                {# Primary Dark #}
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-20 rounded-lg bg-primary-dark mb-3"></div>
                    <h3 class="font-semibold text-gray-900 text-sm">Primary Dark</h3>
                    <p class="text-xs text-gray-500 font-mono mt-1">#0A6BC4</p>
                    <p class="text-xs text-gray-400 mt-1">--color-primary-dark</p>
                </div>

                {# Primary Hover #}
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-20 rounded-lg bg-primary-hover mb-3"></div>
                    <h3 class="font-semibold text-gray-900 text-sm">Primary Hover</h3>
                    <p class="text-xs text-gray-500 font-mono mt-1">#0B74D1</p>
                    <p class="text-xs text-gray-400 mt-1">--color-primary-hover</p>
                </div>

                {# Primary Muted #}
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-20 rounded-lg bg-primary-muted border border-primary-subtle mb-3"></div>
                    <h3 class="font-semibold text-gray-900 text-sm">Primary Muted</h3>
                    <p class="text-xs text-gray-500 font-mono mt-1">rgba(12,129,228,0.04)</p>
                    <p class="text-xs text-gray-400 mt-1">--color-primary-muted</p>
                </div>

                {# Primary Subtle #}
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-20 rounded-lg border-2 border-primary-subtle mb-3"></div>
                    <h3 class="font-semibold text-gray-900 text-sm">Primary Subtle</h3>
                    <p class="text-xs text-gray-500 font-mono mt-1">rgba(12,129,228,0.12)</p>
                    <p class="text-xs text-gray-400 mt-1">--color-primary-subtle</p>
                </div>

            </div>
        </section>

        {# ===== COULEURS SÉMANTIQUES ===== #}
        <section class="mb-12">
            <h2 class="text-lg font-semibold text-gray-900 mb-4">Couleurs sémantiques</h2>

            {# Success #}
            <h3 class="text-sm font-medium text-gray-700 mb-3 mt-6">Success (Vert)</h3>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-16 rounded-lg bg-success mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Success</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#309344</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-16 rounded-lg bg-success-light mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Success Light</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#34D399</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-16 rounded-lg bg-success-hover mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Success Hover</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#2B8540</p>
                </div>
            </div>

            {# Error #}
            <h3 class="text-sm font-medium text-gray-700 mb-3">Error (Rouge)</h3>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-16 rounded-lg bg-error mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Error</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#D10000</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-16 rounded-lg bg-error-light mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Error Light</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#F87171</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-16 rounded-lg bg-error-hover mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Error Hover</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#BC0000</p>
                </div>
            </div>

            {# Warning #}
            <h3 class="text-sm font-medium text-gray-700 mb-3">Warning (Orange)</h3>
            <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-16 rounded-lg bg-warning mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Warning</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#F59E0B</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-16 rounded-lg bg-warning-light mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Warning Light</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#FCD34D</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-16 rounded-lg bg-warning-hover mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Warning Hover</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#E09000</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-16 rounded-lg bg-warning-muted border border-warning-subtle mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Warning Muted</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">rgba(255,193,7,0.06)</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-16 rounded-lg border-2 border-warning-subtle mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Warning Subtle</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">rgba(255,193,7,0.2)</p>
                </div>
            </div>

            {# Info #}
            <h3 class="text-sm font-medium text-gray-700 mb-3">Info (Bleu clair)</h3>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-16 rounded-lg bg-info mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Info</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#0EA5E9</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-16 rounded-lg bg-info-light mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Info Light</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#7DD3FC</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-16 rounded-lg bg-info-hover mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Info Hover</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#0D96D6</p>
                </div>
            </div>

            {# Cohorts #}
            <h3 class="text-sm font-medium text-gray-700 mb-3">Cohorts (Violet)</h3>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-16 rounded-lg bg-cohorts mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Cohorts</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#8B5CF6</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-16 rounded-lg bg-cohorts-light mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Cohorts Light</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#A78BFA</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-16 rounded-lg bg-cohorts-hover mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Cohorts Hover</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#7C3AED</p>
                </div>
            </div>

        </section>

        {# ===== GRADIENTS ===== #}
        <section class="mb-12">
            <h2 class="text-lg font-semibold text-gray-900 mb-4">Gradients (boutons)</h2>

            {# Primary Gradient #}
            <h3 class="text-sm font-medium text-gray-700 mb-3">Primary</h3>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-12 rounded-lg bg-gradient-start mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Start</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#0A6BC4</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-12 rounded-lg bg-gradient-middle mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Middle</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#0C81E4</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-12 rounded-lg bg-gradient-end mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">End</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#3AB8E8</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-12 rounded-lg bg-gradient-to-r from-gradient-start via-gradient-middle to-gradient-end mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Résultat</h4>
                    <p class="text-xs text-gray-400 mt-1">from-gradient-start via-gradient-middle to-gradient-end</p>
                </div>
            </div>

            {# Success Gradient #}
            <h3 class="text-sm font-medium text-gray-700 mb-3">Success</h3>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-12 rounded-lg bg-gradient-success-start mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Start</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#267A35</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-12 rounded-lg bg-gradient-success-middle mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Middle</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#309344</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-12 rounded-lg bg-gradient-success-end mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">End</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#34D399</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-12 rounded-lg bg-gradient-to-r from-gradient-success-start via-gradient-success-middle to-gradient-success-end mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Résultat</h4>
                    <p class="text-xs text-gray-400 mt-1">from-gradient-success-start via-... to-...</p>
                </div>
            </div>

            {# Error Gradient #}
            <h3 class="text-sm font-medium text-gray-700 mb-3">Error</h3>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-12 rounded-lg bg-gradient-error-start mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Start</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#A80000</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-12 rounded-lg bg-gradient-error-middle mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Middle</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#D10000</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-12 rounded-lg bg-gradient-error-end mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">End</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#F87171</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-12 rounded-lg bg-gradient-to-r from-gradient-error-start via-gradient-error-middle to-gradient-error-end mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Résultat</h4>
                    <p class="text-xs text-gray-400 mt-1">from-gradient-error-start via-... to-...</p>
                </div>
            </div>

            {# Warning Gradient #}
            <h3 class="text-sm font-medium text-gray-700 mb-3">Warning</h3>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-12 rounded-lg bg-gradient-warning-start mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Start</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#D97706</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-12 rounded-lg bg-gradient-warning-middle mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Middle</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#F59E0B</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-12 rounded-lg bg-gradient-warning-end mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">End</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#FCD34D</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-12 rounded-lg bg-gradient-to-r from-gradient-warning-start via-gradient-warning-middle to-gradient-warning-end mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Résultat</h4>
                    <p class="text-xs text-gray-400 mt-1">from-gradient-warning-start via-... to-...</p>
                </div>
            </div>

            {# Cohorts Gradient #}
            <h3 class="text-sm font-medium text-gray-700 mb-3">Cohorts</h3>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-12 rounded-lg bg-gradient-cohorts-start mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Start</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#7C3AED</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-12 rounded-lg bg-gradient-cohorts-middle mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Middle</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#8B5CF6</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-12 rounded-lg bg-gradient-cohorts-end mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">End</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#A78BFA</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-12 rounded-lg bg-gradient-to-r from-gradient-cohorts-start via-gradient-cohorts-middle to-gradient-cohorts-end mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Résultat</h4>
                    <p class="text-xs text-gray-400 mt-1">from-gradient-cohorts-start via-... to-...</p>
                </div>
            </div>
        </section>

        {# ===== CONTAINERS ===== #}
        <section class="mb-12">
            <h2 class="text-lg font-semibold text-gray-900 mb-4">Containers (alertes, messages)</h2>
            <p class="text-sm text-gray-500 mb-4">Fonds subtils avec bordures légères pour les messages de statut.</p>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                {# Success Container #}
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="container-success rounded-lg p-4 mb-3">
                        <div class="flex items-center gap-2">
                            <svg class="w-5 h-5 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <span class="text-success font-medium text-sm">Opération réussie</span>
                        </div>
                        <p class="text-gray-600 text-sm mt-1">Votre modification a été enregistrée.</p>
                    </div>
                    <h4 class="font-semibold text-gray-900 text-sm">container-success</h4>
                    <p class="text-xs text-gray-400 mt-1">Confirmations, succès</p>
                </div>

                {# Warning Container #}
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="container-warning rounded-lg p-4 mb-3">
                        <div class="flex items-center gap-2">
                            <svg class="w-5 h-5 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                            </svg>
                            <span class="text-warning font-medium text-sm">Attention requise</span>
                        </div>
                        <p class="text-gray-600 text-sm mt-1">Votre quota est presque atteint.</p>
                    </div>
                    <h4 class="font-semibold text-gray-900 text-sm">container-warning</h4>
                    <p class="text-xs text-gray-400 mt-1">Avertissements</p>
                </div>

                {# Error Container #}
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="container-error rounded-lg p-4 mb-3">
                        <div class="flex items-center gap-2">
                            <svg class="w-5 h-5 text-error" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                            <span class="text-error font-medium text-sm">Erreur</span>
                        </div>
                        <p class="text-gray-600 text-sm mt-1">Impossible de sauvegarder les données.</p>
                    </div>
                    <h4 class="font-semibold text-gray-900 text-sm">container-error</h4>
                    <p class="text-xs text-gray-400 mt-1">Erreurs, alertes critiques</p>
                </div>

                {# Info Container #}
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="container-info rounded-lg p-4 mb-3">
                        <div class="flex items-center gap-2">
                            <svg class="w-5 h-5 text-info" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            <span class="text-info font-medium text-sm">Information</span>
                        </div>
                        <p class="text-gray-600 text-sm mt-1">Une nouvelle version est disponible.</p>
                    </div>
                    <h4 class="font-semibold text-gray-900 text-sm">container-info</h4>
                    <p class="text-xs text-gray-400 mt-1">Informations, conseils</p>
                </div>

                {# Cohorts Container #}
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="container-cohorts rounded-lg p-4 mb-3">
                        <div class="flex items-center gap-2">
                            <svg class="w-5 h-5 text-cohorts" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                            <span class="text-cohorts font-medium text-sm">Cohorte assignée</span>
                        </div>
                        <p class="text-gray-600 text-sm mt-1">Les apprenants ont été ajoutés à la cohorte.</p>
                    </div>
                    <h4 class="font-semibold text-gray-900 text-sm">container-cohorts</h4>
                    <p class="text-xs text-gray-400 mt-1">Tags, cohortes, groupes</p>
                </div>

                {# Primary Muted Container #}
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="container-primary-muted rounded-lg p-4 mb-3">
                        <div class="flex items-center gap-2">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'token', size: 'md', color: 'primary' } %}
                            <span class="text-primary font-medium text-sm">1,234 tokens</span>
                        </div>
                        <p class="text-gray-600 text-sm mt-1">Fond bleu pastel réutilisable.</p>
                    </div>
                    <h4 class="font-semibold text-gray-900 text-sm">container-primary-muted</h4>
                    <p class="text-xs text-gray-400 mt-1">bg-primary-muted + border-primary-subtle</p>
                </div>

                {# Warning Muted Container #}
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="container-warning-muted rounded-lg p-4 mb-3">
                        <div class="flex items-center gap-2">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'lightbulb-bolt', size: 'md', color: 'warning' } %}
                            <span class="text-warning font-medium text-sm">0.42 Wh</span>
                        </div>
                        <p class="text-gray-600 text-sm mt-1">Fond jaune pastel réutilisable.</p>
                    </div>
                    <h4 class="font-semibold text-gray-900 text-sm">container-warning-muted</h4>
                    <p class="text-xs text-gray-400 mt-1">bg-warning-muted + border-warning-subtle</p>
                </div>
            </div>
        </section>

        {# ===== COULEURS NEUTRES ===== #}
        <section class="mb-12">
            <h2 class="text-lg font-semibold text-gray-900 mb-4">Couleurs neutres</h2>

            {# Black/White #}
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-16 rounded-lg bg-white border border-gray-200 mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">White</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#FFFFFF</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-16 rounded-lg bg-black mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Black</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#2D2D2D</p>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-200">
                    <div class="h-16 rounded-lg bg-black-hover mb-3"></div>
                    <h4 class="font-semibold text-gray-900 text-sm">Black Hover</h4>
                    <p class="text-xs text-gray-500 font-mono mt-1">#1A1A1A</p>
                </div>
            </div>

            {# Grays #}
            <h3 class="text-sm font-medium text-gray-700 mb-3">Grays</h3>
            <div class="grid grid-cols-5 md:grid-cols-10 gap-2">
                <div class="text-center">
                    <div class="h-12 rounded-lg bg-gray-50 border border-gray-200 mb-2"></div>
                    <p class="text-xs text-gray-600">50</p>
                </div>
                <div class="text-center">
                    <div class="h-12 rounded-lg bg-gray-100 mb-2"></div>
                    <p class="text-xs text-gray-600">100</p>
                </div>
                <div class="text-center">
                    <div class="h-12 rounded-lg bg-gray-200 mb-2"></div>
                    <p class="text-xs text-gray-600">200</p>
                </div>
                <div class="text-center">
                    <div class="h-12 rounded-lg bg-gray-300 mb-2"></div>
                    <p class="text-xs text-gray-600">300</p>
                </div>
                <div class="text-center">
                    <div class="h-12 rounded-lg bg-gray-400 mb-2"></div>
                    <p class="text-xs text-gray-600">400</p>
                </div>
                <div class="text-center">
                    <div class="h-12 rounded-lg bg-gray-500 mb-2"></div>
                    <p class="text-xs text-gray-600">500</p>
                </div>
                <div class="text-center">
                    <div class="h-12 rounded-lg bg-gray-600 mb-2"></div>
                    <p class="text-xs text-gray-600">600</p>
                </div>
                <div class="text-center">
                    <div class="h-12 rounded-lg bg-gray-700 mb-2"></div>
                    <p class="text-xs text-gray-600">700</p>
                </div>
                <div class="text-center">
                    <div class="h-12 rounded-lg bg-gray-800 mb-2"></div>
                    <p class="text-xs text-gray-600">800</p>
                </div>
                <div class="text-center">
                    <div class="h-12 rounded-lg bg-gray-900 mb-2"></div>
                    <p class="text-xs text-gray-600">900</p>
                </div>
            </div>
        </section>

        {# ===== SHADOWS ===== #}
        <section class="mb-12">
            <h2 class="text-lg font-semibold text-gray-900 mb-4">Shadows</h2>

            <h3 class="text-sm font-medium text-gray-700 mb-3">Shadows standards</h3>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
                    <div class="h-16 bg-white rounded-lg shadow-sm flex items-center justify-center">
                        <span class="text-xs text-gray-500">shadow-sm</span>
                    </div>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
                    <div class="h-16 bg-white rounded-lg shadow-md flex items-center justify-center">
                        <span class="text-xs text-gray-500">shadow-md</span>
                    </div>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
                    <div class="h-16 bg-white rounded-lg shadow-lg flex items-center justify-center">
                        <span class="text-xs text-gray-500">shadow-lg</span>
                    </div>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
                    <div class="h-16 bg-white rounded-lg shadow-xl flex items-center justify-center">
                        <span class="text-xs text-gray-500">shadow-xl</span>
                    </div>
                </div>
            </div>

            <h3 class="text-sm font-medium text-gray-700 mb-3">Shadows colorées (boutons hover)</h3>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
                    <div class="h-16 bg-primary rounded-lg shadow-primary-hover flex items-center justify-center">
                        <span class="text-xs text-white">shadow-primary-hover</span>
                    </div>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
                    <div class="h-16 bg-success rounded-lg shadow-success-hover flex items-center justify-center">
                        <span class="text-xs text-white">shadow-success-hover</span>
                    </div>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
                    <div class="h-16 bg-error rounded-lg shadow-error-hover flex items-center justify-center">
                        <span class="text-xs text-white">shadow-error-hover</span>
                    </div>
                </div>
                <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
                    <div class="h-16 bg-warning rounded-lg shadow-warning-hover flex items-center justify-center">
                        <span class="text-xs text-white">shadow-warning-hover</span>
                    </div>
                </div>
            </div>
        </section>

        {# ===== UTILISATION ===== #}
        <section class="mb-12 bg-white rounded-xl p-6 shadow-sm border border-gray-200">
            <h2 class="text-lg font-semibold text-gray-900 mb-4">Utilisation</h2>
            <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto">
                <pre class="text-sm text-gray-100"><code>{# Couleurs de fond #}
&lt;div class="bg-primary"&gt;...&lt;/div&gt;
&lt;div class="bg-success"&gt;...&lt;/div&gt;
&lt;div class="bg-error"&gt;...&lt;/div&gt;

{# Couleurs de texte #}
&lt;span class="text-primary"&gt;...&lt;/span&gt;
&lt;span class="text-success"&gt;...&lt;/span&gt;

{# Bordures #}
&lt;div class="border border-primary"&gt;...&lt;/div&gt;

{# Gradients (boutons) #}
&lt;div class="bg-gradient-to-r from-gradient-start via-gradient-middle to-gradient-end"&gt;...&lt;/div&gt;
&lt;div class="bg-gradient-to-r from-gradient-success-start via-gradient-success-middle to-gradient-success-end"&gt;...&lt;/div&gt;
&lt;div class="bg-gradient-to-r from-gradient-error-start via-gradient-error-middle to-gradient-error-end"&gt;...&lt;/div&gt;
&lt;div class="bg-gradient-to-r from-gradient-warning-start via-gradient-warning-middle to-gradient-warning-end"&gt;...&lt;/div&gt;
&lt;div class="bg-gradient-to-r from-gradient-cohorts-start via-gradient-cohorts-middle to-gradient-cohorts-end"&gt;...&lt;/div&gt;

{# Shadows colorées #}
&lt;button class="shadow-primary hover:shadow-primary-hover"&gt;...&lt;/button&gt;

{# Containers (alertes, messages) #}
&lt;div class="container-success rounded-lg p-4"&gt;Message de succès&lt;/div&gt;
&lt;div class="container-warning rounded-lg p-4"&gt;Avertissement&lt;/div&gt;
&lt;div class="container-error rounded-lg p-4"&gt;Erreur&lt;/div&gt;
&lt;div class="container-info rounded-lg p-4"&gt;Information&lt;/div&gt;
&lt;div class="container-cohorts rounded-lg p-4"&gt;Cohortes, tags&lt;/div&gt;
&lt;div class="container-primary-muted rounded-lg p-4"&gt;Bleu pastel (tokens, stats...)&lt;/div&gt;
&lt;div class="container-warning-muted rounded-lg p-4"&gt;Jaune pastel (énergie, alertes légères...)&lt;/div&gt;

{# Variantes muted/subtle (fonds très pâles) #}
&lt;div class="bg-primary-muted border border-primary-subtle"&gt;Fond bleu ultra-léger&lt;/div&gt;
&lt;div class="bg-warning-muted border border-warning-subtle"&gt;Fond jaune ultra-léger&lt;/div&gt;

{# Cohorts (violet) - pour les tags et badges #}
&lt;span class="bg-cohorts/10 text-cohorts"&gt;Badge cohort&lt;/span&gt;
&lt;button class="bg-cohorts text-white"&gt;...&lt;/button&gt;</code></pre>
            </div>
        </section>

    </div>
</div>
{% endblock %}