/* ==========================================================================
   Solo i Migliori - design tokens v2.0 (2026-10-26)
   Source of truth for colors, type, spacing, radii, shadows.
   Derived from the logo (forest green #10362B + terracotta dot #C55633).
   v2: no cream/beige anywhere (PDM feedback). Surfaces are white and cool
   neutral greys; warm colors only as solid accents, never as backgrounds.
   Rules of use: ../design/DESIGN.md - live reference: ../design/index.html
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

:root {
  /* ---------- Brand: verde bosco (from the logo lettering) ---------- */
  --sm-verde-950: #071A14;   /* top bar, footer */
  --sm-verde-900: #0C2A21;   /* .section-dark background */
  --sm-verde-800: #10362B;   /* LOGO GREEN: accents, borders, active states */
  --sm-verde-700: #1B4A3B;   /* cards on dark */
  --sm-verde-600: #2D6352;   /* decorative lines only (not for text) */
  --sm-verde-300: #A9C2B6;   /* muted text on dark */
  --sm-verde-100: #DCE7E0;   /* green chip background */
  --sm-verde-50:  #EEF3EF;   /* light green panel */

  /* ---------- Brand: terracotta (from the logo dot) ---------- */
  /* Solid accents only: buttons, small labels, strokes. Never a background tint. */
  --sm-terra-700: #963B1D;   /* hover of primary button */
  --sm-terra-600: #B04A28;   /* PRIMARY ACTION + small accent text on white (AA) */
  --sm-terra-500: #C55633;   /* LOGO DOT: decorative only, large text >= 24px */
  --sm-terra-300: #E58A63;   /* accent text on dark sections (AA) */

  /* ---------- Neutri (cool greys with a hint of the logo green) ---------- */
  --sm-bianco:     #FFFFFF;  /* page background, cards */
  --sm-neutro-50:  #F5F7F6;  /* .section-tint */
  --sm-neutro-100: #ECF0EE;  /* inset panels, quotes */
  --sm-neutro-200: #DFE5E2;  /* dividers */
  --sm-neutro-300: #C9D2CD;  /* card borders */

  /* ---------- Text ---------- */
  --sm-testo-titoli:   #10231C;  /* headings */
  --sm-testo-corpo:    #2A3A33;  /* body copy */
  --sm-testo-muted:    #56655E;  /* captions, meta */
  --sm-testo-su-scuro: #F2F5F3;  /* headings + body on dark (cool off-white) */
  --sm-testo-su-scuro-muted: #A9C2B6;

  /* ---------- Semantic aliases (prefer these in page code) ---------- */
  --sm-bg:            var(--sm-bianco);
  --sm-bg-tint:       var(--sm-neutro-50);
  --sm-bg-dark:       var(--sm-verde-900);
  --sm-bg-darker:     var(--sm-verde-950);
  --sm-surface:       var(--sm-bianco);
  --sm-inset:         var(--sm-neutro-100);
  --sm-border:        var(--sm-neutro-300);
  --sm-border-soft:   var(--sm-neutro-200);
  --sm-border-dark:   rgba(242, 245, 243, 0.14);
  --sm-accent:        var(--sm-terra-600);
  --sm-accent-hover:  var(--sm-terra-700);
  --sm-accent-on-dark: var(--sm-terra-300);
  --sm-brand:         var(--sm-verde-800);
  --sm-focus:         var(--sm-terra-600);

  /* ---------- Semaforo (signal colors: dots and strokes, no soft fills) ---------- */
  --sm-sem-verde:        #1F7A4D;  /* on white */
  --sm-sem-verde-scuro:  #4FBF85;  /* on dark */
  --sm-sem-giallo:       #8A5A00;  /* text on white */
  --sm-sem-giallo-dot:   #B07A06;  /* dot on white */
  --sm-sem-giallo-scuro: #E8B53A;  /* on dark */
  --sm-sem-rosso:        #B3261E;  /* on white */
  --sm-sem-rosso-scuro:  #EF7A6A;  /* on dark */

  /* ---------- Typography ---------- */
  --sm-font-sans:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sm-font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sm-font-mono:  'JetBrains Mono', ui-monospace, Menlo, monospace;

  --sm-text-xs:   0.75rem;    /* 12px mono labels */
  --sm-text-sm:   0.875rem;   /* 14px meta, micro copy */
  --sm-text-base: 1rem;       /* 16px UI, card body */
  --sm-text-md:   1.125rem;   /* 18px prose */
  --sm-text-lg:   1.25rem;    /* 20px card titles, lead */
  --sm-text-xl:   clamp(1.35rem, 2vw, 1.6rem);     /* sub-headings */
  --sm-text-2xl:  clamp(1.75rem, 2.8vw, 2.45rem);  /* .section-title */
  --sm-text-3xl:  clamp(2rem, 3.6vw, 3.15rem);     /* page h1 */

  --sm-weight-regular: 400;
  --sm-weight-medium:  500;
  --sm-weight-bold:    700;
  --sm-weight-black:   800;

  --sm-leading-tight: 1.15;
  --sm-leading-snug:  1.35;
  --sm-leading-body:  1.65;
  --sm-tracking-tight: -0.025em;
  --sm-tracking-mono:  0.08em;

  /* Prose never wider than this: long lines read as a wall of text */
  --sm-measure: 62ch;

  /* ---------- Spacing (4px base) ---------- */
  --sm-space-1: 0.25rem;  /* 4  */
  --sm-space-2: 0.5rem;   /* 8  */
  --sm-space-3: 0.75rem;  /* 12 */
  --sm-space-4: 1rem;     /* 16 */
  --sm-space-5: 1.25rem;  /* 20: mobile side gutter */
  --sm-space-6: 1.5rem;   /* 24 */
  --sm-space-7: 2rem;     /* 32 */
  --sm-space-8: 3rem;     /* 48 */
  --sm-space-9: 5rem;     /* 80: section vertical padding */
  --sm-container: 1160px;
  --sm-container-narrow: 820px;

  /* ---------- Radii ---------- */
  --sm-radius-xs: 4px;
  --sm-radius-sm: 8px;
  --sm-radius-md: 14px;
  --sm-radius-lg: 22px;
  --sm-radius-pill: 999px;

  /* ---------- Shadows (green-tinted, never pure black) ---------- */
  --sm-shadow-sm: 0 2px 10px rgba(16, 54, 43, 0.06);
  --sm-shadow-md: 0 12px 32px rgba(16, 54, 43, 0.10);
  --sm-shadow-lg: 0 24px 60px rgba(7, 26, 20, 0.24);
  --sm-shadow-hard: 0 6px 0 var(--sm-verde-800);   /* "fascicolo" card, one per screen */
  --sm-shadow-cta: 0 10px 26px rgba(176, 74, 40, 0.28);

  /* ---------- Logo ---------- */
  --sm-logo-ratio: 1787 / 490;
  --sm-logo-min-width: 140px;
}

