/* =====================================================================
   dnd.css — i token del design system Dragondoro.

   Un posto solo. Le due applicazioni (pubblico e interno) leggono
   questo file e nessun altro: se un colore del brand cambia, cambia
   qui e vale ovunque.

   Deriva da DESIGNSYSTEMDRAGONDORO.md. Le regole che vi stanno dentro
   valgono anche per chi scrive CSS nuovo:
     - nessun colore fuori dai token
     - spaziature multiple di 8
     - ogni stato ha un colore E un testo
     - contrasto minimo 4.5:1
   ===================================================================== */


/* ---------------------------------------------------------------------
   Il font si imbarca, non si carica da CDN.

   La vetrina gira su uno schermo esposto in negozio: se quel computer
   perde la connessione, un font da CDN non arriva e l'insegna cambia
   faccia. Finche' Supreme-Variable.ttf non e' in web/static/font/,
   il browser scende da solo sul fallback di sistema: la pagina
   funziona, ma non e' ancora quella giusta.
   --------------------------------------------------------------------- */

@font-face{
  font-family:'Supreme';
  src:url('/static/font/Supreme-Variable.ttf') format('truetype-variations');
  font-weight:300 800;
  font-display:swap;
}


:root{
  /* --- Palette brand (ufficiale, non modificabile) --- */
  --dnd-gold:        #E5B900;
  --dnd-gold-deep:   #C9A84C;
  --dnd-cream:       #F5F2E8;
  --dnd-stone:       #7D7D7D;
  --dnd-graphite:    #3A3A3A;
  --dnd-cerulean:    #337CA0;

  /* --- Superfici, tema scuro (il default dell'app) --- */
  --bg:              #161616;
  --surface:         #1F1F1F;
  --surface-raised:  #2A2A2A;
  --border:          rgba(255,255,255,.10);
  --border-strong:   rgba(255,255,255,.18);

  /* --- Testo --- */
  --text:            #FFFFFF;
  --text-muted:      rgba(255,255,255,.70);
  --text-faint:      rgba(255,255,255,.45);

  /* --- Stati semantici --- */
  --ok:              #3E9C5A;
  --ok-bg:           rgba(62,156,90,.14);
  --warn:            #E5B900;
  --warn-bg:         rgba(229,185,0,.14);
  --danger:          #D64545;
  --danger-bg:       rgba(214,69,69,.14);
  --info:            #337CA0;
  --info-bg:         rgba(51,124,160,.14);
  --idle:            #7D7D7D;
  --idle-bg:         rgba(125,125,125,.14);

  /* --- Serie grafici, in quest'ordine --- */
  --chart-1: #E5B900;
  --chart-2: #337CA0;
  --chart-3: #3E9C5A;
  --chart-4: #C9A84C;
  --chart-5: #7D7D7D;
  --chart-grid: rgba(255,255,255,.08);

  --font: 'Supreme','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --shadow: 0 12px 32px rgba(0,0,0,.35);
}

/* Tema chiaro — alternativa, non default */
[data-theme="light"]{
  --bg:             var(--dnd-cream);
  --surface:        #FFFFFF;
  --surface-raised: #FFF7EC;
  --border:         rgba(0,0,0,.08);
  --border-strong:  rgba(0,0,0,.16);
  --text:           #1F1309;
  --text-muted:     #4B3623;
  --text-faint:     var(--dnd-stone);
  --chart-grid:     rgba(0,0,0,.08);
}


/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.5;
  font-weight:400;
}

h1,h2,h3{margin:0;font-weight:700}
h1{font-size:28px;line-height:1.15}
h2{font-size:22px;line-height:1.2}
h3{font-size:17px;font-weight:500;line-height:1.3}

p{margin:0}

/* I numeri non devono ballare quando cambiano */
.numerico{font-variant-numeric:tabular-nums}

.contenitore{
  max-width:1170px;
  margin:0 auto;
  padding:0 24px;
}
@media (max-width:480px){
  .contenitore{padding:0 16px}
}

/* Focus visibile su tutto cio' che si naviga da tastiera */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--dnd-gold);
  outline-offset:2px;
}


/* ---------------------------------------------------------------------
   Etichetta / eyebrow
   --------------------------------------------------------------------- */

.etichetta{
  font-size:12px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-faint);
}


/* ---------------------------------------------------------------------
   Badge di stato — sempre pallino E testo, mai solo colore
   --------------------------------------------------------------------- */

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:var(--r-pill);
  padding:4px 10px;
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
}
.badge::before{
  content:'';
  width:8px;height:8px;
  border-radius:50%;
  background:currentColor;
  flex:none;
}

.badge-ok{background:var(--ok-bg);color:var(--ok)}
.badge-warn{background:var(--warn-bg);color:var(--warn)}
.badge-danger{background:var(--danger-bg);color:var(--danger)}
.badge-info{background:var(--info-bg);color:var(--info)}
.badge-idle{background:var(--idle-bg);color:var(--idle)}


/* ---------------------------------------------------------------------
   Card
   --------------------------------------------------------------------- */

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:24px;
}


/* ---------------------------------------------------------------------
   Bottoni
   --------------------------------------------------------------------- */

.btn{
  font-family:var(--font);
  font-weight:800;
  font-size:15px;
  border-radius:var(--r-md);
  padding:12px 24px;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  transition:filter .2s ease;
}
.btn-primary{background:var(--dnd-gold);color:var(--dnd-graphite)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border-strong)}
.btn-secondary:hover{background:var(--surface-raised)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}


@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}