/* ============================================================
   Icona/logo statico KitchenFlow — versione NON animata.

   Riusa gli STESSI tracciati della macro animata (kf_logo in
   templates/components/splash_logo.html): qui non ridisegniamo
   nulla, coloriamo soltanto. Un unico sorgente SVG, colore che
   segue il tema app (chiaro/scuro), niente più file dark/light/
   white separati da 4,5 MB.

   Palette identica allo splash (static/css/core/splash.css):
     --dla-c1  giacca + (via --dla-cj) manico/anello paletta
     --dla-c2  cucchiaio + lama/finale paletta
   ============================================================ */

.kf-icon {
    /* Tema chiaro: arancio bruciato + caffè su sabbia */
    --dla-c1: #c06018;
    --dla-c2: #3e2b1c;
    --dla-cj: #c06018;
    display: inline-block;
    line-height: 0;
    /* dimensione controllata dal chiamante via width/height inline;
       fallback di sicurezza se non passata */
    width: 96px;
    height: 96px;
}

[data-bs-theme="dark"] .kf-icon {
    /* Tema scuro: arancio brand + crema */
    --dla-c1: #f27d26;
    --dla-c2: #e8d2b6;
    --dla-cj: #f27d26;
}

.kf-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.kf-icon .dla-jacket-body { fill: var(--dla-c1); }
.kf-icon .dla-spatola-main { fill: var(--dla-c2); }
.kf-icon .dla-paletta-blade,
.kf-icon .dla-paletta-end { fill: var(--dla-c2); }
.kf-icon .dla-paletta-handle,
.kf-icon .dla-paletta-ring { fill: var(--dla-cj); }

/* Variante monocroma bianca — per logo su sfondo colorato/scuro
   (hero landing e demo), dove il bicolore non staccherebbe.
   Uso: {{ kf_icon('96px', mono='white') }} */
.kf-icon-mono-white .dla-jacket-body,
.kf-icon-mono-white .dla-spatola-main,
.kf-icon-mono-white .dla-paletta-blade,
.kf-icon-mono-white .dla-paletta-end,
.kf-icon-mono-white .dla-paletta-handle,
.kf-icon-mono-white .dla-paletta-ring { fill: #fff; }

/* Logo nel footer: responsive come il vecchio .footer-logo
   (usare con kf_icon('', 'kf-icon-footer'), senza size inline). */
.kf-icon-footer { width: 64px; height: 64px; }
@media (min-width: 768px) { .kf-icon-footer { width: 96px; height: 96px; } }