/*
 * Errore Medico Risarcimento — Design Tokens
 *
 * Palette: navy/gold/green — studio legale responsabilità medico-sanitaria
 * Font: Inter (sans-serif corpo) + Newsreader (serif titoli)
 */

:root {

  /* ── Palette colori ──────────────────────────────────────────────────────── */
  --navy:         #08152A;   /* Sfondo principale, header, hero */
  --navy-2:       #0F1B33;   /* Sfondi secondari scuri */
  --navy-3:       #13264A;   /* Variante navy più intensa */

  --gold:         #C9A45D;   /* Accenti, label, icone */
  --gold-dark:    #B8860B;   /* Eyebrow, testi gold */

  --green:        #1A7A4C;   /* CTA primario */
  --green-dark:   #145F3B;   /* Hover CTA */

  --red:          #C0392B;   /* Link telefono */
  --blue:         #2E5090;   /* Focus form */

  --ink:          #10172A;   /* Testo scurissimo */
  --text:         #1A1A2E;   /* Testo body */
  --muted:        #667085;   /* Testo secondario */
  --line:         #E2E8F0;   /* Bordi */
  --soft:         #F7F9FC;   /* Sfondi chiari */
  --white:        #FFFFFF;

  --shadow:       0 24px 80px rgba(8,21,42,.15);
  --shadow-sm:    0 12px 50px rgba(8,21,42,.06);
  --radius:       22px;

  /* Alias per compatibilità con base.css boilerplate */
  --color-primary:         var(--navy);
  --color-primary-hover:   var(--navy-2);
  --color-secondary:       var(--gold);
  --color-text:            var(--text);
  --color-text-muted:      var(--muted);
  --color-text-light:      rgba(255,255,255,.72);
  --color-text-on-primary: var(--white);
  --color-bg:              var(--white);
  --color-bg-alt:          var(--soft);
  --color-bg-dark:         var(--navy);
  --color-border:          var(--line);
  --color-success:         var(--green);
  --color-error:           var(--red);

  /* ── Tipografia ──────────────────────────────────────────────────────────── */
  --sans:   "Inter", system-ui, sans-serif;
  --serif:  "Newsreader", Georgia, serif;

  /* Alias boilerplate */
  --font-body:    var(--sans);
  --font-heading: var(--serif);
  --font-mono:    'Courier New', monospace;

  /* Scala tipografica fluid */
  --fs-hero:    clamp(48px, 6.2vw, 104px);
  --fs-section: clamp(36px, 4.5vw, 76px);
  --fs-card:    clamp(24px, 2.4vw, 38px);
  --fs-body-lg: clamp(17px, 1.15vw, 21px);
  --fs-body:    16px;

  /* Scale fissa (alias boilerplate) */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --text-5xl:  3.75rem;

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.5;
  --leading-loose:  1.8;

  --tracking-tight:   -.055em;
  --tracking-normal:   0;
  --tracking-wide:     .05em;
  --tracking-wider:    .1em;
  --tracking-widest:   .14em;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* ── Spaziatura sezioni ──────────────────────────────────────────────────── */
  --section-y-sm:  clamp(64px,  7vw, 104px);
  --section-y-md:  clamp(84px,  9vw, 140px);
  --section-y-lg:  clamp(104px, 12vw, 180px);
  --section-gap:   clamp(34px,  4.5vw, 72px);

  /* Alias boilerplate spacing */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ── Layout ──────────────────────────────────────────────────────────────── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1240px;
  --container-2xl:  1440px;
  --container-max:  1600px;
  --container-padding-x: clamp(22px, 7vw, 110px);

  /* ── Bordi & raggi ───────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   var(--radius);
  --radius-full: 9999px;
  --border-width: 1px;

  /* ── Transizioni ─────────────────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-slower: 700ms ease;

  /* ── Z-index ─────────────────────────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 1200;
  --z-sticky:   1000;
  --z-overlay:  1100;
  --z-modal:    1300;
  --z-toast:    1400;

  /* ── Header ──────────────────────────────────────────────────────────────── */
  --header-height:        78px;
  --header-height-mobile: 62px;
  --header-bg:            rgba(255,255,255,.78);
  --header-bg-scrolled:   rgba(255,255,255,.92);
  --header-border:        rgba(255,255,255,.65);
}

/* Mobile overrides */
@media (max-width: 760px) {
  :root {
    --section-y-sm: 54px;
    --section-y-md: 68px;
    --section-y-lg: 82px;
    --section-gap:  28px;
    --fs-hero:    44px;
    --fs-section: 36px;
    --fs-card:    26px;
    --fs-body-lg: 17px;
  }
}

/* ── Breakpoints (documentazione) ───────────────────────────────────────────── */
/*
  Mobile:   < 760px
  Tablet:   760px – 1119px
  Desktop:  ≥ 1120px
*/