/* ============================================================
   TOKENS.CSS — Design tokens BioVitalAge
   ------------------------------------------------------------
   Unico punto di verità per colori, tipografia, spaziature,
   raggi, ombre. Caricato via @import in Componenti.css e
   responsive.css, quindi disponibile in tutte le pagine.

   Architettura a 3 livelli:
     1. PRIMITIVI  — palette grezza (--c-*)
     2. SEMANTICI  — ruolo (--color-primary, --text-1, ...)
     3. SCALE      — spacing / font-size / radius / shadow / z

   NB: non ridefinisce le variabili già presenti in
   Componenti.css :root (quelle vincono per ordine di cascata).
   Aggiunge solo nuovi token canonici da usare nelle migrazioni.
   ============================================================ */

:root {
  /* ---------- 1. PRIMITIVI ---------- */

  /* Verde petrolio (teal) — palette brand dei referti.
     Portante della struttura e dell'interazione. */
  --c-teal-900: #0c302e;  /* inizio gradiente / più scuro */
  --c-teal-800: #0f3b38;  /* PRIMARIO struttura: header tabelle, H2, fasce, bordi totali */
  --c-teal-700: #16524d;  /* PRIMARIO interattivo: bottoni, link, stato attivo */
  --c-teal-600: #1d6b62;  /* strong / hover / fine gradiente copertina */
  --c-teal-200: #cbd6d2;  /* verde tenue complementare (bordi forti) */
  --c-teal-150: #e8eeec;  /* bordi inferiori righe tabella */
  --c-teal-100: #e4ebe8;  /* bordo intro */
  --c-teal-50:  #eef3f1;  /* superfici soft / stato attivo */
  --c-teal-25:  #f6f9f8;  /* zebra tabelle / box note */
  /* Testi su sfondo teal scuro (copertina/navbar) */
  --c-on-teal-1: #cfe1dd; /* lead / descrizione */
  --c-on-teal-2: #bcd2cd; /* sottotitoli / footer copertina */

  /* Oro — accento decorativo (non interattivo: contrasto basso su bianco) */
  --c-gold-500: #cda75e;  /* accento principale: linee, badge, bordi nota, logo */
  --c-gold-700: #a07d33;  /* oro scuro: annotazioni piccole, stime */
  --c-gold-200: #e7d9b5;  /* oro chiaro decorativo */

  /* Inchiostri caldi (testo su chiaro) */
  --c-ink-900: #2b3330;   /* testo principale */
  --c-ink-700: #44504b;   /* paragrafi */
  --c-ink-600: #54615c;   /* secondario / didascalie */
  --c-ink-400: #7c8884;   /* terziario / sottotitoli */
  --c-ink-300: #9aa5a0;   /* footer / numerazione pagine */

  /* Alias retro-compatibili: i vecchi nomi 'purple/cyan' ora puntano al teal/oro
     così i riferimenti var(--c-purple-*) esistenti continuano a funzionare. */
  --c-purple-700: var(--c-teal-900);
  --c-purple-600: var(--c-teal-800);
  --c-purple-500: var(--c-teal-600);
  --c-purple-400: var(--c-teal-700);
  --c-purple-100: var(--c-teal-50);
  --c-purple-50:  var(--c-teal-25);
  --c-cyan-400:   var(--c-gold-500);

  /* Blu brand RIMOSSO: i nomi --c-blue-* ora puntano al teal (palette unica).
     Niente blu nella piattaforma. */
  --c-blue-900: var(--c-teal-900);
  --c-blue-800: var(--c-teal-800);
  --c-blue-500: var(--c-teal-600);
  --c-blue-400: var(--c-teal-700);

  /* Verde (consolida #1a8a5c / #16a34a / #2ac670 → una scala) */
  --c-green-700: #1a8a5c;
  --c-green-500: #16a34a;
  --c-green-400: #2ac670;
  --c-green-50:  #e8f5ef;

  /* Rosso (consolida #c74b5b / #dc2626) */
  --c-red-600: #dc2626;
  --c-red-500: #c74b5b;
  --c-red-700: #8b1e3f;

  /* Giallo / arancio → oro della palette (niente arancio) */
  --c-amber-500: #cda75e;
  --c-orange-500: var(--c-gold-700);

  /* Scala di grigi neutra (consolida #333/#444/#555/#666/#888/#aaa/#ccc/#ddd/#eee) */
  --c-gray-900: #1f2937;
  --c-gray-800: #333333;
  --c-gray-700: #444444;
  --c-gray-600: #555555;
  --c-gray-500: #666666;
  --c-gray-400: #888888;
  --c-gray-300: #aaaaaa;
  --c-gray-250: #cccccc;
  --c-gray-200: #dddddd;
  --c-gray-100: #eeeeee;
  --c-gray-50:  #f0f0f0;
  --c-white:    #ffffff;
  --c-black:    #000000;

  /* ---------- 2. SEMANTICI ---------- */

  /* Brand — teal portante, oro accento */
  --color-primary:        var(--c-teal-700);   /* #16524d interattivo */
  --color-primary-strong: var(--c-teal-600);   /* #1d6b62 hover */
  --color-primary-dark:   var(--c-teal-800);   /* #0f3b38 header/titoli */
  --color-primary-deep:   var(--c-teal-900);   /* #0c302e gradiente */
  --color-primary-soft:   var(--c-teal-50);    /* #eef3f1 attivo soft */
  --color-accent:         var(--c-gold-500);   /* #cda75e oro */
  --color-accent-strong:  var(--c-gold-700);   /* #a07d33 oro scuro */

  /* Stati (rosso clinico invariato per sicurezza) */
  --color-success:      var(--c-green-700);
  --color-success-soft: var(--c-green-50);
  --color-danger:       var(--c-red-600);
  --color-warning:      var(--c-amber-500);    /* ambra, armonica all'oro */
  --color-info:         var(--c-blue-500);

  /* Testo (inchiostri caldi della palette referti) */
  --text-1: var(--c-ink-900);    /* primario #2b3330 */
  --text-2: var(--c-ink-600);    /* secondario #54615c */
  --text-3: var(--c-ink-400);    /* terziario / hint #7c8884 */
  --text-4: var(--c-ink-300);    /* footer / numerazione #9aa5a0 */
  --text-on-dark:      var(--c-white);
  --text-on-dark-soft: var(--c-on-teal-2);  /* sottotitoli su teal #bcd2cd */
  --text-on-dark-lead: var(--c-on-teal-1);  /* lead su teal #cfe1dd */

  /* Superfici */
  --surface:        var(--c-white);
  --surface-muted:  var(--c-teal-25);   /* #f6f9f8 zebra/note */
  --surface-soft:   var(--c-teal-50);   /* #eef3f1 */
  --border-color:   var(--c-teal-150);  /* #e8eeec */
  --border-strong:  var(--c-teal-200);  /* #cbd6d2 */

  /* ---------- 3. SCALE ---------- */

  /* Spacing — griglia 4px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Tipografia — scala modulare */
  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:   1.125rem;  /* 18px */
  --fs-lg:   1.375rem;  /* 22px */
  --fs-xl:   1.75rem;   /* 28px */
  --fs-2xl:  2.25rem;   /* 36px */

  --font-body:    'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-heading: 'Montserrat', system-ui, sans-serif;

  --lh-tight: 1.2;
  --lh-base:  1.5;

  /* Raggi */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-pill: 999px;

  /* Ombre (tinta teal per coerenza con la palette) */
  --shadow-1: 0 1px 3px rgba(12, 47, 44, 0.08);
  --shadow-2: 0 4px 12px rgba(12, 47, 44, 0.10);
  --shadow-3: 0 8px 28px rgba(12, 47, 44, 0.16);

  /* Z-index (gerarchia unica per evitare guerre di z-index) */
  --z-base: 1;
  --z-sticky: 100;
  --z-dropdown: 1000;
  --z-overlay: 9000;
  --z-modal: 9500;
  --z-toast: 9999;

  /* Transizioni */
  --t-fast: 0.15s ease;
  --t-base: 0.25s ease;
}

