/* =========================================================================
   TOKENS — Variabili CSS di base
   -------------------------------------------------------------------------
   COLORI, CARATTERI E FORMA vengono sovrascritti a runtime dallo stile
   scelto in config/theme.js (le definizioni stanno in config/stili.js).
   Qui restano i valori di riserva — quelli che si vedono nel mezzo secondo
   prima che parta il JavaScript — e la scala di spaziatura (griglia 8px),
   che invece è fissa per tutti gli stili.
   ========================================================================= */

:root {
  /* ---- Colori di riserva (tema chiaro) ---- */
  --c-brand:         #0E3A5F;
  --c-brand-scuro:   #082741;
  --c-brand-chiaro:  #1E6FB8;
  --c-accento:       #F5A623;
  --c-accento-chiaro:#FFC94D;
  --c-eco:           #2FA36B;
  --c-sfondo:        #FFFFFF;
  --c-sfondo-alt:    #F6F8FB;
  --c-superficie:    #FFFFFF;
  --c-bordo:         #E3E9F0;
  --c-testo:         #0F1B26;
  --c-testo-tenue:   #5A6B7B;

  /* ---- Colori derivati ---- */
  --c-brand-soft:    color-mix(in srgb, var(--c-brand) 8%, transparent);
  --c-accento-soft:  color-mix(in srgb, var(--c-accento) 14%, transparent);
  --c-eco-soft:      color-mix(in srgb, var(--c-eco) 12%, transparent);
  --c-su-brand:      #FFFFFF;
  --c-su-accento:    #1A1206;

  /* ---- Tipografia ---- */
  --font-titoli: 'Sora', system-ui, -apple-system, sans-serif;
  --font-testo:  'Inter', system-ui, -apple-system, sans-serif;

  --fs-xs:   0.8125rem;  /* 13px */
  --fs-sm:   0.9375rem;  /* 15px */
  --fs-base: 1.0625rem;  /* 17px */
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --fs-3xl:  clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem);
  --fs-hero: clamp(2.5rem, 1.4rem + 4.4vw, 4.5rem);

  --lh-stretta: 1.12;
  --lh-media:   1.35;
  --lh-larga:   1.65;

  /* ---- Spaziatura: GRIGLIA 8px (regola di progetto) ---- */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  40px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-10: 80px;
  --sp-12: 96px;
  --sp-16: 128px;

  /* ---- Forma ---- */
  --raggio:      16px;
  --raggio-sm:   8px;
  --raggio-pill: 999px;
  --larghezza-max: 1200px;
  --bordo-sp:    1px;   /* spessore dei bordi: lo stile può portarlo a 2px */

  /* ---- Ombre ---- */
  --ombra-sm: 0 1px 2px rgba(8, 24, 38, .06), 0 2px 8px rgba(8, 24, 38, .04);
  --ombra-md: 0 4px 12px rgba(8, 24, 38, .07), 0 12px 32px rgba(8, 24, 38, .06);
  --ombra-lg: 0 8px 24px rgba(8, 24, 38, .10), 0 24px 64px rgba(8, 24, 38, .10);

  /* ---- Movimento ---- */
  --tempo-veloce: 160ms;
  --tempo-medio:  320ms;
  --tempo-lento:  640ms;
  --curva: cubic-bezier(.22, 1, .36, 1);

  /* ---- Layer ---- */
  --z-header: 100;
  --z-menu:   200;
  --z-top:    300;
}

/* Ombre più marcate nel tema scuro */
[data-theme="dark"] {
  --ombra-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --ombra-md: 0 4px 12px rgba(0, 0, 0, .45), 0 12px 32px rgba(0, 0, 0, .35);
  --ombra-lg: 0 8px 24px rgba(0, 0, 0, .5), 0 24px 64px rgba(0, 0, 0, .45);
  --c-su-brand: #06121C;
}