/*
 * AgriTraccia – token del design system («Lo strumento»).
 * Unica fonte delle variabili CSS. I valori colore sono gli stessi di apps/branding/palette.py
 * (un test controlla che restino allineati): se cambi un colore, cambialo in entrambi.
 *
 * Il tema di ogni azienda sovrascrive SOLO le otto variabili --color-primary* e --color-accent*
 * (apps/branding/theming.py, {% tenant_theme_style %}). --color-primary è il colore della fascia
 * del portale e dell'azione principale: nero sulla piattaforma, la «vernice» dell'azienda nel
 * portale. Giallo della conferma, arancio del segnale, verde dell'esito e nero NON cambiano mai.
 * Tema chiaro ovunque: al sole è il più leggibile.
 */

:root {
  color-scheme: light;

  /* --- Colori di base (cinque) ------------------------------------------------------- */
  --color-milk: #FFFFFF;    /* Latte: fondo di pagine e schermi */
  --color-steel: #DCE2E5;   /* Acciaio: piano di lavoro, scene, figure, piè di pagina */
  --color-black: #000000;   /* Nero: testo, filetti, azione principale della vetrina */
  --color-tag: #FFCC00;     /* Giallo marca: SOLO la conferma di una persona */
  --color-signal: #F26B1D;  /* Arancio segnale: SOLO «da controllare», con icona e parola */

  /* --- Funzionali -------------------------------------------------------------------- */
  --color-steel-dark: #46535A;   /* testi secondari, bordi dei campi (7,9:1 sul latte) */
  --color-steel-line: #B4BEC3;   /* filetti sottili tra le voci (solo separazione) */
  --color-pass: #12703C;         /* Verde spia: SOLO «controllo superato», con icona e parola */
  --color-signal-soft: #FDEADF;  /* fondo dell'avviso «da controllare» */
  --color-tag-edge: #D4A600;     /* bordo della marca gialla (disegno) */

  /* --- Solo nell'illustrazione della bolla (DDT) -------------------------------------- */
  --color-ddt-paper: #F4D5DB;
  --color-ddt-rule: #C48997;
  --color-ddt-print: #7A4757;
  --color-ddt-ink: #2B3990;
  --color-ddt-stamp: #5B3F99;

  /* --- Ruoli: le prime otto le sovrascrive il tema dell'azienda ----------------------- */
  --color-primary: #000000;
  --color-primary-strong: #474747;
  --color-primary-soft: #E0E0E0;
  --color-on-primary: #FFFFFF;
  --color-accent: #DCE2E5;
  --color-accent-strong: #626466;
  --color-accent-soft: #FAFBFB;
  --color-on-accent: #000000;

  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-alt: #DCE2E5;
  --color-text: #000000;
  --color-text-muted: #46535A;
  --color-border: #B4BEC3;
  --color-border-strong: #46535A;
  --color-focus: #000000;
  --color-confirm: #FFCC00;
  --color-on-confirm: #000000;
  --color-check: #F26B1D;
  --color-on-check: #000000;
  --color-check-soft: #FDEADF;
  --color-passed: #12703C;
  --color-overlay: rgb(0 0 0 / 0.6);

  /* --- Tipografia ------------------------------------------------------------------ */
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  /* Solo la grafia a biro sull'illustrazione della bolla. */
  --font-hand: "Reenie Beanie", "Bradley Hand", cursive;
  /* Solo i codici da ricopiare (segreto TOTP, codici di recupero, nomi dei cookie): 0 e O, 1 e l
     non si confondono. Caratteri del sistema, nessun file da scaricare. */
  --font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Larghezza del carattere: titoli larghi e piatti come una targhetta punzonata. */
  --stretch-display: 125%;
  --stretch-title: 112%;
  --stretch-text: 100%;

  /* Scala per quarte giuste, base 18 px: 15, 18, 24, 32, 42, 60. Sul telefono h1 36, h2 30. */
  --text-xs: 0.875rem;                                          /* 14 px: solo note legali */
  --text-sm: 0.9375rem;                                         /* 15 px: note, didascalie */
  --text-base: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);    /* 17 -> 18 px */
  --text-lg: 1.25rem;                                           /* 20 px: valori, voci dell'app */
  --text-xl: 1.5rem;                                            /* 24 px: h4 */
  --text-2xl: clamp(1.625rem, 1.4rem + 0.9vw, 2rem);            /* 26 -> 32 px: h3 */
  --text-3xl: clamp(1.875rem, 1.6rem + 1.15vw, 2.625rem);       /* 30 -> 42 px: h2 */
  --text-4xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);          /* 36 -> 60 px: h1 */
  --text-display: clamp(2.25rem, 1.5rem + 3vw, 4.25rem);        /* 36 -> 68 px: la scena */

  --leading-display: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --tracking-display: -0.018em;
  --tracking-title: -0.01em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;
  --measure: 64ch;

  /* --- Spazi (base 4 px) ----------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --gutter: clamp(1rem, 4vw, 3rem);           /* 16 -> 48 px */
  --section: clamp(4.5rem, 3rem + 5vw, 6.5rem); /* 72 -> 104 px */

  /* --- Dimensioni ------------------------------------------------------------------ */
  --tap-min: 48px;    /* area di tocco minima */
  --tap-large: 56px;  /* pulsanti principali, anche con i guanti */
  --tap-confirm: 60px;
  --container: 74rem;          /* + margini: 1280 px */
  --container-narrow: 44rem;
  --header-height: 5rem;
  --app-bar-height: 4.25rem;
  --app-nav-height: 4.25rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* --- Raggi: gerarchia, non un raggio unico -------------------------------------- */
  --radius-none: 0;      /* carta, schede compilate, tabelle */
  --radius-sm: 4px;      /* lettere di richiamo, etichette */
  --radius-md: 6px;      /* controlli: pulsanti, campi */
  --radius-lg: 16px;     /* schermi del prodotto, finestre di dialogo */
  --radius-pill: 999px;  /* contatori, stato dello schermo */

  /* --- Filetti --------------------------------------------------------------------- */
  --border-width: 1px;
  --border-width-strong: 2px;
  --rule-heavy: 4px;     /* filetto nero tra le sezioni del manuale */

  /* --- Ombra: una sola, per la carta fotografata della bolla ------------------------ */
  --shadow-paper: 0 2px 3px rgb(0 0 0 / 0.16), 0 26px 40px -22px rgb(0 0 0 / 0.5);

  /* --- Fuoco: anello nero (bianco sui fondi scuri e sulla fascia dell'azienda) ------ */
  --focus-width: 3px;
  --focus-offset: 3px;

  /* --- Livelli --------------------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-dialog: 500;
  --z-toast: 600;
  --z-skip: 700;

  /* --- Movimento: risposte ai gesti, nessuna entrata all'apertura ------------------ */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* L'unico movimento orchestrato: la marca che si aggancia e oscilla sul perno. */
  --duration-tag: 950ms;
  --ease-tag: cubic-bezier(0.3, 0.7, 0.4, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-tag: 0ms;
  }
}

/* Contrasto più alto richiesto dal sistema (es. "Aumenta contrasto" su iOS/macOS) */
@media (prefers-contrast: more) {
  :root {
    --color-text-muted: #000000;
    --color-border: #46535A;
    --color-border-strong: #000000;
  }
}