/* ============================================================
   ACCESSIBILITÀ — default globali a basso rischio
   ============================================================ */

/* Focus visibile e coerente per la navigazione da tastiera
   (WCAG 2.4.7). Solo :focus-visible → non disturba il mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Helper per testo solo-screen-reader (etichette accessibili) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   PARAMETRI CLINICI — evidenziazione valori fuori range
   Applicato ai chip clinici (.cp-val--warn) tramite il filtro range_status.
   ============================================================ */
.cp-val--warn {
  background: #fff4e0 !important;
  color: #8a5a00 !important;
  border-color: #f0c674 !important;
  font-weight: 600;
}
.cp-val--alert {
  background: #fdecec !important;
  color: #b3261e !important;
  border-color: #e8a0a0 !important;
  font-weight: 700;
}
/* pallino di stato prima del valore in allarme */
.cp-val--alert::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-danger, #dc2626);
  margin-right: 6px; vertical-align: middle;
}

/* ============================================================
   FORM — campi obbligatori e validazione inline
   ============================================================ */
.bva-required-star { color: var(--color-danger, #dc2626); font-weight: 700; }
.bva-field-error {
  color: var(--color-danger, #dc2626);
  font-size: 0.78rem;
  margin-top: 4px;
}
.bva-input-invalid { border-color: var(--color-danger, #dc2626) !important; }

/* ============================================================
   WORDMARK BioVitalAge (testo + simbolo elica DNA → orologio)
   Il simbolo SVG è interposto tra "BioVital" e "Age". Definito qui
   (tokens.css è caricato ovunque) così funziona anche nel login.
   ".bva-wordmark .bva-logo-symbol" (specificità 0,2,0) batte
   ".nav-bar-logo img" (0,1,1): il simbolo scala col testo, non al 70%.
   ============================================================ */
.bva-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.3px;
  line-height: 1;
  white-space: nowrap;
}
.bva-wordmark .bva-wm-1 { color: #dfe7e4; }                     /* navbar scura */
.bva-wordmark .bva-wm-2 { color: var(--c-gold-500, #cda75e); }  /* "Age" in oro */
.bva-wordmark .bva-logo-symbol {
  height: 1.7em;
  width: auto;
  margin: 0 1px;
  vertical-align: middle;
  object-fit: contain;
}
/* Variante login: la card di login è su sfondo scuro (verde petrolio), quindi
   "BioVital" resta chiaro (eredita il default); "Age" in oro.
   NIENTE flex-wrap: il wordmark resta su una riga (altrimenti "Age" andava a
   capo e si sovrapponeva al titolo "Login"). */
.bva-wordmark--login { font-size: 1.85rem; justify-content: center; }

/* Rispetto delle preferenze di movimento ridotto */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}