/* ============================================================
   TIMBALY — DESIGN TOKENS
   Unica fonte di verità per colore, tipografia, spazio, motion.
   CSS custom properties pure: nessuna dipendenza, funziona in
   Blazor WASM, in un artifact, in qualsiasi stack.

   REGOLA: nel codice si usano SOLO i token. Nessun valore
   esadecimale, nessun px arbitrario nei componenti.
   ============================================================ */

:root{

  /* ---------- COLORE: marca ---------- */
  /* Ottone. Colore delle corde dello strumento, accento unico del brand. */
  --tb-brass:            #A8792E;  /* NON testo. Bordi, barre, icone, display >=24px */
  --tb-brass-text:       #856021;  /* QUALSIASI testo <24px.  5.69:1 su bianco */
  --tb-brass-light:      #C99B45;  /* solo decorativo su fondo scuro */
  --tb-brass-wash:       #F0E4CE;  /* sfondo evidenziazione citazione */

  /* ---------- COLORE: neutri ---------- */
  --tb-petrol:           #0F2A2E;  /* testo primario, bottone primario. 12.35:1 su ground */
  --tb-petrol-soft:      #3B5E63;  /* testo secondario.                  5.79:1 su ground */
  --tb-grey:             #5E696B;  /* testo terziario, meta, timestamp.  4.63:1 su ground */
  --tb-grey-mute:        #8A9598;  /* NON testo. Icone decorative, disabled, divisori */

  --tb-ground:           #E5E9EA;  /* sfondo pagina */
  --tb-surface:          #FFFFFF;  /* card, pannelli, tabelle */
  --tb-surface-alt:      #F7F9F9;  /* footer di card, righe alternate, campi inerti */
  --tb-rule:             #CFD8D9;  /* bordi di contenitori e controlli */
  --tb-rule-soft:        #E9EEEE;  /* divisori interni alle card */

  /* ---------- COLORE: stati ---------- */
  /* Tre soli stati. Nessun "warning" ambra: collide con l'ottone del brand.
     Se serve un avviso non critico, usalo come danger attenuato + testo.  */
  --tb-ok:               #2A6349;  /* 7.05:1 su bianco */
  --tb-ok-wash:          #E4EFE9;
  --tb-danger:           #96302B;  /* 7.62:1 su bianco */
  --tb-danger-wash:      #F7E6E4;
  --tb-info:             #356070;  /* 6.87:1 su bianco */
  --tb-info-wash:        #E6EEF1;

  /* ---------- COLORE: canali ---------- */
  /* SOLO riempimenti grafici: barre, punti, aree. MAI testo — le etichette
     sono sempre --tb-petrol. Le luminanze sono distanziate di >0.05 così
     restano distinguibili in scala di grigi e per i daltonici.
     L'ordine è fisso e non cambia mai in nessuna schermata.              */
  --tb-ch-google:        #12333A;
  --tb-ch-chatgpt:       #B08234;
  --tb-ch-perplexity:    #4A8FA1;
  --tb-ch-gemini:        #6E4358;
  --tb-ch-maps:          #5F7136;

  /* ---------- TIPOGRAFIA: famiglie ---------- */
  /* Tre ruoli, mai sovrapposti. Vedi DESIGN.md per le regole d'uso. */
  --tb-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --tb-font-body:    "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tb-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TIPOGRAFIA: scala ---------- */
  /* Sei gradini per l'interfaccia. Non aggiungerne altri. */
  --tb-fs-xs:   11px;   /* solo mono: timestamp, unità, occhielli */
  --tb-fs-sm:   13px;   /* etichette, dati tabellari, caption */
  --tb-fs-md:   15px;   /* base interfaccia */
  --tb-fs-lg:   17px;   /* testo corrente lungo, lede */
  --tb-fs-xl:   21px;   /* titoli di sezione in-app */
  --tb-fs-2xl:  26px;   /* titolo di pagina in-app */
  /* Display: solo sito vetrina, mai in-app */
  --tb-fs-hero: clamp(2.1rem, 5.8vw, 3.85rem);
  --tb-fs-h2:   clamp(1.7rem, 4.2vw, 2.6rem);

  --tb-lh-tight: 1.08;  /* display */
  --tb-lh-snug:  1.35;  /* titoli in-app */
  --tb-lh-base:  1.6;   /* corpo */

  --tb-ls-display: -0.035em;
  --tb-ls-mono:     0.02em;
  --tb-ls-caps:     0.11em;  /* occhielli maiuscoli */

  /* ---------- SPAZIO ---------- */
  /* Base 4. Non usare valori fuori scala. */
  --tb-s-1:   4px;
  --tb-s-2:   8px;
  --tb-s-3:  12px;
  --tb-s-4:  16px;
  --tb-s-6:  24px;
  --tb-s-8:  32px;
  --tb-s-12: 48px;
  --tb-s-16: 64px;
  --tb-s-24: 96px;

  /* ---------- FORMA ---------- */
  /* Squadrato = identità. Non arrotondare oltre questi valori. */
  --tb-r-sm:   2px;   /* bottoni, input, select, chip */
  --tb-r-md:   4px;   /* card, pannelli, modali */
  --tb-r-full: 999px; /* SOLO indicatori a pillola e avatar */

  --tb-bw: 1px;       /* spessore bordo unico */

  /* ---------- ELEVAZIONE ---------- */
  /* Due livelli. Il resto si distingue col bordo, non con l'ombra. */
  --tb-sh-1: 0 1px 2px rgba(15,42,46,.06);
  --tb-sh-2: 0 3px 26px rgba(15,42,46,.08);

  /* ---------- MOTION ---------- */
  --tb-dur-fast: 120ms;
  --tb-dur:      180ms;
  --tb-dur-slow: 320ms;  /* solo barre di livello e conteggi */
  --tb-ease:     cubic-bezier(.25,.8,.30,1);

  /* ---------- LAYOUT ---------- */
  --tb-tap:      44px;    /* altezza minima di ogni target tattile */
  --tb-maxw:     1180px;  /* contenitore sito vetrina */
  --tb-maxw-app: 1440px;  /* contenitore applicazione */
  --tb-gutter:   24px;
  --tb-gutter-sm:18px;    /* sotto 520px */
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--tb-ground);
  color:var(--tb-petrol);
  font-family:var(--tb-font-body);
  font-weight:300;
  font-size:var(--tb-fs-md);
  line-height:var(--tb-lh-base);
  -webkit-text-size-adjust:100%;
}

