/* ============================================================
   Marco Lavoriero · Studio di Logopedia
   Design tokens — adattato da Claude Design v1
   Fonte brand guide: brand-guide-ml_v01.md
   ============================================================ */

/* Web font: Carlito (sostituto open-source di Calibri)
   Self-hosted per GDPR-compliance e performance (no render-block su Google Fonts).
   Font in /fonts/ scaricati da fonts.gstatic.com — v4, sottoinsieme latin + latin-ext.
   Nota: per documenti/stampa usare Calibri come da brand guide.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/carlito-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/carlito-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/carlito-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/carlito-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {

  /* ── Colori: famiglia viola (pubblico giovane / principale) ── */
  --viola-primary:    #533AB7;   /* Logo bg, titoli, CTA, header */
  --viola-accent:     #7F77DD;   /* Hover, badge, link attivi */
  --viola-soft:       #EEEDFE;   /* Sfondi sezione, card, lettera M */

  /* ── Colori: famiglia teal (adulti / riabilitazione) ── */
  --teal-secondary:   #1D9E75;   /* Lettera L logo, accenti grandi (headline, icone, bordi) */
  --teal-dark:        #16785C;   /* Testi small ≤14px su sfondo neutro (WCAG AA compliant) */
  --teal-light:       #5DCAA5;   /* Icone, highlights */
  --teal-soft:        #E1F5EE;   /* Sfondi sezione adulti */

  /* ── Colori: neutri ── */
  --neutral-bg:       #F1EFE8;   /* Sfondo pagina, aree neutre */
  --neutral-white:    #FFFFFF;   /* Card, superfici in evidenza */
  --text-dark:        #2C2C2A;   /* Testo principale */
  --text-muted:       #6B6B68;   /* Testo secondario */
  --border-subtle:    #E4E2DA;   /* Bordi su sfondo neutro */

  /* ── Alias semantici (preferire questi nel CSS layout/componenti) ──
     Usare le var semantiche permette di aggiungere dark mode in futuro
     senza toccare i componenti. */
  --fg-1:             var(--text-dark);
  --fg-2:             var(--text-muted);
  --fg-on-primary:    #FFFFFF;
  --bg-1:             var(--neutral-bg);
  --bg-2:             var(--neutral-white);
  --bg-primary-soft:  var(--viola-soft);
  --bg-secondary-soft:var(--teal-soft);
  --link:             var(--viola-primary);
  --link-hover:       var(--viola-accent);

  /* ── Alias compatibilità (naming Giulio Fase 1) ──
     Mantenuti per non rompere eventuali riferimenti esistenti.
     Preferire le var complete sopra per nuovo codice. */
  --viola:            var(--viola-primary);
  --teal:             var(--teal-secondary);

  /* ── Tipografia ── */
  --font-sans:        "Carlito", "Calibri", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:        "Courier Prime", "Courier New", ui-monospace, monospace;
  --font-serif:       var(--font-sans); /* Serif vietato — rimappa su sans */

  /* Dimensioni — conversione da pt stampa a px/rem responsivo */
  --fs-display:   clamp(2rem, 1.6rem + 2vw, 2.75rem);    /* 28–36pt hero */
  --fs-h1:        clamp(1.5rem, 1.3rem + 1vw, 1.875rem); /* 18–20pt */
  --fs-h2:        1.375rem;                               /* 16pt bold */
  --fs-h3:        1.125rem;                               /* 13pt bold */
  --fs-body:      1rem;                                   /* 10–11pt */
  --fs-small:     0.875rem;
  --fs-label:     0.75rem;                                /* 8–9pt badge */
  --fs-mono:      0.8125rem;

  --lh-display:   1.1;
  --lh-heading:   1.25;
  --lh-body:      1.55;
  --lh-tight:     1.15;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-bold:      700;

  --tracking-label: 0.05em;
  --tracking-caps:  0.08em;

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

  /* ── Border radius ──
     rx=22 su ~96px → 23% del lato. Lo stesso valore è usato
     nei logo SVG — echeggiarlo nelle card grandi crea coerenza. */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  22px;      /* matches logo rx */
  --radius-pill: 999px;

  /* ── Ombre ──
     Regola brand: nessuna ombra sul logo.
     Altrove: ombre contenute, superfici piatte preferite. */
  --shadow-none:  none;
  --shadow-1:     0 1px 2px rgba(44,44,42,0.06), 0 1px 1px rgba(44,44,42,0.04);
  --shadow-2:     0 4px 12px rgba(44,44,42,0.08);
  --shadow-focus: 0 0 0 3px rgba(83,58,183,0.25);   /* viola focus ring */
  /* Logo su sfondo viola: ring bianco finissimo + ombra morbida */
  --logo-on-viola: 0 0 0 1.5px rgba(255,255,255,0.22), 0 4px 14px rgba(0,0,0,0.28);

  /* ── Motion ──
     Niente bounce, niente spring. Tono professionale/clinico. */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;

  /* ── Layout ── */
  --max-width:     1120px;
  --gutter:          28px;
}

/* ============================================================
   Reset e stili base
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  line-height: var(--lh-heading);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.display {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

small, .small {
  font-size: var(--fs-small);
  color: var(--fg-2);
}

.label {
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-2);
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--link-hover); }

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-6) 0;
}

::selection {
  background: var(--viola-soft);
  color: var(--viola-primary);
}

/* Focus visibile per accessibilità WCAG AA */
:focus-visible {
  outline: 2px solid var(--viola-accent);
  outline-offset: 2px;
}

/* ============================================================
   Contenitore layout
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}