/* ============================================================
   TT SOLUTION — BRAND DESIGN TOKENS v2 (15/08/2026)
   Fonte unica di verità per colori, tipografia, componenti.
   Ogni nuova pagina DEVE importare questo file e usare i token.
   Logo ufficiale: "Orbita" (assets/logo.svg / logo-light.svg)

   v2 — il tema passa da SCURO a PANNA (decisione utente, 15/08).
   Due cose imparate rifacendolo, che vale la pena non dimenticare:

   1. Il vecchio CSS della home aveva 94 colori distinti scritti a mano,
      fra cui QUINDICI neri quasi identici e OTTO creme. Nessun occhio li
      distingue: era disordine, non ricchezza. Qui sotto c'è UN panna e UN
      inchiostro. Se serve una sfumatura nuova, si aggiunge un token qui —
      non un valore a mano dentro una pagina.
   2. Su fondo chiaro l'arancione chiaro NON si legge: #ff7a2a su panna dà
      2,6:1, sotto ogni soglia. Perciò --orange-3, che nel sito è l'arancione
      del TESTO (link, occhielli, accenti), ora è il tono scuro. Quello
      chiaro resta disponibile come --orange-light, ma SOLO per riempimenti
      e decorazioni, mai per il testo.
   ============================================================ */

:root{
  /* ---- COLORI BASE (panna, tema principale) ---- */
  --bg:#f6f0e6;            /* sfondo pagina */
  --bg-2:#efe7da;          /* sfondo sezioni alternate */
  --paper:#fffcf7;         /* card / superfici: si solleva dal panna */
  --paper-2:#fdf8f0;       /* card in evidenza (gradiente con --paper) */
  --ink:#141009;           /* quasi-nero (announce, footer in negativo) */
  --text:#1c140c;          /* testo principale — 15:1 sul panna */
  --text-strong:#120c06;   /* titoli */
  --dim:#5c4e3d;           /* testo secondario — 6,5:1 */
  --dim-2:#7a6b56;         /* label, caption — 4,6:1 */
  --faint:#9a8b76;         /* indici e decorazioni: 3:1, MAI per testo corrente */
  --line:rgba(26,18,10,.13);      /* bordi e divisori */
  --line-forte:rgba(26,18,10,.24);/* bordi che devono farsi vedere */

  /* ---- BRAND (l'arancio non si tocca: è il marchio) ---- */
  --orange:#fb5e01;        /* arancio primario — riempimenti */
  --orange-2:#ea4a05;      /* arancio scuro */
  --orange-3:#c2410c;      /* ARANCIO DA TESTO su panna — 5:1. Link e accenti */
  --orange-light:#ff7a2a;  /* arancio chiaro — SOLO riempimenti e decorazioni */
  --grad:linear-gradient(100deg,#ff6a12 0%,#ea4a05 60%,#d2400a 100%);

  /* ---- STATI (ritarati sul chiaro: i toni pastello sparivano) ---- */
  --success:#1f7a44;  --success-bg:rgba(31,122,68,.10);   --success-line:rgba(31,122,68,.30);
  --warning:#b45309;  --warning-bg:rgba(180,83,9,.10);    --warning-line:rgba(180,83,9,.30);
  --error:#b42318;    --error-bg:rgba(180,35,24,.09);     --error-line:rgba(180,35,24,.28);
  --info:#1d4ed8;     --info-bg:rgba(29,78,216,.08);      --info-line:rgba(29,78,216,.26);

  /* ---- TEMA SCURO (footer in negativo, announce, stampa su fondo scuro) ---- */
  --dark-bg:#0f0a05;  --dark-text:#f6f0e6;  --dark-dim:#b3a290;

  /* ---- TIPOGRAFIA (v2: da 4 famiglie a 3) ----
     Prima erano Bricolage + Cormorant + Montserrat + DM Mono: quattro voci
     diverse nella stessa pagina, ed è parte del perché il sito sembrava
     confuso. Ora: Archivo per i titoli, Inter per il testo, JetBrains Mono
     per le etichette. Scelta dell'utente: "neutro e leggibile". */
  --font-display:'Archivo',system-ui,sans-serif;   /* titoli, wordmark */
  --font-accent:'Archivo',system-ui,sans-serif;    /* ex-corsivi editoriali */
  --font-body:'Inter',system-ui,sans-serif;        /* testo */
  --font-mono:'JetBrains Mono',ui-monospace,monospace; /* etichette, bottoni, indici */

  /* Scala (fluid) — ridotta rispetto a v1: i titoli enormi del tema scuro
     su fondo chiaro diventano pesanti, e l'utente vuole testi contenuti. */
  --fs-hero:clamp(2.8rem,8vw,7.2rem);
  --fs-h1:clamp(2.5rem,7vw,5.8rem);
  --fs-h2:clamp(1.9rem,4.4vw,3.1rem);
  --fs-h3:clamp(1.6rem,3.6vw,2.6rem);
  --fs-h4:1.34rem;
  --fs-lead:1.12rem;
  --fs-body:1rem;
  --fs-small:.88rem;
  --fs-label:.72rem;

  --lh-display:1.06;  --lh-body:1.65;  --lh-lead:1.75;
  --ls-display:-.02em;  --ls-mono:.12em;   /* Archivo regge meno stretta di Bricolage */

  /* ---- SPAZIATURA ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:14px; --sp-4:22px; --sp-5:34px; --sp-6:52px;
  --sec-pad:clamp(64px,9vw,120px);           /* padding verticale sezioni */
  --wrap-pad:clamp(20px,4vw,64px);           /* padding orizzontale contenitori */
  --wrap-max:1560px;  --wrap-max-2:1280px;   /* larghezze contenitori */

  /* ---- RAGGI E OMBRE ----
     Su fondo chiaro le ombre nere sporcano: si usano ombre calde e leggere. */
  --r-btn:10px;  --r-card:16px;  --r-card-lg:22px;  --r-pill:99px;
  --shadow-btn:0 6px 18px rgba(210,64,10,.26);
  --shadow-btn-hover:0 10px 28px rgba(210,64,10,.34);
  --shadow-card:0 12px 34px rgba(60,40,20,.09);

  /* ---- MOTION ---- */
  --ease:cubic-bezier(.22,.8,.3,1);
  --t-fast:.2s;  --t-med:.3s;  --t-slow:.45s;
}

/* ============================================================
   COMPONENTI CORE (identici su tutte le pagine)
   ============================================================ */

/* Etichetta sezione con indice /0x */
.tt-tag{display:flex;align-items:center;gap:16px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.16em;font-size:var(--fs-label);color:var(--orange-3)}
.tt-tag::before{content:"";width:46px;height:1px;background:var(--grad);flex:0 0 auto}
.tt-tag .idx{color:var(--faint)}

/* Bottoni — mono squadrato (STANDARD, no pillole) */
.tt-btn{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;font-weight:500;border:none;cursor:pointer;text-decoration:none;display:inline-block;border-radius:var(--r-btn);transition:transform var(--t-fast),box-shadow var(--t-fast),background var(--t-med),color var(--t-med)}
.tt-btn-pri{background:var(--grad);color:#fff;box-shadow:var(--shadow-btn)}
.tt-btn-pri:hover{transform:translateY(-2px);box-shadow:var(--shadow-btn-hover)}
.tt-btn-gh{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-forte)}
/* su panna il testo bianco sparirebbe: al passaggio si scurisce, non si schiarisce */
.tt-btn-gh:hover{box-shadow:inset 0 0 0 1px var(--orange-3);background:rgba(194,65,12,.07);color:var(--orange-3)}
.tt-btn-lg{padding:17px 30px;font-size:.84rem}
.tt-btn-md{padding:12px 20px;font-size:.72rem}
.tt-btn:focus-visible{outline:2px solid var(--orange-3);outline-offset:3px}

/* Card */
.tt-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--sp-4);transition:transform var(--t-med),border-color var(--t-med),box-shadow var(--t-med)}
.tt-card:hover{transform:translateY(-4px);border-color:rgba(194,65,12,.34);box-shadow:var(--shadow-card)}

