/* ============================================================
   Karaoke — token (5 ott 2026)
   Un solo posto per inchiostro, colori di stato, focus e scala del testo di
   form, proiettore, regia e admin. Nomi con prefisso --wpp-: ogni foglio tiene
   i suoi (--red, --danger…) e li rende alias, con il valore come ripiego —
   var(--wpp-red, #bc0113) — così se il file non arriva non si rompe nulla.
   Caricato per primo da index.php, display.php e shell.php (regia, admin).

   Due set: giorno (form sul telefono, card bianche) e notte (regia,
   proiettore). La notte si chiede con [data-surface="night"] su un
   contenitore, oppure si leggono direttamente le --wpp-night-*.
   ============================================================ */

:root {
  /* ---- marca ---- */
  --wpp-navy:       #000050;   /* WPP Blue: titoli, testo primario, CTA */
  --wpp-navy-hover: #1a1a70;

  /* ---- inchiostro (giorno) ---- */
  --wpp-ink:       #000050;
  --wpp-ink-soft:  #5a5f73;    /* testo secondario: 6,4:1 su bianco */
  --wpp-ink-faint: #6b6b86;    /* note e segnaposto: 5,2:1 su bianco, mai più chiaro */
  --wpp-line:      #e3e3ee;

  /* ---- stati (giorno): testo ≥4,5:1 su bianco e sul proprio -bg ---- */
  --wpp-red:        #bc0113;   /* rosso WPP */
  --wpp-red-bg:     #fbe9ec;
  --wpp-red-line:   #f1c2c8;
  --wpp-green:      #0e7a45;
  --wpp-green-bg:   #e6f4ec;
  --wpp-green-line: #b5dcc6;
  --wpp-amber:      #8a6500;   /* testo ambra leggibile; lo sfondo pieno è --wpp-stage */
  --wpp-amber-bg:   #fdf3e0;
  --wpp-amber-line: #f0d9a8;
  --wpp-blue:       #0063b8;
  --wpp-blue-bg:    #e4f2ff;
  --wpp-gray:       #5f6672;
  --wpp-gray-bg:    #f0f1f4;

  /* ---- ambra di scena: chi è sul palco, il "prossimo". Solo come superficie,
          con --wpp-stage-ink sopra. ---- */
  --wpp-stage:     #ffb547;
  --wpp-stage-ink: #2a1a00;

  /* ---- focus: uno solo ovunque ---- */
  --wpp-focus-ring:    rgba(0,0,80,.18);           /* alone attorno ai campi */
  --wpp-focus-outline: 2px solid #000050;          /* contorno per bottoni e link */
  --wpp-focus-offset:  2px;

  /* ---- notte: regia, proiettore, tema scuro ---- */
  --wpp-night-bg:        #06062a;
  --wpp-night-surface:   #10103a;
  --wpp-night-line:      rgba(255,255,255,.12);
  --wpp-night-ink:       #f2f2fb;
  --wpp-night-ink-soft:  #a9acd3;  /* 8:1 sul fondo */
  --wpp-night-accent:    #5b64d6;
  --wpp-night-red:       #ff7b8a;
  --wpp-night-red-bg:    rgba(188,1,19,.2);
  --wpp-night-green:     #4ddb8a;
  --wpp-night-green-bg:  rgba(14,122,69,.2);
  --wpp-night-amber:     #ffb547;
  --wpp-night-amber-bg:  rgba(255,181,71,.14);
  --wpp-night-blue:      #7cc2ff;
  --wpp-night-blue-bg:   rgba(0,145,255,.2);
  --wpp-night-focus-ring: rgba(127,141,255,.35);

  /* ---- scala del testo (app su schermo) ---- */
  --wpp-fs-2xs: 11px;   /* solo etichette maiuscole, mai testo corrente */
  --wpp-fs-xs:  12px;
  --wpp-fs-sm:  13px;
  --wpp-fs-md:  14px;   /* testo corrente delle app */
  --wpp-fs-lg:  16px;
  --wpp-fs-xl:  20px;
  --wpp-fs-2xl: 24px;
  --wpp-fs-3xl: 32px;
  --wpp-fs-display: clamp(40px, 6vw, 72px);

  /* ---- scala del maxischermo: letta da 5 metri, nulla sotto 2,2vh ---- */
  --wpp-stage-fs-min:  2.2vh;
  --wpp-stage-fs-body: 2.8vh;
  --wpp-stage-fs-name: 6vh;

  /* ---- font ---- */
  --wpp-font: "WPP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Contenitore notturno: le stesse chiavi di stato puntano ai valori notte,
   così un componente scritto con --wpp-red funziona su entrambi i fondi. */
[data-surface="night"] {
  --wpp-ink:        var(--wpp-night-ink);
  --wpp-ink-soft:   var(--wpp-night-ink-soft);
  --wpp-ink-faint:  var(--wpp-night-ink-soft);
  --wpp-line:       var(--wpp-night-line);
  --wpp-red:        var(--wpp-night-red);
  --wpp-red-bg:     var(--wpp-night-red-bg);
  --wpp-green:      var(--wpp-night-green);
  --wpp-green-bg:   var(--wpp-night-green-bg);
  --wpp-amber:      var(--wpp-night-amber);
  --wpp-amber-bg:   var(--wpp-night-amber-bg);
  --wpp-blue:       var(--wpp-night-blue);
  --wpp-blue-bg:    var(--wpp-night-blue-bg);
  --wpp-focus-ring: var(--wpp-night-focus-ring);
  --wpp-focus-outline: 2px solid #9aa3ff;
}