/* ═══════════════════════════════════════════════════════════════════
   blip — tokens.css
   Generato da STYLE-SYSTEM-Blip.md: ogni valore visivo nasce QUI.
   Nessun colore, raggio o durata scritto altrove.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* colori — palette bloccata */
  --bg:          #0d0e0d;
  --surface:     #161816;
  --surface-2:   #222522;
  --ink:         #ffffff;
  --accent:      #8fbf86;
  --accent-deep: #3f7a3a;
  --hot:         #d9863b;
  --cold:        #5b6cf0;   /* radar senza dispositivi */
  --viola:       #9b5de5;   /* i puntini dei telefoni sul radar */
  --warn:        #d8b84a;   /* semantico: fascia media */
  --danger:      #d94a3a;   /* semantico: fascia bassa / consumi alti / errori */

  /* neutri = ink a opacità */
  --ink-70: rgb(255 255 255 / .70);
  --ink-50: rgb(255 255 255 / .50);
  --ink-30: rgb(255 255 255 / .30);
  --ink-12: rgb(255 255 255 / .12);
  --ink-06: rgb(255 255 255 / .06);

  /* tipografia */
  --font:     "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-logo:  clamp(3.5rem, 9vw, 5.5rem);
  --fs-h1:    clamp(1.75rem, 3vw, 2.25rem);
  --fs-h2:    1.25rem;
  --fs-num:   clamp(2rem, 4vw, 2.75rem);
  --fs-body:  1rem;
  --fs-small: 0.8125rem;
  --fs-tiny:  0.75rem;
  --lh-body:  1.5;
  --lh-tight: 1.1;

  /* forme */
  --r-card:    28px;
  --r-card-lg: 32px;
  --r-input:   999px;
  --r-btn:     999px;

  /* spacing (base-4) */
  --sp:         4px;
  --sp-2:       8px;
  --sp-3:       12px;
  --sp-4:       16px;
  --sp-5:       20px;
  --sp-6:       24px;
  --sp-8:       32px;
  --sp-10:      40px;
  --sp-card:    clamp(20px, 2.5vw, 32px);
  --sp-gap:     20px;
  --gutter:     16px;
  --container:  1280px;

  /* motion */
  --t-fast: 160ms;
  --t-mid:  600ms;
  --ease:   cubic-bezier(.22, 1, .36, 1);

  /* misure di controllo */
  --tap: 48px;
}

@media (min-width: 720px) {
  :root { --gutter: 28px; }
}