/* PROD — Ordini Estero: le utility di colore, sui token
 *
 * La pagina e' costruita con le utility del CDN Tailwind: 622 fra bg-white,
 * text-slate-700, border-slate-200 e i loro parenti. Sono valori chiari fissi,
 * quindi col tema scuro la pagina restava chiara mentre tutto il resto
 * dell'app girava — leggibile, ma un'isola.
 *
 * Qui quelle stesse classi vengono ridefinite in termini di token, scopate su
 * body.page-ordini-estero. Non si tocca una riga di markup: 622 stringhe da
 * riscrivere a mano in un modulo da 4000 righe sono 622 occasioni di sbagliare,
 * e il difetto e' nei colori, non nella struttura.
 *
 * Perche' funziona senza !important: le utility del CDN hanno specificita'
 * (0,1,0), queste (0,2,1). Vincono per specificita', non per ordine di
 * caricamento — che col CDN, che inietta a runtime, non sarebbe affidabile.
 *
 * Il blu non torna blu. La palette dell'app non ne ha piu' da quando e'
 * passata a FORMA (vedi il guardrail CSS.9): i blu di questa pagina sono
 * l'ultimo residuo, e diventano l'accento come dappertutto.
 *
 * I documenti di stampa non passano di qui: hanno il proprio <style> dentro la
 * finestra che aprono, e nessuna utility Tailwind.
 */

/* ── Superfici neutre ───────────────────────────────────────── */

body.page-ordini-estero .bg-white {
    background-color: var(--card-surface);
}

body.page-ordini-estero .bg-slate-50,
body.page-ordini-estero .bg-slate-100,
body.page-ordini-estero .bg-gray-100 {
    background-color: var(--panel-mid);
}

body.page-ordini-estero .bg-slate-200 {
    background-color: var(--panel-soft);
}

body.page-ordini-estero .bg-slate-300 {
    background-color: color-mix(in srgb, var(--text-strong) 16%, transparent);
}

body.page-ordini-estero .bg-slate-400 {
    background-color: color-mix(in srgb, var(--text-strong) 28%, transparent);
}

/* Il tasto scuro: inchiostro pieno, e la scritta che sta sopra prende il
   colore della pagina. Cosi' si inverte col tema invece di sparirci dentro —
   in scuro l'inchiostro e' quasi bianco, e un testo bianco non si vedrebbe. */
body.page-ordini-estero .bg-slate-800,
body.page-ordini-estero .bg-slate-900 {
    background-color: var(--text-strong);
}

body.page-ordini-estero .bg-slate-800.text-white,
body.page-ordini-estero .bg-slate-900.text-white,
body.page-ordini-estero .bg-slate-800 .text-white,
body.page-ordini-estero .bg-slate-900 .text-white {
    color: var(--panel-bg);
}

/* ── Inchiostri neutri ──────────────────────────────────────── */

body.page-ordini-estero .text-slate-900,
body.page-ordini-estero .text-slate-800,
body.page-ordini-estero .text-black {
    color: var(--text-strong);
}

body.page-ordini-estero .text-slate-700,
body.page-ordini-estero .text-slate-600 {
    color: var(--text-secondary);
}

body.page-ordini-estero .text-slate-500,
body.page-ordini-estero .text-slate-400,
body.page-ordini-estero .text-slate-300 {
    color: var(--text-tertiary);
}

body.page-ordini-estero .text-slate-100 {
    color: var(--panel-bg);
}

/* ── Fili ───────────────────────────────────────────────────── */

body.page-ordini-estero .border-slate-200,
body.page-ordini-estero .border-slate-300,
body.page-ordini-estero .border-gray-300 {
    border-color: var(--panel-border);
}

body.page-ordini-estero .border-slate-100 {
    border-color: color-mix(in srgb, var(--panel-border) 65%, transparent);
}

body.page-ordini-estero .border-slate-950 {
    border-color: var(--text-strong);
}

body.page-ordini-estero .divide-slate-100 > * + * {
    border-color: color-mix(in srgb, var(--panel-border) 65%, transparent);
}

body.page-ordini-estero .decoration-slate-300 {
    text-decoration-color: var(--text-tertiary);
}

/* ── Il blu diventa l'accento ───────────────────────────────── */

body.page-ordini-estero .bg-blue-50,
body.page-ordini-estero .bg-indigo-50,
body.page-ordini-estero .bg-sky-100,
body.page-ordini-estero .bg-indigo-100 {
    background-color: color-mix(in srgb, var(--accent) 12%, transparent);
}

body.page-ordini-estero .bg-blue-100 {
    background-color: color-mix(in srgb, var(--accent) 20%, transparent);
}

body.page-ordini-estero .bg-blue-500,
body.page-ordini-estero .bg-blue-600,
body.page-ordini-estero .bg-blue-700 {
    background-color: var(--accent);
}

