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

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

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

    <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">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'chevron-left', size: 'sm', color: 'gray' } %}
                </a>
                <div>
                    <div class="flex items-center gap-2">
                        <span class="px-2 py-0.5 text-xs font-medium bg-yellow-100 text-yellow-700 rounded">Token</span>
                        <span class="text-gray-300">/</span>
                        <h1 class="text-xl font-bold text-gray-900 font-secondary">Shadows</h1>
                    </div>
                    <p class="text-sm text-gray-500">Tokens d'ombre — shadow-* depuis variables.css</p>
                </div>
            </div>
        </div>
    </header>

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

        {# ===== OMBRES NEUTRES ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Ombres neutres</h2>
                <p class="text-sm text-gray-500 mt-1">Ombres generiques — elevation</p>
            </div>
            <div class="p-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
                <div class="flex flex-col items-center gap-3">
                    <div class="w-full h-24 bg-white rounded-xl shadow-sm flex items-center justify-center">
                        <span class="text-xs text-gray-400">sm</span>
                    </div>
                    <div class="text-center">
                        <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded block mb-1">shadow-sm</code>
                        <p class="text-xs text-gray-400">0 1px 2px 0 rgba(0,0,0,5%)</p>
                    </div>
                </div>
                <div class="flex flex-col items-center gap-3">
                    <div class="w-full h-24 bg-white rounded-xl shadow-md flex items-center justify-center">
                        <span class="text-xs text-gray-400">md</span>
                    </div>
                    <div class="text-center">
                        <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded block mb-1">shadow-md</code>
                        <p class="text-xs text-gray-400">0 4px 6px -1px rgba(0,0,0,10%)</p>
                    </div>
                </div>
                <div class="flex flex-col items-center gap-3">
                    <div class="w-full h-24 bg-white rounded-xl shadow-lg flex items-center justify-center">
                        <span class="text-xs text-gray-400">lg</span>
                    </div>
                    <div class="text-center">
                        <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded block mb-1">shadow-lg</code>
                        <p class="text-xs text-gray-400">0 10px 15px -3px rgba(0,0,0,10%)</p>
                    </div>
                </div>
                <div class="flex flex-col items-center gap-3">
                    <div class="w-full h-24 bg-white rounded-xl shadow-xl flex items-center justify-center">
                        <span class="text-xs text-gray-400">xl</span>
                    </div>
                    <div class="text-center">
                        <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded block mb-1">shadow-xl</code>
                        <p class="text-xs text-gray-400">0 20px 25px -5px rgba(0,0,0,10%)</p>
                    </div>
                </div>
            </div>
        </section>

        {# ===== OMBRES COLOREES ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Ombres colorees</h2>
                <p class="text-sm text-gray-500 mt-1">Utilises pour les boutons — effet glow au hover</p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">

                    <div class="flex flex-col gap-3">
                        <div class="flex gap-3">
                            <div class="flex-1 h-16 bg-white rounded-xl shadow-primary flex items-center justify-center">
                                <span class="text-xs text-primary font-semibold">Normal</span>
                            </div>
                            <div class="flex-1 h-16 bg-white rounded-xl shadow-primary-hover flex items-center justify-center">
                                <span class="text-xs text-primary font-semibold">Hover</span>
                            </div>
                        </div>
                        <div>
                            <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">shadow-primary</code>
                            <span class="text-xs text-gray-400 ml-2">/ shadow-primary-hover</span>
                        </div>
                    </div>

                    <div class="flex flex-col gap-3">
                        <div class="flex gap-3">
                            <div class="flex-1 h-16 bg-white rounded-xl shadow-success flex items-center justify-center">
                                <span class="text-xs text-success font-semibold">Normal</span>
                            </div>
                            <div class="flex-1 h-16 bg-white rounded-xl shadow-success-hover flex items-center justify-center">
                                <span class="text-xs text-success font-semibold">Hover</span>
                            </div>
                        </div>
                        <div>
                            <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">shadow-success</code>
                            <span class="text-xs text-gray-400 ml-2">/ shadow-success-hover</span>
                        </div>
                    </div>

                    <div class="flex flex-col gap-3">
                        <div class="flex gap-3">
                            <div class="flex-1 h-16 bg-white rounded-xl shadow-error flex items-center justify-center">
                                <span class="text-xs text-error font-semibold">Normal</span>
                            </div>
                            <div class="flex-1 h-16 bg-white rounded-xl shadow-error-hover flex items-center justify-center">
                                <span class="text-xs text-error font-semibold">Hover</span>
                            </div>
                        </div>
                        <div>
                            <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">shadow-error</code>
                            <span class="text-xs text-gray-400 ml-2">/ shadow-error-hover</span>
                        </div>
                    </div>

                    <div class="flex flex-col gap-3">
                        <div class="flex gap-3">
                            <div class="flex-1 h-16 bg-white rounded-xl shadow-warning flex items-center justify-center">
                                <span class="text-xs text-warning font-semibold">Normal</span>
                            </div>
                            <div class="flex-1 h-16 bg-white rounded-xl shadow-warning-hover flex items-center justify-center">
                                <span class="text-xs text-warning font-semibold">Hover</span>
                            </div>
                        </div>
                        <div>
                            <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">shadow-warning</code>
                            <span class="text-xs text-gray-400 ml-2">/ shadow-warning-hover</span>
                        </div>
                    </div>

                    <div class="flex flex-col gap-3">
                        <div class="flex gap-3">
                            <div class="flex-1 h-16 bg-white rounded-xl shadow-cohorts flex items-center justify-center">
                                <span class="text-xs text-cohorts font-semibold">Normal</span>
                            </div>
                            <div class="flex-1 h-16 bg-white rounded-xl shadow-cohorts-hover flex items-center justify-center">
                                <span class="text-xs text-cohorts font-semibold">Hover</span>
                            </div>
                        </div>
                        <div>
                            <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">shadow-cohorts</code>
                            <span class="text-xs text-gray-400 ml-2">/ shadow-cohorts-hover</span>
                        </div>
                    </div>

                    <div class="flex flex-col gap-3">
                        <div class="flex gap-3">
                            <div class="flex-1 h-16 bg-white rounded-xl shadow-dark flex items-center justify-center">
                                <span class="text-xs text-gray-700 font-semibold">Normal</span>
                            </div>
                            <div class="flex-1 h-16 bg-white rounded-xl shadow-dark-hover flex items-center justify-center">
                                <span class="text-xs text-gray-700 font-semibold">Hover</span>
                            </div>
                        </div>
                        <div>
                            <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">shadow-dark</code>
                            <span class="text-xs text-gray-400 ml-2">/ shadow-dark-hover</span>
                        </div>
                    </div>

                    <div class="flex flex-col gap-3">
                        <div class="flex gap-3">
                            <div class="flex-1 h-16 bg-white rounded-xl shadow-pink flex items-center justify-center">
                                <span class="text-xs text-pink font-semibold">Normal</span>
                            </div>
                            <div class="flex-1 h-16 bg-white rounded-xl shadow-pink-hover flex items-center justify-center">
                                <span class="text-xs text-pink font-semibold">Hover</span>
                            </div>
                        </div>
                        <div>
                            <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">shadow-pink</code>
                            <span class="text-xs text-gray-400 ml-2">/ shadow-pink-hover</span>
                        </div>
                    </div>

                    <div class="flex flex-col gap-3">
                        <div class="flex gap-3">
                            <div class="flex-1 h-16 bg-white rounded-xl shadow-info flex items-center justify-center">
                                <span class="text-xs text-info font-semibold">Normal</span>
                            </div>
                            <div class="flex-1 h-16 bg-white rounded-xl shadow-info-hover flex items-center justify-center">
                                <span class="text-xs text-info font-semibold">Hover</span>
                            </div>
                        </div>
                        <div>
                            <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">shadow-info</code>
                            <span class="text-xs text-gray-400 ml-2">/ shadow-info-hover</span>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        {# ===== REFERENCE ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Reference — variables.css</h2>
                <p class="text-sm text-gray-500 mt-1">Source de verite</p>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 border-b border-gray-200">
                        <tr>
                            <th class="px-6 py-3 text-left font-semibold text-gray-700">Classe Tailwind</th>
                            <th class="px-6 py-3 text-left font-semibold text-gray-700">Variable CSS</th>
                            <th class="px-6 py-3 text-left font-semibold text-gray-700">Valeur</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 font-mono text-xs">
                        <tr><td class="px-6 py-3">shadow-sm</td><td class="px-6 py-3 text-gray-500">--shadow-sm</td><td class="px-6 py-3 text-gray-400">0 1px 2px 0 rgba(0,0,0,0.05)</td></tr>
                        <tr><td class="px-6 py-3">shadow-md</td><td class="px-6 py-3 text-gray-500">--shadow-md</td><td class="px-6 py-3 text-gray-400">0 4px 6px -1px rgba(0,0,0,0.1)</td></tr>
                        <tr><td class="px-6 py-3">shadow-lg</td><td class="px-6 py-3 text-gray-500">--shadow-lg</td><td class="px-6 py-3 text-gray-400">0 10px 15px -3px rgba(0,0,0,0.1)</td></tr>
                        <tr><td class="px-6 py-3">shadow-xl</td><td class="px-6 py-3 text-gray-500">--shadow-xl</td><td class="px-6 py-3 text-gray-400">0 20px 25px -5px rgba(0,0,0,0.1)</td></tr>
                        <tr><td class="px-6 py-3">shadow-primary</td><td class="px-6 py-3 text-gray-500">--shadow-primary</td><td class="px-6 py-3 text-gray-400">0 4px 14px 0 rgb(12 129 228 / 0.25)</td></tr>
                        <tr><td class="px-6 py-3">shadow-primary-hover</td><td class="px-6 py-3 text-gray-500">--shadow-primary-hover</td><td class="px-6 py-3 text-gray-400">0 7px 19px 0 rgb(12 129 228 / 0.47)</td></tr>
                        <tr><td class="px-6 py-3">shadow-success</td><td class="px-6 py-3 text-gray-500">--shadow-success</td><td class="px-6 py-3 text-gray-400">0 4px 14px 0 rgb(48 147 68 / 0.25)</td></tr>
                        <tr><td class="px-6 py-3">shadow-success-hover</td><td class="px-6 py-3 text-gray-500">--shadow-success-hover</td><td class="px-6 py-3 text-gray-400">0 7px 19px 0 rgb(48 147 68 / 0.47)</td></tr>
                        <tr><td class="px-6 py-3">shadow-error</td><td class="px-6 py-3 text-gray-500">--shadow-error</td><td class="px-6 py-3 text-gray-400">0 4px 14px 0 rgb(209 0 0 / 0.25)</td></tr>
                        <tr><td class="px-6 py-3">shadow-error-hover</td><td class="px-6 py-3 text-gray-500">--shadow-error-hover</td><td class="px-6 py-3 text-gray-400">0 7px 19px 0 rgb(209 0 0 / 0.47)</td></tr>
                        <tr><td class="px-6 py-3">shadow-warning</td><td class="px-6 py-3 text-gray-500">--shadow-warning</td><td class="px-6 py-3 text-gray-400">0 4px 14px 0 rgb(245 158 11 / 0.25)</td></tr>
                        <tr><td class="px-6 py-3">shadow-warning-hover</td><td class="px-6 py-3 text-gray-500">--shadow-warning-hover</td><td class="px-6 py-3 text-gray-400">0 7px 19px 0 rgb(245 158 11 / 0.47)</td></tr>
                        <tr><td class="px-6 py-3">shadow-cohorts</td><td class="px-6 py-3 text-gray-500">--shadow-cohorts</td><td class="px-6 py-3 text-gray-400">0 4px 14px 0 rgb(139 92 246 / 0.25)</td></tr>
                        <tr><td class="px-6 py-3">shadow-cohorts-hover</td><td class="px-6 py-3 text-gray-500">--shadow-cohorts-hover</td><td class="px-6 py-3 text-gray-400">0 7px 19px 0 rgb(139 92 246 / 0.47)</td></tr>
                        <tr><td class="px-6 py-3">shadow-dark</td><td class="px-6 py-3 text-gray-500">--shadow-dark</td><td class="px-6 py-3 text-gray-400">0 4px 14px 0 rgb(0 0 0 / 0.15)</td></tr>
                        <tr><td class="px-6 py-3">shadow-dark-hover</td><td class="px-6 py-3 text-gray-500">--shadow-dark-hover</td><td class="px-6 py-3 text-gray-400">0 7px 19px 0 rgb(0 0 0 / 0.35)</td></tr>
                        <tr><td class="px-6 py-3">shadow-pink</td><td class="px-6 py-3 text-gray-500">--shadow-pink</td><td class="px-6 py-3 text-gray-400">0 4px 14px 0 rgb(233 30 140 / 0.25)</td></tr>
                        <tr><td class="px-6 py-3">shadow-pink-hover</td><td class="px-6 py-3 text-gray-500">--shadow-pink-hover</td><td class="px-6 py-3 text-gray-400">0 7px 19px 0 rgb(233 30 140 / 0.47)</td></tr>
                        <tr><td class="px-6 py-3">shadow-info</td><td class="px-6 py-3 text-gray-500">--shadow-info</td><td class="px-6 py-3 text-gray-400">0 4px 14px 0 rgb(6 182 212 / 0.25)</td></tr>
                        <tr><td class="px-6 py-3">shadow-info-hover</td><td class="px-6 py-3 text-gray-500">--shadow-info-hover</td><td class="px-6 py-3 text-gray-400">0 7px 19px 0 rgb(6 182 212 / 0.47)</td></tr>
                    </tbody>
                </table>
            </div>
        </section>

        {# ===== UTILISATION ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Utilisation</h2>
                <p class="text-sm text-gray-500 mt-1">Pattern typique sur les boutons</p>
            </div>
            <div class="p-6">
                <pre class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto text-sm"><code>{# Bouton avec glow au hover #}
&lt;button class="shadow-primary hover:shadow-primary-hover transition-shadow"&gt;
    Action
&lt;/button&gt;

{# Carte avec elevation subtile #}
&lt;div class="shadow-sm hover:shadow-md transition-shadow"&gt;
    Contenu
&lt;/div&gt;</code></pre>
            </div>
        </section>

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