/* ============================================================
   solaresardegna — Design Tokens
   Fotovoltaico · precisione, calma, affidabilità
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=Mulish:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* ---- Colore: base chiara (≈60%) ---- */
  --c-white:      #FFFFFF;
  --c-sand-050:   #FAF7F1;   /* sabbia chiarissima — sfondo pagina */
  --c-sand-100:   #F4EFE6;   /* beige chiaro — superfici */
  --c-sand-200:   #EAE2D3;   /* divisori caldi */

  /* ---- Colore: sabbia (≈20%) ---- */
  --c-sand-400:   #C9B79C;   /* Sabbia — colore del logo */
  --c-sand-500:   #B6A085;

  /* ---- Colore: blu (accenti ≈12% + 8%) ---- */
  --c-azure:      #2E6E8E;   /* Azzurro mare — accento, link, dati */
  --c-azure-600:  #265E79;
  --c-azure-050:  #E7EEF2;   /* tint azzurro per superfici tenui */
  --c-blue:       #1B3A4B;   /* Blu profondo — header, primario */
  --c-blue-700:   #142D3A;
  --c-blue-900:   #0E2029;

  /* ---- Inchiostro / testo ---- */
  --c-ink:        #16181B;
  --c-ink-700:    #3A4046;
  --c-ink-500:    #5C646C;   /* testo secondario */
  --c-ink-300:    #8B939B;   /* placeholder / muted */

  /* ---- Stato ---- */
  --c-ok:         #3F7A6B;
  --c-warn:       #C99A4A;
  --c-err:        #B04A3F;

  /* ---- Tipografia ---- */
  --f-display: 'Jost', system-ui, sans-serif;
  --f-body:    'Mulish', system-ui, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --t-eyebrow: 0.18em;   /* tracking per occhielli/etichette */
  --t-display: 0.005em;

  /* ---- Spaziatura (base 4) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ---- Raggi ---- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;

  /* ---- Ombre (tenui, mai pesanti) ---- */
  --sh-1: 0 1px 2px rgba(22,24,27,.05), 0 1px 3px rgba(22,24,27,.06);
  --sh-2: 0 4px 14px rgba(27,58,75,.08);
  --sh-3: 0 18px 48px rgba(27,58,75,.12);

  --border: 1px solid var(--c-sand-200);
}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;font-family:var(--f-body);color:var(--c-ink);background:var(--c-sand-050);line-height:1.6}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;line-height:1.08;letter-spacing:var(--t-display);margin:0}
a{color:var(--c-azure);text-decoration:none}

.eyebrow{font-family:var(--f-display);text-transform:uppercase;letter-spacing:var(--t-eyebrow);font-size:12px;font-weight:500;color:var(--c-azure)}
.mono{font-family:var(--f-mono)}