/* Focus visibile obbligatorio. Non rimuovere, non sostituire con outline:none. */
:focus-visible{
  outline:2px solid var(--tb-brass);
  outline-offset:3px;
}

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

/* ============================================================
   PRIMITIVE — usare queste classi, non riscriverle nei componenti
   ============================================================ */

/* --- bottoni --- */
.tb-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--tb-s-2);
  min-height:var(--tb-tap);
  padding:0 var(--tb-s-6);
  border:var(--tb-bw) solid transparent;
  border-radius:var(--tb-r-sm);
  font-family:var(--tb-font-body);
  font-size:var(--tb-fs-md);
  font-weight:600;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--tb-dur) var(--tb-ease), border-color var(--tb-dur) var(--tb-ease);
  /* non fissare mai la larghezza: il tedesco cresce del 30% */
  width:auto; white-space:nowrap;
}
.tb-btn--primary{ background:var(--tb-petrol); color:var(--tb-ground); }
.tb-btn--primary:hover{ background:var(--tb-brass-text); }
.tb-btn--secondary{ background:transparent; color:var(--tb-petrol); border-color:var(--tb-rule); }
.tb-btn--secondary:hover{ border-color:var(--tb-petrol); }
.tb-btn--quiet{ background:transparent; color:var(--tb-petrol-soft); padding:0 var(--tb-s-3); font-weight:400; }
.tb-btn--quiet:hover{ color:var(--tb-petrol); }
.tb-btn--danger{ background:var(--tb-danger); color:#fff; }
.tb-btn[disabled],.tb-btn[aria-disabled="true"]{
  background:var(--tb-rule-soft); color:var(--tb-grey-mute);
  border-color:var(--tb-rule); cursor:not-allowed;
}

/* --- campi --- */
.tb-field{ display:flex; flex-direction:column; gap:var(--tb-s-2); }
.tb-label{ font-size:var(--tb-fs-sm); color:var(--tb-petrol-soft); font-weight:400; }
.tb-input,.tb-select,.tb-textarea{
  min-height:var(--tb-tap);
  padding:var(--tb-s-3);
  background:var(--tb-surface);
  border:var(--tb-bw) solid var(--tb-rule);
  border-radius:var(--tb-r-sm);
  font-family:var(--tb-font-body);
  font-size:var(--tb-fs-md);
  color:var(--tb-petrol);
  width:100%;
}
.tb-input:focus,.tb-select:focus,.tb-textarea:focus{
  outline:none; border-color:var(--tb-brass);
  box-shadow:0 0 0 3px rgba(168,121,46,.14);
}
.tb-hint{ font-size:var(--tb-fs-sm); color:var(--tb-grey); }
.tb-error{ font-size:var(--tb-fs-sm); color:var(--tb-danger); }

/* --- card --- */
.tb-card{
  background:var(--tb-surface);
  border:var(--tb-bw) solid var(--tb-rule);
  border-radius:var(--tb-r-md);
  box-shadow:var(--tb-sh-1);
}
.tb-card__head{ padding:var(--tb-s-4); border-bottom:var(--tb-bw) solid var(--tb-rule-soft); }
.tb-card__body{ padding:var(--tb-s-4); }
.tb-card__foot{ padding:var(--tb-s-3) var(--tb-s-4); border-top:var(--tb-bw) solid var(--tb-rule-soft); background:var(--tb-surface-alt); }

/* --- dati --- */
.tb-metric{
  font-family:var(--tb-font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:var(--tb-ls-mono);
}
.tb-eyebrow{
  font-family:var(--tb-font-mono);
  font-size:var(--tb-fs-xs);
  letter-spacing:var(--tb-ls-caps);
  text-transform:uppercase;
  color:var(--tb-brass-text);
}

/* --- badge di stato: colore + testo, mai colore da solo --- */
.tb-badge{
  display:inline-flex; align-items:center; gap:var(--tb-s-2);
  padding:var(--tb-s-1) var(--tb-s-2);
  border-radius:var(--tb-r-sm);
  font-size:var(--tb-fs-sm);
}
.tb-badge--ok{ background:var(--tb-ok-wash); color:var(--tb-ok); }
.tb-badge--danger{ background:var(--tb-danger-wash); color:var(--tb-danger); }
.tb-badge--info{ background:var(--tb-info-wash); color:var(--tb-info); }

/* --- barra di livello (presenza sul canale) --- */
.tb-bar{ position:relative; height:8px; background:var(--tb-rule-soft); border-radius:var(--tb-r-full); overflow:hidden; }
.tb-bar__fill{ position:absolute; inset:0 auto 0 0; width:0; background:var(--tb-brass); border-radius:var(--tb-r-full); transition:width var(--tb-dur-slow) var(--tb-ease); }

/* --- citazione: il momento di valore del prodotto --- */
.tb-cite{
  background:var(--tb-brass-wash);
  border-bottom:2px solid var(--tb-brass);
  border-radius:var(--tb-r-sm) var(--tb-r-sm) 0 0;
  padding:1px 4px;
}
.tb-cite__ref{ font-family:var(--tb-font-mono); font-size:10px; color:var(--tb-brass-text); vertical-align:super; }