/* ==========================================================================
   Minimal base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sm-font-sans);
  font-size: var(--sm-text-base);
  line-height: var(--sm-leading-body);
  color: var(--sm-testo-corpo);
  background: var(--sm-bg);
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 3px solid var(--sm-focus);
  outline-offset: 2px;
}

.container { max-width: var(--sm-container); margin: 0 auto; }
.container-narrow { max-width: var(--sm-container-narrow); margin: 0 auto; }

/* ==========================================================================
   Sections: white / tint / dark
   ========================================================================== */

.section-white,
.section-tint,
.section-dark {
  padding: var(--sm-space-9) var(--sm-space-5);
}

.section-white { background: var(--sm-bianco); }
.section-tint  { background: var(--sm-neutro-50); border-top: 1px solid var(--sm-neutro-200); border-bottom: 1px solid var(--sm-neutro-200); }
.section-dark  { background: var(--sm-verde-900); color: var(--sm-testo-su-scuro); }

.section-kicker {
  display: block;
  font-family: var(--sm-font-mono);
  font-size: 0.78rem;
  font-weight: var(--sm-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--sm-tracking-mono);
  color: var(--sm-accent);
  margin-bottom: var(--sm-space-3);
}
.section-dark .section-kicker { color: var(--sm-accent-on-dark); }

