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

{% block title %}Typography Tokens - 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">Typography</h1>
                    </div>
                    <p class="text-sm text-gray-500">Tokens typographiques — polices, tailles, poids</p>
                </div>
            </div>
        </div>
    </header>

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

        {# ===== FAMILLES DE POLICES ===== #}
        <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">Familles de polices</h2>
                <p class="text-sm text-gray-500 mt-1">2 polices principales depuis variables.css</p>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="p-6 border border-gray-200 rounded-xl">
                    <div class="flex items-center gap-2 mb-4">
                        <code class="text-xs bg-gray-100 px-2 py-1 rounded">font-primary</code>
                        <span class="text-xs text-gray-400">--font-primary</span>
                    </div>
                    <p class="font-primary text-4xl font-bold text-gray-900 mb-2">Poppins</p>
                    <p class="font-primary text-2xl text-gray-600 mb-2">Aa Bb Cc 123</p>
                    <p class="font-primary text-base text-gray-500">Utilisee pour les titres H1–H4, les labels d'elements UI, les headings.</p>
                    <div class="mt-4 p-3 bg-gray-50 rounded-lg">
                        <code class="text-xs text-gray-600">class="font-primary"</code>
                    </div>
                </div>
                <div class="p-6 border border-gray-200 rounded-xl">
                    <div class="flex items-center gap-2 mb-4">
                        <code class="text-xs bg-gray-100 px-2 py-1 rounded">font-secondary</code>
                        <span class="text-xs text-gray-400">--font-secondary</span>
                    </div>
                    <p class="font-secondary text-4xl font-bold text-gray-900 mb-2">Roboto</p>
                    <p class="font-secondary text-2xl text-gray-600 mb-2">Aa Bb Cc 123</p>
                    <p class="font-secondary text-base text-gray-500">Utilisee pour le corps de texte, les descriptions, les labels de formulaires.</p>
                    <div class="mt-4 p-3 bg-gray-50 rounded-lg">
                        <code class="text-xs text-gray-600">class="font-secondary"</code>
                    </div>
                </div>
            </div>
        </section>

        {# ===== ECHELLE DE TAILLES ===== #}
        <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">Echelle de tailles — Tailwind natif</h2>
                <p class="text-sm text-gray-500 mt-1">Tailles utilisees dans le projet</p>
            </div>
            <div class="p-6 space-y-4">
                <div class="flex items-baseline gap-4 py-3 border-b border-gray-100">
                    <span class="text-xs text-gray-400 w-16 shrink-0">text-xs</span>
                    <span class="text-xs text-gray-900">12px — Labels, badges, captions, notes techniques</span>
                </div>
                <div class="flex items-baseline gap-4 py-3 border-b border-gray-100">
                    <span class="text-xs text-gray-400 w-16 shrink-0">text-sm</span>
                    <span class="text-sm text-gray-900">14px — Corps de texte secondaire, descriptions de listes</span>
                </div>
                <div class="flex items-baseline gap-4 py-3 border-b border-gray-100">
                    <span class="text-xs text-gray-400 w-16 shrink-0">text-base</span>
                    <span class="text-base text-gray-900">16px — Corps de texte principal, paragraphes</span>
                </div>
                <div class="flex items-baseline gap-4 py-3 border-b border-gray-100">
                    <span class="text-xs text-gray-400 w-16 shrink-0">text-lg</span>
                    <span class="text-lg text-gray-900">18px — Sous-titres de sections, introductions</span>
                </div>
                <div class="flex items-baseline gap-4 py-3 border-b border-gray-100">
                    <span class="text-xs text-gray-400 w-16 shrink-0">text-xl</span>
                    <span class="text-xl text-gray-900">20px — Titres de cartes, headings secondaires</span>
                </div>
                <div class="flex items-baseline gap-4 py-3 border-b border-gray-100">
                    <span class="text-xs text-gray-400 w-16 shrink-0">text-2xl</span>
                    <span class="text-2xl font-semibold text-gray-900">24px — H3, titres de sections</span>
                </div>
                <div class="flex items-baseline gap-4 py-3 border-b border-gray-100">
                    <span class="text-xs text-gray-400 w-16 shrink-0">text-3xl</span>
                    <span class="text-3xl font-bold text-gray-900">30px — H2, sous-titres de page</span>
                </div>
                <div class="flex items-baseline gap-4 py-3 border-b border-gray-100">
                    <span class="text-xs text-gray-400 w-16 shrink-0">text-4xl</span>
                    <span class="text-4xl font-bold text-gray-900">36px — H1 medium</span>
                </div>
                <div class="flex items-baseline gap-4 py-3">
                    <span class="text-xs text-gray-400 w-16 shrink-0">text-5xl</span>
                    <span class="text-5xl font-bold text-gray-900">48px — H1 large, landing heroes</span>
                </div>
            </div>
        </section>

        {# ===== POIDS ===== #}
        <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">Poids de police</h2>
                <p class="text-sm text-gray-500 mt-1">Font weights utilises</p>
            </div>
            <div class="p-6 grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="p-4 border border-gray-200 rounded-lg text-center">
                    <p class="font-normal text-2xl text-gray-900 mb-2">Aa</p>
                    <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">font-normal</code>
                    <p class="text-xs text-gray-400 mt-1">400</p>
                </div>
                <div class="p-4 border border-gray-200 rounded-lg text-center">
                    <p class="font-medium text-2xl text-gray-900 mb-2">Aa</p>
                    <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">font-medium</code>
                    <p class="text-xs text-gray-400 mt-1">500</p>
                </div>
                <div class="p-4 border border-gray-200 rounded-lg text-center">
                    <p class="font-semibold text-2xl text-gray-900 mb-2">Aa</p>
                    <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">font-semibold</code>
                    <p class="text-xs text-gray-400 mt-1">600</p>
                </div>
                <div class="p-4 border border-gray-200 rounded-lg text-center">
                    <p class="font-bold text-2xl text-gray-900 mb-2">Aa</p>
                    <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">font-bold</code>
                    <p class="text-xs text-gray-400 mt-1">700</p>
                </div>
                <div class="p-4 border border-gray-200 rounded-lg text-center col-span-2 md:col-span-1">
                    <p class="font-extrabold text-2xl text-gray-900 mb-2">Aa</p>
                    <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded">font-extrabold</code>
                    <p class="text-xs text-gray-400 mt-1">800 — Chiffres social proof</p>
                </div>
            </div>
        </section>

        {# ===== INTERLIGNAGE ===== #}
        <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">Interlignage</h2>
                <p class="text-sm text-gray-500 mt-1">Line height recommandes</p>
            </div>
            <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="p-4 border border-gray-200 rounded-lg">
                    <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded block mb-3">leading-tight (1.25)</code>
                    <p class="leading-tight text-gray-900">Titres et headings. Le texte est dense et impactant. Ideal pour les gros titres de sections.</p>
                </div>
                <div class="p-4 border border-gray-200 rounded-lg">
                    <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded block mb-3">leading-normal (1.5)</code>
                    <p class="leading-normal text-gray-900">Corps de texte standard. Bonne lisibilite pour les elements courts comme les labels.</p>
                </div>
                <div class="p-4 border border-gray-200 rounded-lg">
                    <code class="text-xs bg-gray-100 px-1.5 py-0.5 rounded block mb-3">leading-relaxed (1.625)</code>
                    <p class="leading-relaxed text-gray-900">Paragraphes longs et descriptions. Favorise la lisibilite pour les textes de plus de 2 lignes.</p>
                </div>
            </div>
        </section>

        {# ===== TRACKING ===== #}
        <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">Espacement entre lettres</h2>
                <p class="text-sm text-gray-500 mt-1">Letter spacing — tracking</p>
            </div>
            <div class="p-6 space-y-4">
                <div class="py-3 border-b border-gray-100">
                    <p class="tracking-tight text-xl font-bold text-gray-900 mb-1">TRACKING-TIGHT — Gros titres</p>
                    <code class="text-xs text-gray-400">tracking-tight (-0.025em)</code>
                </div>
                <div class="py-3 border-b border-gray-100">
                    <p class="tracking-normal text-xl font-bold text-gray-900 mb-1">TRACKING-NORMAL — Corps standard</p>
                    <code class="text-xs text-gray-400">tracking-normal (0)</code>
                </div>
                <div class="py-3 border-b border-gray-100">
                    <p class="tracking-wide text-sm font-bold text-primary uppercase mb-1">TRACKING-WIDE — Eyebrow labels</p>
                    <code class="text-xs text-gray-400">tracking-wide (0.025em)</code>
                </div>
                <div class="py-3">
                    <p class="tracking-widest text-xs font-bold text-primary uppercase mb-1">TRACKING-WIDEST — Mono labels</p>
                    <code class="text-xs text-gray-400">tracking-widest / tracking-[3px] (0.1em)</code>
                </div>
            </div>
        </section>

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