/* facciamoiconti · Design tokens v2 «il registro», mobile-first.
   UN posto solo per il vestito del sito. La direzione e un documento contabile:
   griglia di filetti visibile, angoli quasi retti, nessuna ombra, importi incolonnati.
   La profondita si fa con i filetti e con salti di luminanza VERI fra gli strati,
   non con card che galleggiano su un fondo quasi identico.

   Regola dei due accenti, e non si deroga:
     lime  = il totale, la voce scelta, il fuoco
     ambra = quello che devi versare in piu, e le scadenze
     rosso = solo errore o divieto, mai da solo (sempre con parola o icona) */

:root {
  /* ---- superfici: quattro strati, ognuno distinguibile a occhio ------- */
  --c-bg:           oklch(0.132 0.024 258);   /* fuori dal foglio */
  --c-foglio:       oklch(0.196 0.026 258);   /* il foglio del registro */
  --c-riga:         oklch(0.228 0.026 258);   /* testata di sezione, riga in evidenza */
  --c-campo:        oklch(0.152 0.024 258);   /* input: incassato, piu scuro del foglio */

  /* ---- filetti: tre livelli, NON intercambiabili ---------------------- */
  --c-linea:        oklch(0.290 0.024 258);   /* riga della griglia, separatore fra voci */
  --c-linea-forte:  oklch(0.400 0.024 258);   /* chiude una sezione del conto */
  --c-linea-ctrl:   oklch(0.520 0.024 258);   /* bordo dei controlli, 3.3:1 (WCAG 1.4.11) */

  /* ---- testo ---------------------------------------------------------- */
  --c-ink:          oklch(0.968 0.004 258);   /* 16.9:1 sul foglio */
  --c-dim:          oklch(0.808 0.016 258);   /* 10.2:1 */
  --c-muted:        oklch(0.672 0.020 258);   /* 6.3:1, il piu tenue ammesso */

  /* ---- accenti semantici ---------------------------------------------- */
  --c-brand:        oklch(0.872 0.178 122);   /* il totale e il fuoco */
  --c-brand-dim:    oklch(0.872 0.178 122 / .12);
  --c-brand-linea:  oklch(0.872 0.178 122 / .40);
  --c-on-brand:     oklch(0.200 0.050 128);
  --c-owe:          oklch(0.808 0.150 68);    /* quello che si aggiunge */
  --c-owe-dim:      oklch(0.808 0.150 68 / .10);
  --c-owe-linea:    oklch(0.808 0.150 68 / .40);
  --c-alert:        oklch(0.712 0.180 22);
  --c-alert-dim:    oklch(0.712 0.180 22 / .12);
  --c-ring:         oklch(0.872 0.178 122 / .30);

  /* ---- tipografia ------------------------------------------------------ */
  --font-ui:  'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-num: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Scala fissa in px, rapporto stretto: e uno strumento, non una copertina.
     Mobile-first: qui i valori del telefono, il desktop rialza solo cio che deve crescere. */
  --fs-totale:  34px;   /* la cifra che chiude il conto */
  --fs-h1:      23px;
  --fs-h2:      15px;
  --fs-body:    14.5px;
  --fs-voce:    14px;   /* etichetta di una voce del conto */
  --fs-valore:  14.5px; /* importo in colonna */
  --fs-label:   12.5px; /* etichetta di campo */
  --fs-note:    12px;   /* nota, fonte, riga di servizio */
  --fs-micro:   11px;   /* intestazione di colonna del registro */

  --lh-tight:   1.08;
  --lh-snug:    1.28;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --ls-num:    -.03em;
  --ls-title:  -.022em;
  --ls-micro:   .10em;  /* intestazioni di colonna, l unico maiuscoletto ammesso */

  /* ---- spaziature ----------------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* ---- forma: angoli quasi retti, un registro non ha smussi ----------- */
  --r-sm: 2px; --r-md: 3px; --r-lg: 4px;

  /* ---- misure d impianto ---------------------------------------------- */
  --w-foglio:   860px;  /* larghezza del documento */
  --w-prosa:    68ch;
  --h-barra:    52px;
  --h-control:  44px;   /* nessun bersaglio sotto i 44px, su nessun dispositivo */
  --col-valore: 9.5ch;  /* la colonna degli importi: stessa larghezza in tutte le tabelle */

  /* ---- movimento: solo per dire che qualcosa e cambiato --------------- */
  --t-fast:  120ms;
  --t-base:  160ms;
  --t-slow:  220ms;
  --ease:    cubic-bezier(.22,.61,.36,1);

  --z-barra: 100;
}

@media (min-width: 640px) {
  :root {
    --fs-totale: 44px;
    --fs-h1:     28px;
    --col-valore: 11ch;
  }
}

/* Schermo largo: il foglio si apre su due colonne e si prende la larghezza che serve,
   invece di restare una striscia stretta in mezzo al nero. */
@media (min-width: 1200px) {
  :root { --w-foglio: 1180px; --fs-totale: 40px; }
}

/* ---- caratteri: serviti dal nostro dominio, una volta sola ------------ */

@font-face {
  font-family: 'IBM Plex Sans';
  src: url(/fonts/ibm-plex-sans-latin-wght-normal.woff2) format('woff2-variations');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url(/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}