/* ═════════════════════════════════════════════════════════════════════════════
   JOBLOG — BRAND TOKENS (stile "JobLog Logistica", da presentazione Ussolutions)
   ─────────────────────────────────────────────────────────────────────────────
   Palette ufficiale estratta dalla presentazione commerciale (Luglio 2026):
     Blu primario  #2F5597   Giallo brand  #F5C000   Neutri slate 50→900
   Riferimento unico per il restyle: le pagine devono mappare i propri token
   locali (--brand, --jl-brand, ecc.) su questi valori.

   Import nelle pagine:
     <link rel="stylesheet" href="{{ static_version('css/brand.css') }}">
   ═════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── BLU PRIMARIO (navy corporate) ─────────────────────────────── */
  --blg-blue:          #2F5597;   /* primario: header, titoli sezione, CTA */
  --blg-blue-dark:     #24437D;   /* gradient scuro / pressed */
  --blg-blue-darker:   #1B3462;   /* contrasto forte, sfondi hero */
  --blg-blue-light:    #4A6FB5;   /* hover / accent chiaro */
  --blg-blue-soft:     rgba(47, 85, 151, 0.12);   /* tint superfici */
  --blg-blue-glow:     rgba(47, 85, 151, 0.30);

  /* ── GIALLO BRAND ──────────────────────────────────────────────── */
  --blg-yellow:        #F5C000;   /* occhielli, bordini card, logo "Log" */
  --blg-yellow-dark:   #D9A900;   /* hover / testo giallo su chiaro */
  --blg-yellow-soft:   #FFF7E0;   /* sfondo tint giallo */
  --blg-yellow-glow:   rgba(245, 192, 0, 0.35);

  /* ── NEUTRI SLATE (dal PDF) ────────────────────────────────────── */
  --blg-slate-900:     #0F172A;
  --blg-slate-800:     #1F2937;
  --blg-slate-600:     #475569;   /* body text */
  --blg-slate-500:     #51607A;
  --blg-slate-400:     #94A3B8;   /* muted */
  --blg-slate-300:     #CBD5E1;
  --blg-slate-200:     #E2E8F0;   /* bordi */
  --blg-slate-150:     #E6EBF2;   /* riempimenti */
  --blg-slate-100:     #EEF2F7;   /* sfondo pagina */
  --blg-slate-50:      #F8FAFC;   /* card / superfici */

  /* ── GRADIENT E COMBINAZIONI RICORRENTI ────────────────────────── */
  --blg-header-grad:   var(--blg-blue);
  --blg-hero-grad:     linear-gradient(160deg, var(--blg-blue) 0%, var(--blg-blue-darker) 100%);

  /* ── SEMANTICI (invariati rispetto all'app, qui per riferimento) ─ */
  --blg-success:       #10b981;
  --blg-warning:       #f59e0b;
  --blg-danger:        #ef4444;
  --blg-info:          #3b82f6;
}

/* ─────────────────────────────────────────────────────────────────
   UTILITY CONDIVISE — pattern grafici della presentazione
   ───────────────────────────────────────────────────────────────── */

/* Occhiello giallo maiuscolo sopra i titoli (es. "PANORAMICA") */
.blg-kicker {
  color: var(--blg-yellow);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Banda header blu con filetto giallo inferiore */
.blg-header-band {
  background: var(--blg-header-grad);
  border-bottom: 3px solid var(--blg-yellow);
  color: #fff;
}

/* Card con bordino giallo a sinistra (card "di valore" del PDF) */
.blg-card-accent {
  background: var(--blg-slate-50);
  border: 1px solid var(--blg-slate-200);
  border-left: 4px solid var(--blg-yellow);
  border-radius: 10px;
}

/* Logo bicolore: <span class="blg-logo">Job<b>Log</b></span> */
.blg-logo { color: #fff; font-weight: 800; letter-spacing: -0.01em; }
.blg-logo b, .blg-logo .blg-logo-accent { color: var(--blg-yellow); font-weight: 800; }
/* Variante su sfondo chiaro: "Job" in blu, "Log" in giallo */
.blg-logo--on-light { color: var(--blg-blue); }