/*
 * ============================================================================
 *  Azienda:   Exion Networks SA
 *  Developer: Danijel Balcakovic
 *  Email:     balcakovic.danijel@gmail.com
 *  GitHub:    I3assotto
 * ============================================================================
 *  Design tokens — palette, tipografia, spaziature, movimento.
 *
 *  LA PALETTE NON SI TOCCA: sono i colori aziendali Exion (oro del logo e
 *  scala scura derivata dall'ink). Il redesign del 2026-11-07 ha cambiato
 *  tipografia, layout e animazioni, non un solo valore di colore: le voci in
 *  piu sono solo trasparenze degli stessi colori.
 *  2026-11-08: una sola famiglia (Geist), misure e raggi piu sobri.
 */

:root {
  /* --- Brand (invariato) --- */
  --ex-gold:        #fcbd00;   /* oro del logo */
  --ex-gold-deep:   #e0a400;
  --ex-gold-bright: #ffd75a;   /* per testo e dettagli in evidenza */
  --ex-gold-soft:   rgba(252, 189, 0, 0.16);
  --ex-gold-line:   rgba(252, 189, 0, 0.45);
  --ex-gold-halo:   rgba(252, 189, 0, 0.30);
  /* trasparenze dello stesso oro */
  --ex-gold-faint:  rgba(252, 189, 0, 0.07);
  --ex-gold-mist:   rgba(252, 189, 0, 0.11);

  /* --- Scala scura (derivata dall'ink #172025, invariata) --- */
  --ex-900: #080e11;   /* sfondo pagina      */
  --ex-850: #0d161a;   /* sfondo alternato   */
  --ex-800: #132027;   /* brand ink          */
  --ex-700: #1c2b33;   /* superfici elevate  */
  --ex-600: #294048;   /* bordi forti        */
  --ex-500: #3a555f;

  /* --- Testo (invariato) --- */
  --ex-text:        #f4f9fa;
  --ex-text-muted:  #bccbd1;
  --ex-text-dim:    #85989f;

  /* --- Linee (invariate + una piu leggera) --- */
  --ex-border:        rgba(255, 255, 255, 0.10);
  --ex-border-strong: rgba(255, 255, 255, 0.20);
  --ex-border-soft:   rgba(255, 255, 255, 0.06);

  /* --- Tipografia --- */
  /* Un'unica famiglia per tutto il sito (scelta del 2026-11-08): titoli,
     testo, etichette e numeri in Geist. Le differenze si fanno con peso,
     dimensione e spaziatura, non cambiando carattere. */
  --font-sans:  "Geist", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);

  --fs-display: clamp(2.3rem, 1rem + 4.4vw, 5.25rem);
  --fs-h1:      clamp(2.2rem, 1.25rem + 3.2vw, 4.25rem);
  --fs-h2:      clamp(1.95rem, 1.15rem + 2.5vw, 3.4rem);
  --fs-h3:      clamp(1.3rem, 1.08rem + 0.8vw, 1.75rem);
  --fs-lead:    clamp(1.1rem, 1rem + 0.42vw, 1.375rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-micro:   0.75rem;
  --fs-eyebrow: 0.75rem;
  --fs-label:   0.75rem;   /* etichette maiuscole */
  --track-label: 0.12em;

  /* --- Spaziature --- */
  --space-xs: 0.5rem;
  --space-sm: 0.875rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6.5rem;
  --section-y: clamp(5rem, 3.6rem + 5vw, 9rem);
  --gutter: clamp(1.15rem, 0.6rem + 3.2vw, 4.5rem);

  --container: 1600px;
  --container-wide: 1760px;
  --measure: 66ch;

  /* --- Raggi --- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* --- Superfici composite (stessi colori) --- */
  --grad-panel: linear-gradient(160deg, rgba(28, 43, 51, 0.78), rgba(13, 22, 26, 0.78));
  --grad-panel-solid: linear-gradient(160deg, var(--ex-700), var(--ex-850));
  --grad-gold:  linear-gradient(135deg, var(--ex-gold-bright), var(--ex-gold) 48%, var(--ex-gold-deep));
  --grad-gold-text: linear-gradient(100deg, var(--ex-gold-bright) 0%, var(--ex-gold) 42%, var(--ex-gold-deep) 70%, var(--ex-gold-bright) 100%);

  /* --- Ombre / glow --- */
  --shadow-card: 0 30px 60px -36px rgba(0, 0, 0, 0.9);
  --shadow-lift: 0 40px 80px -40px rgba(0, 0, 0, 0.95);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glow-gold:   0 0 0 1px var(--ex-gold-line), 0 18px 50px -16px rgba(252, 189, 0, 0.55);

  /* --- Movimento --- */
  --ease:          cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 0.18s var(--ease);
  --t-med:  0.3s var(--ease);
  --t-slow: 0.6s var(--ease-out-expo);
  --stagger: 40ms;

  --header-h: 88px;
  --z-header: 100;
  --z-overlay: 90;
}

@media (max-width: 1100px) {
  :root { --header-h: 72px; }
}