/* =============================================================
   KeepGate - design token
   Sorgente unica per desktop e mobile. Non duplicare questi
   valori altrove: se un colore serve, aggiungi un token qui.

   Temi: il chiaro è il default (console desktop, lavoro diurno
   in ufficio). Il tema dell'applicazione mobile si attiva con
   data-theme="app" sull'elemento html.

   Regola non negoziabile: i colori di stato significano stato.
   Verde consentito, rosso negato, ambra attenzione - e nient'altro.
   Il blu di marchio significa "questo si può toccare".
   Non usare mai un colore di stato per decorare.
   ============================================================= */

:root{

  /* ---------- marchio Hi-Keep ---------- */
  --brand:#135EAB;            /* primario, = colore di interazione */
  --brand-dark:#0E4880;       /* hover e pressione */
  --brand-soft:#A8C7E5;       /* bordi e accenti tenui */
  --brand-wash:#E9F1F9;       /* sfondi di selezione */

  /* ---------- stato ---------- */
  --state-granted:#2E9E5B;
  --state-denied:#D6392F;
  --state-alert:#E0951A;
  --state-idle:#9AA0A6;

  /* versioni traslucide, per sfondi di etichetta */
  --state-granted-wash:rgba(46,158,91,.13);
  --state-denied-wash:rgba(214,57,47,.11);
  --state-alert-wash:rgba(224,149,26,.16);

  /* ---------- superfici (tema chiaro) ---------- */
  --surface-0:#E4E1DA;        /* fondo pagina */
  --surface-1:#F5F3EF;        /* barre, intestazioni, menu */
  --surface-2:#FFFFFF;        /* pannelli e schede */
  --surface-3:#FAF9F6;        /* righe in evidenza */
  --border:#CFCBC2;           /* bordo pieno */
  --border-soft:#D7D3CA;      /* divisori interni */

  /* ---------- testo (tema chiaro) ---------- */
  --text-1:#15181B;           /* principale */
  --text-2:#4A5057;           /* secondario */
  --text-3:#7C838B;           /* etichette e note */
  --text-inv:#FFFFFF;         /* su fondo pieno di marchio */

  /* ---------- ombre ---------- */
  --shadow-1:0 1px 0 rgba(21,24,27,.06), 0 1px 3px rgba(21,24,27,.07);
  --shadow-2:0 18px 50px rgba(21,24,27,.24);

  /* ---------- tipografia ----------
     Outfit: solo il logotipo e il nome prodotto (è il carattere
       della wordmark Hi-Keep, Outfit 700, letter-spacing -0.3).
     Archivo: legende, intestazioni, numeri grandi.
     IBM Plex Sans: testo corrente.
     IBM Plex Mono: dati, identificativi, orari, indirizzi IP.
     Calibri resta il carattere dei documenti, non dell'interfaccia. */
  --font-brand:'Outfit','Archivo',sans-serif;
  --font-display:'Archivo',sans-serif;
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  /* ---------- forma e ritmo ---------- */
  --radius:3px;               /* desktop: squadrato, da strumentazione */
  --radius-lg:12px;
  --radius-pill:20px;
  --space-1:4px;
  --space-2:8px;
  --space-3:13px;
  --space-4:18px;
  --space-5:22px;
}

/* =============================================================
   Tema scuro - applicazione mobile.
   Cambiano solo superfici e testo: marchio e stato restano
   quelli, salvo dove il contrasto sul fondo scuro non regge.
   ============================================================= */
/* =============================================================
   Tema app - applicazione mobile versione 2.
   Chiaro e arioso, non la console tecnica del desktop. Superfici
   bianche su fondo azzurrino, ombre morbide, angoli ampi.
   Il verde resta riservato allo stato di varco aperto, il blu
   del marchio resta il colore di cio' che si tocca.
   ============================================================= */
[data-theme="app"]{
  --surface-0:#F2F5F9;
  --surface-1:#FFFFFF;
  --surface-2:#FFFFFF;
  --surface-3:#F7F9FC;
  --border:rgba(0,0,0,.07);
  --border-soft:rgba(0,0,0,.05);

  --text-1:#1A2536;
  --text-2:#536580;
  --text-3:#8D9DB5;
  --text-inv:#FFFFFF;

  --state-granted:#0EA371;
  --state-denied:#E54D4D;
  --state-alert:#E0951A;
  --state-idle:#8D9DB5;
  --state-granted-wash:rgba(14,163,113,.09);
  --state-denied-wash:rgba(229,77,77,.09);
  --state-alert-wash:rgba(224,149,26,.11);

  --brand-wash:rgba(19,94,171,.07);
  --brand-soft:rgba(19,94,171,.22);

  --shadow-1:0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.03);
  --shadow-2:0 2px 8px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.04);

  --font-display:'Outfit',sans-serif;
  --font-body:'Outfit','SF Pro Display',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --radius:16px;
}

/* =============================================================
   Accessibilità - vale ovunque
   ============================================================= */
:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}