/* Badge di stato */
.tt-badge{display:inline-block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill)}
.tt-badge-ok{background:var(--success-bg);color:var(--success);border:1px solid var(--success-line)}
.tt-badge-warn{background:var(--warning-bg);color:var(--warning);border:1px solid var(--warning-line)}
.tt-badge-err{background:var(--error-bg);color:var(--error);border:1px solid var(--error-line)}
.tt-badge-info{background:var(--info-bg);color:var(--info);border:1px solid var(--info-line)}

/* Form — stile editoriale a underline (pagine marketing) */
.tt-field label{display:block;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;font-size:.66rem;color:var(--dim-2);margin-bottom:4px}
.tt-field input,.tt-field select,.tt-field textarea{width:100%;padding:12px 2px;border:0;border-bottom:1px solid var(--line-forte);border-radius:0;background:transparent;font-family:var(--font-body);font-size:.98rem;color:var(--text);transition:border-color var(--t-fast)}
.tt-field input:focus,.tt-field select:focus,.tt-field textarea:focus{outline:none;border-bottom-color:var(--orange-3)}
.tt-field input::placeholder,.tt-field textarea::placeholder{color:var(--faint)}

/* Form — stile boxed (aree applicative: area clienti, admin) */
.tt-field-box input,.tt-field-box select,.tt-field-box textarea{width:100%;background:var(--paper);border:1px solid var(--line-forte);border-radius:10px;padding:12px 14px;color:var(--text);font-family:var(--font-body);font-size:.9rem;transition:var(--t-fast)}
.tt-field-box input:focus,.tt-field-box textarea:focus{outline:none;border-color:var(--orange-2);box-shadow:0 0 0 3px rgba(251,94,1,.14)}

/* ============================================================
   OTTIMIZZAZIONE MOBILE (ago 2026)
   ============================================================ */
a,button,input,select,textarea,summary{touch-action:manipulation}
@media(max-width:768px){
  /* micro-testi: mai sotto i 12px su mobile */
  .tt-tag{font-size:.75rem;letter-spacing:.14em}
  .tt-badge{font-size:.7rem}
  .tt-field label{font-size:.75rem}
  /* input a 16px: sotto, iOS zooma automaticamente al focus */
  .tt-field input,.tt-field select,.tt-field textarea,
  .tt-field-box input,.tt-field-box select,.tt-field-box textarea{font-size:1rem}
  /* touch target */
  .tt-btn-md{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}