@import 'tailwindcss';

/**
 * Système visuel.
 *
 * Deux contraintes gouvernent ces choix, et aucune n'est esthétique :
 *
 *  1. Une traductrice passe deux heures d'affilée sur cet écran. Contraste
 *     franc mais fonds jamais purement blancs, aucune animation gratuite,
 *     aucune couleur saturée en aplat large.
 *
 *  2. Le statut d'une traduction doit se lire sans effort de mémoire. Cinq
 *     couleurs, toujours les mêmes, et le rouge réservé au seul état qui
 *     désigne un bug en production.
 */
@theme {
    --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

    /* Gris légèrement bleutés : moins clinique qu'un gris neutre sur de longues sessions. */
    --color-ink-50: #f8fafc;
    --color-ink-100: #f1f5f9;
    --color-ink-200: #e2e8f0;
    --color-ink-300: #cbd5e1;
    --color-ink-400: #94a3b8;
    --color-ink-500: #64748b;
    --color-ink-600: #475569;
    --color-ink-700: #334155;
    --color-ink-800: #1e293b;
    --color-ink-900: #0f172a;

    --color-accent: #4f46e5;
    --color-accent-soft: #eef2ff;

    /* Statuts — voir docs/01-architecture-proposal.md §5.5 */
    --color-status-untranslated: #94a3b8;
    --color-status-draft: #d97706;
    --color-status-needs-review: #dc2626;
    --color-status-translated: #2563eb;
    --color-status-reviewed: #059669;
}

html,
body,
#root {
    height: 100%;
}

body {
    background: var(--color-ink-100);
    color: var(--color-ink-800);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

/* Les compteurs changent en permanence : sans chasse fixe, ils tressautent. */
.tabular {
    font-variant-numeric: tabular-nums;
}

/* Anneau de focus visible partout : l'outil se pilote au clavier. */
*:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
    border-radius: 2px;
}

/* Barres de défilement discrètes — trois panneaux défilent simultanément. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-ink-300) transparent;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}