/* ---------------------------------------------------------------
   Personalizzazione grafica - brand Elvezia.
   Caricato DOPO il CSS originale: ridefinisce solo le variabili di
   tema, senza toccare il bundle. Per tornare all'originale basta
   togliere il <link> a questo file in index.html.

   Colori ufficiali ricavati dal logo:
     arancio  #ff5a1e
     antracite #2d2a2b
   --------------------------------------------------------------- */

:root {
  --brand-orange: #ff5a1e;
  --brand-ink: #2d2a2b;
  --brand-orange-h: 38; /* tonalita' dell'arancio, per i toni chiari */
}

:root {
  /* --- superfici (bianco leggermente caldo) --- */
  --color-background: oklch(98.5% 0.004 60);
  --color-card: oklch(100% 0 0);
  --color-muted: oklch(96.5% 0.008 60);
  --color-border: oklch(89% 0.009 60);
  --color-input: oklch(86% 0.012 60);

  /* --- testo --- */
  --color-foreground: var(--brand-ink);
  --color-muted-foreground: oklch(48% 0.012 50);

  /* --- colore principale: antracite del logotipo ---
     L'arancio sui bottoni darebbe un contrasto di circa 3:1 con il
     bianco, sotto la soglia WCAG AA per il testo: resta quindi
     l'antracite, e l'arancio marca focus, badge e dettagli. */
  --color-primary: var(--brand-ink);
  --color-primary-foreground: oklch(99% 0.004 60);
  --color-ring: var(--brand-orange);

  /* --- toni secondari e accento: famiglia arancio --- */
  --color-secondary: oklch(94% 0.045 var(--brand-orange-h));
  --color-secondary-foreground: oklch(38% 0.11 var(--brand-orange-h));
  --color-accent: oklch(92% 0.075 var(--brand-orange-h));

  /* --- stati: il rosso d'errore resta distinto dall'arancio brand --- */
  --color-destructive: oklch(55% 0.21 27);
  --color-destructive-foreground: oklch(99% 0.015 27);
  --color-success: oklch(60% 0.13 150);
  --color-warning: oklch(72% 0.15 70);
}

/* Filetto di brand in cima alla pagina */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 50;
  background: linear-gradient(
    90deg,
    var(--brand-orange) 0%,
    var(--brand-orange) 22%,
    var(--brand-ink) 22%,
    var(--brand-ink) 100%
  );
}

/* Intestazione personalizzata (vedi index.html) */
.brand-bar {
  max-width: 48rem;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 0;
}

.brand-bar img {
  height: 30px;
  width: auto;
  display: block;
}

/* Riga di chiusura personalizzata (vedi index.html) */
.brand-footer {
  max-width: 48rem;
  margin: 0 auto;
  padding: 0.5rem 1.5rem 2.5rem;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: oklch(48% 0.012 50);
}

.brand-footer strong {
  font-weight: 600;
  color: var(--brand-ink);
}

@media (prefers-color-scheme: dark) {
  /* L'app originale e' pensata per il tema chiaro: lo manteniamo
     anche quando il sistema e' in scuro, per non rompere i contrasti. */
  :root {
    color-scheme: light;
  }
}