.section-title {
  font-size: var(--sm-text-2xl);
  font-weight: var(--sm-weight-black);
  line-height: 1.16;
  letter-spacing: var(--sm-tracking-tight);
  color: var(--sm-testo-titoli);
  margin: 0 0 var(--sm-space-6);
  max-width: 26ch;
}
.section-dark .section-title { color: var(--sm-testo-su-scuro); }

/* Serif italic accent inside a sans heading: one or two words, never a full line */
.serif-accent {
  font-family: var(--sm-font-serif);
  font-weight: var(--sm-weight-regular);
  font-style: italic;
  font-size: 1.08em;
  letter-spacing: 0;
  color: var(--sm-brand);
}
.section-dark .serif-accent { color: var(--sm-accent-on-dark); }

/* Prose block: short paragraphs, limited measure */
.prose { font-size: var(--sm-text-md); max-width: var(--sm-measure); }
.prose p { margin: 0 0 var(--sm-space-4); }
.prose p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Mono label
   ========================================================================== */

.label-mono {
  display: inline-block;
  font-family: var(--sm-font-mono);
  font-size: var(--sm-text-xs);
  font-weight: var(--sm-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--sm-accent);
}
.label-mono--muted { color: var(--sm-testo-muted); }
.section-dark .label-mono { color: var(--sm-accent-on-dark); }
.section-dark .label-mono--muted { color: var(--sm-testo-su-scuro-muted); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sm-space-3);
  font-family: var(--sm-font-sans);
  font-weight: var(--sm-weight-black);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  border-radius: var(--sm-radius-md);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}

.btn-primary {
  font-size: 1.05rem;
  padding: 1rem 1.9rem;
  background: var(--sm-terra-600);
  color: var(--sm-bianco);
  border: 0;
  box-shadow: var(--sm-shadow-cta);
}
.btn-primary:hover { background: var(--sm-terra-700); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  font-size: var(--sm-text-base);
  padding: 0.85rem 1.5rem;
  background: transparent;
  color: var(--sm-verde-800);
  border: 2px solid var(--sm-verde-800);
}
.btn-secondary:hover { background: var(--sm-verde-800); color: var(--sm-testo-su-scuro); }

.section-dark .btn-secondary { color: var(--sm-testo-su-scuro); border-color: rgba(242, 245, 243, 0.55); }
.section-dark .btn-secondary:hover { background: var(--sm-testo-su-scuro); color: var(--sm-verde-900); border-color: var(--sm-testo-su-scuro); }

.btn-block { width: 100%; }

/* ==========================================================================
   Chip (static tag, or toggle when used as <button aria-pressed>)
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-2);
  font-family: var(--sm-font-sans);
  font-size: 0.88rem;
  font-weight: var(--sm-weight-bold);
  line-height: 1.3;
  padding: 0.55rem 1rem;
  border-radius: var(--sm-radius-pill);
  border: 1px solid var(--sm-neutro-300);
  background: var(--sm-bianco);
  color: var(--sm-testo-titoli);
}
button.chip { cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
button.chip:hover { border-color: var(--sm-verde-800); }
.chip.is-active,
.chip[aria-pressed="true"] {
  background: var(--sm-verde-800);
  border-color: var(--sm-verde-800);
  color: var(--sm-testo-su-scuro);
}
.chip--verde { background: var(--sm-verde-100); border-color: transparent; color: var(--sm-verde-800); }
.chip--mono  { font-family: var(--sm-font-mono); font-size: var(--sm-text-xs); text-transform: uppercase; letter-spacing: 0.05em; }

.section-dark .chip {
  background: rgba(242, 245, 243, 0.06);
  border-color: var(--sm-border-dark);
  color: var(--sm-testo-su-scuro);
}

/* ==========================================================================
   Scheda (card): the "fascicolo" sheet
   ========================================================================== */

