/*
 * garganic.app – stile comune (token)
 * Unica fonte di colori, caratteri, spazi e raggi per TUTTE le pagine.
 * Regola: nessuna pagina definisce colori o caratteri propri, usa solo queste variabili.
 * Palette ufficiale: nero e oro.
 */

/* Caratteri ospitati sul nostro dominio (niente richieste a Google, niente banner dei cookie).
   I file .woff2 vanno messi in /assets/fonts/ (vedi assets/fonts/LEGGIMI.md).
   Finché mancano, il browser usa i caratteri di riserva indicati sotto. */
@font-face { font-family: "DM Serif Display"; src: url("/assets/fonts/dm-serif-display-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Karla"; src: url("/assets/fonts/karla-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Karla"; src: url("/assets/fonts/karla-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Karla"; src: url("/assets/fonts/karla-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/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("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* Superfici scure (l'app è nero e oro di base) */
  --nero: #0B0B0C;
  --nero-2: #141312;
  --nero-3: #1E1C19;
  --linea-scura: #2A2722;

  /* Oro */
  --oro: #C9A24A;
  --oro-chiaro: #E2C47C;
  --oro-scuro: #8F6E26;
  --oro-velo: rgba(201, 162, 74, 0.14);

  /* Testo su nero */
  --avorio: #F4EFE3;
  --avorio-2: #CFC8B8;
  --avorio-3: #9C9484;

  /* Superfici chiare (documenti, strumenti per titolari) */
  --carta: #F7F5F0;
  --carta-2: #FFFFFF;
  --inchiostro: #16140F;
  --inchiostro-2: #5E594E;
  --linea-chiara: #E3DED2;

  /* Stati (separati dall'oro) */
  --ok: #4E9A6A;
  --attenzione: #D08A2E;
  --errore: #C2554A;

  /* Caratteri */
  --font-titolo: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-testo: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-dati: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Scala dei caratteri */
  --t-xs: 0.75rem;
  --t-s: 0.875rem;
  --t-m: 1rem;
  --t-l: 1.25rem;
  --t-xl: 1.75rem;
  --t-xxl: clamp(2.25rem, 7vw, 3.5rem);

  /* Spazi */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;

  /* Raggi e ombre */
  --r-s: 4px;
  --r-m: 8px;
  --r-l: 16px;
  --r-pill: 999px;
  --ombra-oro: 0 0 0 1px var(--oro-velo), 0 12px 40px rgba(0, 0, 0, 0.45);

  /* Larghezze */
  --larghezza-testo: 62ch;
  --larghezza-pagina: 1080px;

  /* Margine laterale che rispetta i bordi dei telefoni */
  --margine-sx: max(16px, env(safe-area-inset-left, 0px));
  --margine-dx: max(16px, env(safe-area-inset-right, 0px));

  color-scheme: dark;
}