/* ==========================================================================
   VARIABLES.CSS
   Design tokens del progetto — unica fonte di verità per colori, tipografia,
   spaziature, bordi, ombre, transizioni e z-index.
   Nessun valore "magico" va scritto altrove: ogni CSS successivo deve
   referenziare queste custom property.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------
     COLORI — palette primaria
     -------------------------------------------------------------------- */
  --color-navy: #0B1F3A;          /* Blu notte — primario, header/footer/testo forte */
  --color-blue: #1E5EFF;          /* Blu istituzionale — CTA, link, stati attivi */
  --color-white: #FFFFFF;
  --color-gray-light: #F5F7FA;    /* Sfondi sezione alternati */
  --color-gold: #C9A227;          /* Accento discreto — mai dominante, solo dettagli */

  /* Varianti tonali derivate (per hover, overlay, bordi, sfondi scuri) */
  --color-navy-90: #14294A;       /* hover su superfici navy */
  --color-navy-80: #1C3358;
  --color-navy-overlay: rgba(11, 31, 58, 0.55);   /* overlay hero su video/immagine */
  --color-navy-overlay-soft: rgba(11, 31, 58, 0.25);

  --color-blue-hover: #144ACC;    /* stato hover/active CTA blu */
  --color-blue-soft: rgba(30, 94, 255, 0.08); /* sfondi tenui, badge, focus ring soft */

  --color-gold-hover: #B08F1F;
  --color-gold-soft: rgba(201, 162, 39, 0.12);

  --color-gray-100: #F5F7FA;      /* alias semantico di --color-gray-light */
  --color-gray-200: #E8ECF1;      /* bordi, divisori */
  --color-gray-300: #D5DBE3;      /* bordi più marcati, input */
  --color-gray-500: #8A93A3;      /* testo secondario su sfondo chiaro */
  --color-gray-700: #4A5568;      /* testo body su sfondo chiaro */

  --color-black: #05070C;         /* solo per ombre/overlay estremi, mai come testo puro */

  /* --------------------------------------------------------------------
     COLORI — semantici (uso funzionale, non decorativo)
     -------------------------------------------------------------------- */
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-gray-light);
  --color-bg-dark: var(--color-navy);

  --color-text-primary: var(--color-navy);
  --color-text-secondary: var(--color-gray-700);
  --color-text-muted: var(--color-gray-500);
  --color-text-on-dark: var(--color-white);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.72);

  --color-border: var(--color-gray-200);
  --color-border-strong: var(--color-gray-300);
  --color-border-on-dark: rgba(255, 255, 255, 0.16);

  --color-link: var(--color-blue);
  --color-link-hover: var(--color-blue-hover);

  --color-focus-ring: var(--color-blue);

  --color-success: #2E7D5B;
  --color-error: #B3261E;

  /* --------------------------------------------------------------------
     TIPOGRAFIA
     -------------------------------------------------------------------- */
  --font-primary: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Pesi disponibili (Manrope 300–800) */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Scala tipografica fluida (clamp: min, preferito in vw, max) */
  --fs-xs: 0.8125rem;                                   /* 13px — micro-testo, badge */
  --fs-sm: 0.9375rem;                                    /* 15px — testo secondario */
  --fs-base: 1rem;                                       /* 16px — body */
  --fs-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);   /* 18–20px — lead text */
  --fs-lg: clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);   /* 22–26px — sottotitoli */
  --fs-xl: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);      /* 28–36px — h3 */
  --fs-2xl: clamp(2.25rem, 1.85rem + 1.8vw, 3rem);       /* 36–48px — h2 */
  --fs-3xl: clamp(2.75rem, 2.1rem + 2.8vw, 4rem);        /* 44–64px — h1 sezione */
  --fs-hero: clamp(3rem, 2rem + 4.5vw, 5.5rem);          /* 48–88px — h1 hero */

  --lh-tight: 1.1;      /* titoli grandi */
  --lh-heading: 1.25;    /* titoli medi */
  --lh-base: 1.6;        /* body text */
  --lh-relaxed: 1.8;     /* testi lunghi editoriali */

  --ls-tight: -0.02em;   /* titoli grandi, look editoriale */
  --ls-normal: 0;
  --ls-wide: 0.04em;     /* micro-label, eyebrow, uppercase */
  --ls-wider: 0.12em;    /* label uppercase piccole (badge, nav) */

  /* --------------------------------------------------------------------
     SPAZIATURE — scala su base 8px
     -------------------------------------------------------------------- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 2.5rem;    /* 40px */
  --space-8: 3rem;      /* 48px */
  --space-9: 4rem;      /* 64px */
  --space-10: 5rem;     /* 80px */
  --space-11: 6.5rem;   /* 104px */
  --space-12: 8rem;     /* 128px */

  /* Spaziatura verticale tra sezioni (responsive via clamp) */
  --space-section: clamp(4rem, 3rem + 5vw, 8rem);
  --space-section-sm: clamp(2.5rem, 2rem + 2.5vw, 4rem);

  /* --------------------------------------------------------------------
     LAYOUT — container e griglia
     -------------------------------------------------------------------- */
  --container-max: 1280px;
  --container-narrow: 860px;      /* testi editoriali, colonne di lettura */
  --container-padding: clamp(1.25rem, 1rem + 2vw, 3rem);

  --grid-gap: var(--space-6);

  /* --------------------------------------------------------------------
     BORDI E RAGGI — quasi squadrati, mai arrotondati vistosamente
     -------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-full: 999px;   /* solo per elementi puntuali: dot, badge circolari */

  --border-width: 1px;
  --border-width-md: 2px;

  /* --------------------------------------------------------------------
     OMBRE — sempre molto sottili, mai "glow"
     -------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(11, 31, 58, 0.04);
  --shadow-sm: 0 2px 6px rgba(11, 31, 58, 0.06);
  --shadow-md: 0 6px 16px rgba(11, 31, 58, 0.08);
  --shadow-lg: 0 12px 32px rgba(11, 31, 58, 0.10);
  --shadow-xl: 0 20px 48px rgba(11, 31, 58, 0.14);

  --shadow-focus: 0 0 0 3px var(--color-blue-soft);

  /* --------------------------------------------------------------------
     TRANSIZIONI — coerenti con le animazioni GSAP, eleganti e misurate
     -------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast: 180ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;

  --transition-base: var(--duration-base) var(--ease-standard);
  --transition-fast: var(--duration-fast) var(--ease-standard);

  /* --------------------------------------------------------------------
     Z-INDEX — scala centralizzata per evitare conflitti di stacking
     -------------------------------------------------------------------- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-header: 500;
  --z-mega-menu: 550;
  --z-overlay: 800;
  --z-modal: 900;
  --z-toast: 950;
  --z-tooltip: 1000;

  /* --------------------------------------------------------------------
     BREAKPOINT — di riferimento (documentativi: non utilizzabili dentro
     @media, riportati qui come fonte di verità unica per responsive.css)
     mobile:  fino a 599px
     tablet:  600px – 959px
     desktop: 960px – 1279px
     wide:    1280px e oltre
     -------------------------------------------------------------------- */

}