.scheda {
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
  padding: var(--sm-space-6);
  color: var(--sm-testo-corpo);
}
.scheda > .label-mono { margin-bottom: var(--sm-space-2); }
.scheda h3,
.scheda h4 {
  margin: 0 0 var(--sm-space-2);
  font-size: var(--sm-text-lg);
  font-weight: var(--sm-weight-black);
  line-height: var(--sm-leading-snug);
  letter-spacing: -0.01em;
  color: var(--sm-testo-titoli);
}
.scheda p { margin: 0; font-size: 0.98rem; line-height: 1.6; }
.scheda p + p { margin-top: var(--sm-space-3); }

/* Variants: use one per group, never on every card */
.scheda--evidenza { border: 2px solid var(--sm-terra-600); }
.scheda--fascicolo { border: 2px solid var(--sm-verde-800); box-shadow: var(--sm-shadow-hard); }
.scheda--scura {
  background: var(--sm-verde-800);
  border: 0;
  border-left: 4px solid var(--sm-terra-300);
  border-radius: var(--sm-radius-sm);
  color: var(--sm-testo-su-scuro-muted);
}
.scheda--scura h3,
.scheda--scura h4 { color: var(--sm-testo-su-scuro); }
.scheda--scura .label-mono { color: var(--sm-terra-300); }

.section-tint .scheda { border-color: var(--sm-neutro-200); }

.section-dark .scheda:not(.scheda--scura):not(.surface-light) {
  background: var(--sm-verde-700);
  border-color: var(--sm-border-dark);
  color: var(--sm-testo-su-scuro-muted);
}
.section-dark .scheda:not(.scheda--scura):not(.surface-light) h3,
.section-dark .scheda:not(.scheda--scura):not(.surface-light) h4 { color: var(--sm-testo-su-scuro); }

/* ==========================================================================
   .surface-light: a white box placed INSIDE .section-dark
   Restores the light-context colors for children.
   ========================================================================== */

.section-dark .surface-light { background: var(--sm-bianco); color: var(--sm-testo-corpo); }
.section-dark .surface-light h3,
.section-dark .surface-light h4 { color: var(--sm-testo-titoli); }
.section-dark .surface-light .section-kicker,
.section-dark .surface-light .label-mono { color: var(--sm-accent); }
.section-dark .surface-light .label-mono--muted { color: var(--sm-testo-muted); }
.section-dark .surface-light .serif-accent { color: var(--sm-brand); }
.section-dark .surface-light .btn-secondary { color: var(--sm-verde-800); border-color: var(--sm-verde-800); }
.section-dark .surface-light .btn-secondary:hover { background: var(--sm-verde-800); color: var(--sm-testo-su-scuro); }
.section-dark .surface-light .chip { background: var(--sm-bianco); border-color: var(--sm-neutro-300); color: var(--sm-testo-titoli); }

/* ==========================================================================
   Citazione (pull quote): one sentence that breaks a long section
   ========================================================================== */

.citazione {
  margin: var(--sm-space-8) 0 0;
  padding-left: var(--sm-space-6);
  border-left: 4px solid var(--sm-terra-600);
  font-family: var(--sm-font-serif);
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.2;
  color: var(--sm-testo-titoli);
  max-width: 32ch;
}
.citazione small {
  display: block;
  margin-top: var(--sm-space-3);
  font-family: var(--sm-font-sans);
  font-style: normal;
  font-size: var(--sm-text-sm);
  color: var(--sm-testo-muted);
}
.section-dark .citazione { color: var(--sm-testo-su-scuro); border-left-color: var(--sm-terra-300); }
.section-dark .citazione small { color: var(--sm-testo-su-scuro-muted); }