/* =========================================================================
   LF Immobiliare — Design Tokens (design system CONGELATO)
   Fonte di verità visiva: lf-hero-direzione-finale.html + brief §6.
   Tutti i token sono prefissati --lf- per evitare collisioni nel sito esistente.
   Accessibilità: contrasti verificati a WCAG AA (vedi design-system.md).
   ========================================================================= */

:root {
  /* ---- Palette grezza (HEX esatti dal logo / design congelato) ---- */
  --lf-slate:        #2A3C44; /* base/brand: titoli, header */
  --lf-slate-2:      #35505A; /* superfici scure secondarie */
  --lf-teal:         #1F8A8A; /* SOLO riempimenti grandi, icone, accenti grandi */
  --lf-teal-strong:  #176E6E; /* testo e bottoni (AA: bianco su questo = 6.01) */
  --lf-mint:         #E6F2F2; /* sfondi tenui, fascia commissioni */
  --lf-ink:          #1E2B31; /* testo ad alto contrasto */
  --lf-muted:        #5E7178; /* testo secondario (AA su bianco = 5.11) */
  --lf-line:         #E3EAEC; /* bordi/divisori */
  --lf-bg:           #F5F8F8; /* sfondo pagina */
  --lf-white:        #FFFFFF; /* dominante */

  /* ---- Token semantici (USARE QUESTI nei componenti) ---- */
  --lf-text:            var(--lf-ink);        /* corpo testo */
  --lf-text-secondary:  var(--lf-muted);      /* testo secondario/caption */
  --lf-heading:         var(--lf-slate);      /* titoli */
  --lf-accent:          var(--lf-teal-strong);/* link, testo accento, BOTTONI (AA) */
  --lf-accent-fill:     var(--lf-teal);       /* riempimenti grandi/icone (NON testo piccolo) */
  --lf-surface:         var(--lf-white);
  --lf-surface-alt:     var(--lf-bg);
  --lf-surface-accent:  var(--lf-mint);
  --lf-border:          var(--lf-line);
  --lf-on-accent:       var(--lf-white);      /* testo sopra accent/accent-fill */

  /* ---- Tipografia ----
     Titoli: Fraunces (serif). Corpo: Hanken Grotesk (con fallback system stack:
     ammesso dal brief per spingere sulla velocità nel corpo). */
  --lf-font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --lf-font-body:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
                     Roboto, Helvetica, Arial, sans-serif;

  /* Scala tipografica (rem, base 16px). Display fluido 38px -> 54px (hero). */
  --lf-fs-eyebrow:  0.75rem;   /* 12px */
  --lf-fs-caption:  0.8125rem; /* 13px */
  --lf-fs-small:    0.875rem;  /* 14px */
  --lf-fs-body:     1rem;      /* 16px */
  --lf-fs-lead:     1.125rem;  /* 18px */
  --lf-fs-h3:       1.375rem;  /* 22px */
  --lf-fs-h2:       1.75rem;   /* 28px */
  --lf-fs-h1:       2.25rem;   /* 36px (mobile) */
  --lf-fs-display:  clamp(2.375rem, 1.6rem + 3.2vw, 3.375rem); /* 38 -> 54px */

  --lf-fw-regular: 400;
  --lf-fw-medium:  500;
  --lf-fw-semibold:600;
  --lf-fw-bold:    700;

  --lf-lh-heading: 1.08;
  --lf-lh-snug:    1.25;
  --lf-lh-body:    1.55;

  --lf-ls-eyebrow: 0.09em;  /* ~1.4px su 12px */
  --lf-ls-heading: -0.01em;

  /* ---- Spaziatura (base 4px) ---- */
  --lf-space-1: 0.25rem;  /* 4 */
  --lf-space-2: 0.5rem;   /* 8 */
  --lf-space-3: 0.75rem;  /* 12 */
  --lf-space-4: 1rem;     /* 16 */
  --lf-space-5: 1.25rem;  /* 20 */
  --lf-space-6: 1.5rem;   /* 24 */
  --lf-space-8: 2rem;     /* 32 */
  --lf-space-10: 2.5rem;  /* 40 */
  --lf-space-12: 3rem;    /* 48 */
  --lf-space-16: 4rem;    /* 64 */

  /* ---- Raggi (dal design congelato) ---- */
  --lf-radius-xs:  5px;   /* monogramma */
  --lf-radius-sm:  9px;   /* bottoni */
  --lf-radius-md:  13px;  /* input, lead form */
  --lf-radius-lg:  16px;  /* card, contenitori */
  --lf-radius-pill: 999px;

  /* ---- Ombre ---- */
  --lf-shadow-card:  0 10px 28px rgba(42,60,68,.08);
  --lf-shadow-float: 0 10px 26px rgba(0,0,0,.18);
  --lf-shadow-frame: 0 22px 60px rgba(42,60,68,.20);

  /* ---- Layout ---- */
  --lf-container: 1080px;
  --lf-gutter: var(--lf-space-4);

  /* ---- Focus (accessibilità: focus sempre visibile) ---- */
  --lf-focus-ring: 0 0 0 3px rgba(23,110,110,.45);
  --lf-focus-outline: 2px solid var(--lf-teal-strong);

  /* ---- Motion ---- */
  --lf-transition: 160ms ease;
}

/* Breakpoint principale (mobile-first): il layout passa a desktop oltre 760px.
   Riferimento per i media query nei componenti:
     @media (min-width: 760px)  -> desktop
*/