/* Portale v2 — token del design system.
   Unica fonte dei valori: colori, caratteri, misure, raggi, moto, livelli.
   I componenti usano solo questi nomi; un valore nuovo si aggiunge qui, non nel componente.
   Origine: le tre pagine della proposta (design/proposta-ui, home, scheda, mappa), con i doppioni unificati.
   Il catalogo vivo e' su /v2/<lingua>/design/. */

/* Ordine dei livelli della cascata: un livello dopo vince su quello prima, a prescindere dalla specificita'. */
@layer tokens, base, layout, components, pages, utilities;

@layer tokens {
  :root {
    color-scheme: light;

    /* ---------- Colori ---------- */
    --ground: #FFFFFF;        /* fondo della pagina */
    --tint: #F3F6F3;          /* card e campi: un passo di tono sul bianco */
    --tint-2: #E6EDE7;        /* secondo passo: hover, fondo delle foto in caricamento */
    --ink: #10291F;           /* verde quasi nero del logo: testo e bottoni */
    --ink-soft: #4A5D54;      /* testo secondario, mai per il testo corrente */
    --accent: #0F6B4B;        /* verde Relinx: solo pulsanti e azioni, focus */
    --accent-soft: #CFE6D8;   /* verde chiaro: voce scelta delle tabbar (testo --ink), badge, filtro impostato */
    --select: #6B7280;        /* voce scelta di interruttori, comandi della mappa, paginatore (testo --on-ink): grigio come nel 3D */
    --select-soft: #E5E7EB;   /* voce scelta chiara: lingua corrente */
    --on-ink: #FFFFFF;        /* testo su ink e su accent */
    --line: #DCE4DE;          /* bordo di controlli e tabelle, mai come separatore di sezioni */
    --heart: #C8343E;         /* solo il cuore dei preferiti */
    --toggle-on: #7DB894;     /* pallino dell'interruttore acceso: verde salvia, leggibile anche su ink */
    --toggle-off: #CF867D;    /* pallino dell'interruttore spento: rosso terracotta tenue */
    --scrim: rgb(8 24 18 / .55); /* velo sotto il testo sulle foto */
    --scrim-strong: rgb(8 24 18 / .7); /* lo stesso velo, piu' pieno: dietro la galleria a tutto schermo */
    --shade: rgb(8 24 18);    /* base dei veli sfumati, con color-mix */
    --on-ink-soft: rgb(255 255 255 / .8);  /* testo secondario su ink */
    --on-ink-fill: rgb(255 255 255 / .12); /* fondo di badge e pulsanti su ink */
    --on-ink-faint: rgb(255 255 255 / .08); /* fondo di riquadri su ink */
    --render: #F0F2F1;        /* fondo dei render della planimetria 3D */

    /* Classe energetica (scala APE) */
    --energy-a: #1E8E3E;
    --energy-b: #5DAA3A;
    --energy-c: #A5C432;
    --energy-d: #F2C500;
    --energy-e: #F29A00;
    --energy-f: #E8611A;
    --energy-g: #D2232A;

    /* ---------- Caratteri ---------- */
    --display: "Raleway", "Helvetica Neue", Arial, sans-serif;           /* titoli, prezzi */
    --font: "Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif; /* testo e controlli */

    /* Cinque passi, non di piu'. */
    --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);  /* 14–15px: note, etichette, controlli */
    --step-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);        /* 16–18px: testo */
    --step-lead: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);      /* 22–28px: sottotitoli, prezzo in card */
    --step-head: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);          /* 32–52px: titoli di sezione, prezzo in scheda */
    --step-hero: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);           /* 40–88px: il titolo della pagina */

    --lh-text: 1.5;
    --lh-head: 1.1;
    --track-head: -0.02em;

    /* ---------- Spazi ---------- */
    --m: max(16px, min(5vw, 96px));       /* margine laterale: 5vw fino al Full HD, poi fermo */
    --max: 1920px;                        /* larghezza massima, margini compresi */
    --gap: clamp(12px, 1.6vw, 24px);      /* spazio tra colonne e tra card */
    --block: clamp(56px, 6vw, 88px);      /* tra blocchi dentro una pagina (scheda) */
    --section: clamp(88px, 10vw, 160px);  /* tra sezioni */

    /* ---------- Raggi ---------- */
    --r-lg: 28px;    /* foto grandi, pannelli */
    --r-md: 20px;    /* card, domande */
    --r-sm: 12px;    /* foto piccole, loghi */
    --r-pill: 999px; /* bottoni, campi, chip */
    --r-badge: 6px;  /* badge: etichette, non bottoni */

    /* ---------- Controlli ---------- */
    --control-h: 48px;     /* bottone */
    --control-h-sm: 40px;  /* bottone piccolo, lingua */
    --field-h: 44px;       /* campo, select, bottone tondo: area di tocco minima */
    --disabled-opacity: .4; /* ogni controllo disattivo: bottoni, campi, menu, voci delle tabbar */

    /* ---------- Ombre: solo per cio' che galleggia (menu, pin, testata agganciata) ---------- */
    --shadow-menu: 0 0 0 1px var(--line), 0 20px 44px rgb(16 41 31 / .16);
    --shadow-pin: 0 0 0 1px rgb(16 41 31 / .08), 0 6px 14px rgb(16 41 31 / .18);
    --shadow-stuck: 0 1px 0 var(--line), 0 8px 24px rgb(16 41 31 / .06);

    /* ---------- Moto ---------- */
    --ease: cubic-bezier(.2, .7, .2, 1);          /* entrate e hover */
    --ease-inout: cubic-bezier(.65, 0, .35, 1);   /* spostamenti guidati (confronto prima/dopo) */
    --ease-spring: cubic-bezier(.34, 1.45, .5, 1);/* piccoli rimbalzi: selettore, cuore */
    --dur-fast: .2s;
    --dur: .3s;
    --dur-slow: .8s;

    /* ---------- Livelli ---------- */
    --z-bar: 40;     /* barra filtri */
    --z-header: 50;  /* testata */
    --z-skeleton: 55; /* sagoma della pagina in arrivo, con la sua testata */
    --z-menu: 60;    /* menu a tendina */
    --z-progress: 9999; /* barra di avanzamento tra le pagine: sopra a tutto */
    --z-consent: 9999; /* banner dei cookie e finestre: sopra le mappe */
  }
}