body.page-ordini-estero .bg-blue-500.text-white,
body.page-ordini-estero .bg-blue-600.text-white,
body.page-ordini-estero .bg-blue-700.text-white,
body.page-ordini-estero .bg-blue-600 .text-white,
body.page-ordini-estero .bg-blue-700 .text-white {
    color: var(--accent-contrast);
}

body.page-ordini-estero .text-blue-500,
body.page-ordini-estero .text-blue-600,
body.page-ordini-estero .text-blue-700,
body.page-ordini-estero .text-blue-800,
body.page-ordini-estero .text-indigo-700,
body.page-ordini-estero .text-indigo-800,
body.page-ordini-estero .text-sky-800 {
    color: color-mix(in srgb, var(--accent) 62%, var(--text-strong));
}

body.page-ordini-estero .border-blue-200,
body.page-ordini-estero .border-blue-300,
body.page-ordini-estero .border-sky-200,
body.page-ordini-estero .border-indigo-100,
body.page-ordini-estero .border-indigo-200 {
    border-color: color-mix(in srgb, var(--accent) 34%, transparent);
}

body.page-ordini-estero .border-blue-500 {
    border-color: var(--accent);
}

body.page-ordini-estero .ring-blue-500 {
    --tw-ring-color: var(--accent);
}

body.page-ordini-estero .ring-blue-100 {
    --tw-ring-color: color-mix(in srgb, var(--accent) 22%, transparent);
}

body.page-ordini-estero .from-blue-50 {
    --tw-gradient-from: color-mix(in srgb, var(--accent) 12%, transparent);
}

body.page-ordini-estero .to-white {
    --tw-gradient-to: var(--card-surface);
}

/* ── Attesa: ambra e giallo ─────────────────────────────────── */

body.page-ordini-estero .bg-amber-50,
body.page-ordini-estero .bg-orange-50,
body.page-ordini-estero .bg-yellow-100 {
    background-color: color-mix(in srgb, var(--warning) 12%, transparent);
}

body.page-ordini-estero .bg-amber-100 {
    background-color: color-mix(in srgb, var(--warning) 20%, transparent);
}

body.page-ordini-estero .bg-amber-400,
body.page-ordini-estero .bg-amber-500 {
    background-color: var(--warning);
}

body.page-ordini-estero .text-amber-600,
body.page-ordini-estero .text-amber-700,
body.page-ordini-estero .text-amber-800,
body.page-ordini-estero .text-yellow-800,
body.page-ordini-estero .text-orange-700 {
    color: color-mix(in srgb, var(--warning) 62%, var(--text-strong));
}

body.page-ordini-estero .border-amber-100,
body.page-ordini-estero .border-amber-200,
body.page-ordini-estero .border-orange-200,
body.page-ordini-estero .border-yellow-300 {
    border-color: color-mix(in srgb, var(--warning) 34%, transparent);
}

/* ── Fatto: verde ───────────────────────────────────────────── */

body.page-ordini-estero .bg-emerald-50,
body.page-ordini-estero .bg-green-100 {
    background-color: color-mix(in srgb, var(--success) 12%, transparent);
}

body.page-ordini-estero .bg-emerald-100 {
    background-color: color-mix(in srgb, var(--success) 20%, transparent);
}

body.page-ordini-estero .bg-emerald-500,
body.page-ordini-estero .bg-emerald-600,
body.page-ordini-estero .bg-emerald-700 {
    background-color: var(--success);
}

body.page-ordini-estero .text-emerald-700,
body.page-ordini-estero .text-emerald-800,
body.page-ordini-estero .text-green-800 {
    color: color-mix(in srgb, var(--success) 62%, var(--text-strong));
}

body.page-ordini-estero .border-emerald-100,
body.page-ordini-estero .border-emerald-200,
body.page-ordini-estero .border-green-300 {
    border-color: color-mix(in srgb, var(--success) 34%, transparent);
}

/* ── Guai: rosso ────────────────────────────────────────────── */

body.page-ordini-estero .bg-rose-50,
body.page-ordini-estero .bg-red-50 {
    background-color: color-mix(in srgb, var(--error) 12%, transparent);
}

body.page-ordini-estero .bg-rose-100,
body.page-ordini-estero .bg-red-100 {
    background-color: color-mix(in srgb, var(--error) 20%, transparent);
}

body.page-ordini-estero .bg-rose-500 {
    background-color: var(--error);
}

body.page-ordini-estero .text-rose-700,
body.page-ordini-estero .text-rose-800,
body.page-ordini-estero .text-red-600,
body.page-ordini-estero .text-red-800 {
    color: color-mix(in srgb, var(--error) 70%, var(--text-strong));
}

body.page-ordini-estero .border-rose-200,
body.page-ordini-estero .border-red-200 {
    border-color: color-mix(in srgb, var(--error) 34%, transparent);
}