/* =============================================================
   LIQUID THEME — "MAESTRO" v1.1.0

   ATTENZIONE: questo file e' caricato GLOBALMENTE per ogni visitatore ed e'
   l'ULTIMO foglio della cascata (index.html, dopo il design system). Quello
   che dichiara qui vince su liquid-design-system-v*.css. Non e' il tema di un
   tenant, nonostante il nome storico "fincantieri" da cui e' stato rinominato.
   Ground truth: /home/marcello/mockups/home-fincantieri-ai.html
   Rollback: rimuovere il <link> di questo file da index.html.

   Font policy (decisione PM 2026-06-12):
     - Space Grotesk  -> display/heading
     - JetBrains Mono -> UI (nav, bottoni, badge, meta, footer)
     - Inter          -> body lungo (lesson, docs, legal) [invariato]

   Color policy (riconciliazione 2026-08-12):
     - AZIONE  -> viola --lp-accent, EREDITATO dal design system. Questo layer
                  non lo sovrascrive piu'. Fino al 2026-08-12 lo forzava ad
                  arancio mentre 397 letterali nel markup restavano viola:
                  il prodotto mostrava due colori d'azione insieme.
     - MARCA   -> caldo (--lp-accent-warm, ::selection, footer, occhielli).
                  E' l'unico registro che questo layer possiede.
   ============================================================= */

/* ── Font self-hosted (variable, latin subset) ─────────────── */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-var-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-var-latin.woff2') format('woff2');
}

/* ── Token override ────────────────────────────────────────── */
:root {
  /* Surface */
  --lp-bg: #04060a;
  --lp-bg-elevated: #070b12;
  --lp-surface: rgba(9, 13, 20, 0.6);
  --lp-surface-strong: rgba(9, 13, 20, 0.7);
  --lp-surface-overlay: rgba(10, 14, 22, 0.92);
  --lp-border: rgba(232, 236, 241, 0.14);
  --lp-border-strong: rgba(232, 236, 241, 0.24);
  --lp-border-active: rgba(108, 60, 225, 0.55); /* segue l'azione, non la marca */

  /* Text */
  --lp-text: #e8ecf1;
  --lp-muted: #8b95a3; /* schiarito vs mockup #6b7684 per WCAG AA su bg #04060a */
  /* Schiarito 2026-08-19 con lo stesso criterio applicato a --lp-muted qui sopra,
     che era rimasto indietro: #6b7684 dava 4,15:1 su --lp-bg, 4,32:1 sul nero
     d'osservatorio e 3,87:1 sulla superficie elevata — sotto AA su ogni fondo del
     prodotto. liquid-design-system-v103.css documenta questo token come tarato a
     4,52:1, ma il suo valore non arriva mai al browser: questo layer e' l'ultimo
     <link> di index.html e vince. #7f8da3 da' 5,31:1 sul fondo peggiore e resta
     piu' spento di --lp-muted, quindi la gerarchia dei toni non si appiattisce. */
  --lp-faint: #7f8da3;
  --lp-inverse: #10120f;

  /* Accent — DUE REGISTRI (riconciliazione 2026-08-12).
     Questo layer NON sovrascrive piu' --lp-accent: il viola del design system
     resta il colore dell'AZIONE, coerente col theme_color del manifest PWA e
     coi 397 letterali gia' presenti nel markup. Qui sotto restano solo i
     registri che appartengono davvero al re-theme: la MARCA (caldo) e i dati.
     Prima l'override rendeva arancioni i controlli mentre il markup restava
     viola: due colori d'azione sulla stessa schermata. */
  /* Schiarito 2026-08-19 da #4b81b8. La taratura precedente valeva per l'uso come
     SUPERFICIE con inchiostro scuro sopra (4,60:1), ma liquid-dark-bridge.css lo
     usa anche come COLORE DI TESTO — `.lp-shell-unified a { color: var(--lp-accent-2) }`
     ha specificita' (0,1,1) e batte ogni regola a classe singola, quindi finisce su
     tutti i link dei componenti. Come testo sul fondo pagina dava 4,46:1, sotto
     soglia. #5a90c7 da' 5,43:1 come testo e 5,60:1 come superficie: migliora
     entrambi gli usi invece di scambiarne uno con l'altro. */
  --lp-accent-2: #5a90c7;
  --lp-accent-warm: #ff9a3c;
  --lp-accent-light: #f89b4d; /* era referenziato dal wordmark ".cloud" e da
                                 altri 247 punti ma MAI definito: rendevano il
                                 fallback. Il valore e' quello che gia' usciva. */
  --lp-accent-success: #41d98c;

  /* Inchiostro legale degli accenti che QUESTO layer ridefinisce, misurato su
     --lp-inverse #10120f. Sono tutti chiari e prendono lo scuro:
       --lp-accent-2        scuro  4.60:1   (bianco darebbe 4.18:1)
       --lp-accent-warm     scuro  8.91:1   (bianco darebbe 2.11:1)
       --lp-accent-success  scuro 10.34:1   (bianco darebbe 1.82:1)
     --lp-on-accent NON e' ridefinito di proposito: --lp-accent ora e' il viola
     del design system, che e' scuro e prende il BIANCO (6.23:1). Ridefinirlo
     qui sullo scuro riporterebbe i pulsanti primari a 3.23:1. */
  --lp-on-cyan: #10120f;
  --lp-on-warm: #10120f;
  --lp-on-success: #10120f;

  /* Glow */
  --lp-glow: rgba(108, 60, 225, 0.34); /* l'alone d'azione segue il viola */
  --lp-glow-warm: rgba(255, 154, 60, 0.42);
  --lp-glow-cyan: rgba(74, 127, 181, 0.32);

  /* Typography */
  --lp-font-display: 'Space Grotesk', system-ui, sans-serif;
  --lp-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  /* --lp-font-body resta Inter (leggibilità testi lunghi) */

  /* Shadows ricalcolate sul glow orange */
  --lp-shadow-glow: 0 0 30px var(--lp-glow), 0 4px 18px rgba(0, 0, 0, 0.5);
  --lp-shadow-glow-warm: 0 8px 32px rgba(255, 106, 0, 0.35), 0 4px 18px rgba(0, 0, 0, 0.5);
}

::selection { background: #ff6a00; color: #000; }

/* ── Heading: Space Grotesk leggero, tracking largo ────────── */
.lp-shell-unified h1,
.lp-shell-unified h2,
.lp-shell-unified h3 {
  font-family: var(--lp-font-display);
  font-weight: 300;
  letter-spacing: 0.08em;
}

/* ── Mobile: il tracking largo e il peso leggero sono scelte da desktop ──────
   Questo layer non aveva alcun breakpoint mobile pur vincendo la cascata, e
   applicava gli stessi valori a ogni viewport. Misurato a 360px, dove il clamp
   dei titoli cade sul minimo (40px): letter-spacing 0.08em vale 3,2px per
   carattere, quindi un titolo di 22 caratteri spende 70px in soli spazi — il
   21% della larghezza utile (328px). Portandolo a 0.02em se ne recuperano 53.
   Il peso sale da 300 a 400 perche' le aste sottili di un carattere display su
   fondo scuro perdono definizione alle dimensioni piccole: e' il problema di
   leggibilita' mobile piu' comune sui temi scuri. */
@media (max-width: 640px) {
  .lp-shell-unified h1,
  .lp-shell-unified h2,
  .lp-shell-unified h3 {
    letter-spacing: 0.02em;
    font-weight: 400;
  }

  /* Bersagli tattili: 40px basta al minimo WCAG (24px) ma non al dito.
     44px e' la misura comoda, ed e' quella che la landing statica usa gia'. */
  .lp-shell-unified :is(.btn, .lp-button) {
    min-height: 44px;
  }

  /* Il tracking a 0.18em sui controlli mono costa larghezza quanto sui titoli:
     su schermo stretto un'etichetta di bottone va a capo o trabocca. */
  .lp-navbar-link,
  .lp-button,
  .lp-badge,
  .lp-breadcrumb {
    letter-spacing: 0.08em;
  }
}
.lp-shell-unified h1 b, .lp-shell-unified h1 strong,
.lp-shell-unified h2 b, .lp-shell-unified h2 strong {
  font-weight: 600;



  color: #ff6a00;
}

/* ── UI mono uppercase: nav, bottoni, badge, meta ──────────── */
.lp-navbar-link,
.lp-button,
.lp-badge,
.lp-breadcrumb,
.liquid-footer {
  font-family: var(--lp-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.lp-button { font-size: 12px; border-radius: var(--lp-radius-pill); }
/* Piatto, non sfumato: DESIGN.md vieta i gradienti sui pulsanti. */
.lp-button--primary {
  background: var(--lp-accent);
  color: var(--lp-on-accent);
  font-weight: 700;
}
.lp-button--primary:hover { transform: translateY(-2px); color: var(--lp-on-accent); }
.lp-button--ghost {
  background: rgba(10, 14, 22, 0.4);
  border: 1px solid var(--lp-border);
}
/* In hover cambia il bordo e l'elemento si solleva: il testo resta al suo
   colore di riposo invece di virare su un arancio che non e' un'azione. */
.lp-button--ghost:hover { border-color: var(--lp-border-active); }

/* ── Button contract: .btn e .lp-button condividono la stessa UI ────────
   Le pagine legacy usano .btn, i componenti Liquid usano .lp-button.
   Il contratto è scoped al guscio pubblico per non alterare dashboard/admin. */
.lp-shell-unified :is(.btn, .lp-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.7rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--lp-radius-pill);
  font-family: var(--lp-font-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease,
    border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.lp-shell-unified :is(.btn, .lp-button):focus-visible {
  outline: 2px solid var(--lp-accent-2, #4b81b8);
  outline-offset: 3px;
}

.lp-shell-unified :is(.btn, .lp-button):active {
  transform: translateY(1px);
}

.lp-shell-unified :is(.btn-primary, .lp-button--primary) {
  background: var(--lp-accent);
  color: var(--lp-on-accent) !important;
  box-shadow: 0 8px 24px rgba(108, 60, 225, 0.32);
}

.lp-shell-unified :is(.btn-primary, .lp-button--primary):hover {
  background: var(--lp-accent);
  color: var(--lp-on-accent) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px var(--lp-glow), 0 6px 20px rgba(0, 0, 0, 0.6);
}

.lp-shell-unified :is(.btn-ghost, .lp-button--ghost,
  .btn-outline-primary, .btn-secondary) {
  background: rgba(10, 14, 22, 0.44);
  border-color: var(--lp-border, rgba(255, 255, 255, 0.16));
  color: var(--lp-text, #f4f1ea) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.lp-shell-unified :is(.btn-ghost, .lp-button--ghost,
  .btn-outline-primary, .btn-secondary):hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--lp-border-active);
  color: var(--lp-text) !important;
  transform: translateY(-1px);
}

.lp-shell-unified :is(.btn-lg, .lp-button--lg) {
  min-height: 48px;
  padding: 0.85rem 1.5rem;
  font-size: 0.8rem;
}

.lp-shell-unified :is(.btn-sm, .lp-button--sm) {
  min-height: 36px;
  padding: 0.58rem 0.9rem;
  font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .lp-shell-unified :is(.btn, .lp-button) { transition: none; }
  .lp-shell-unified :is(.btn, .lp-button):hover { transform: none; }
}

/* ── Navbar: pill flottante stile mockup ───────────────────── */
/* La banda v100 (bg + border-bottom su .lp-navbar) cattura il glow arancione
   di mesh/shader e lo taglia sotto la pill → barra spuria sotto il menu.
   Mockup home-fincantieri-ai.html: header trasparente, solo la pill è glass. */
.lp-navbar {
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.lp-navbar-links {
  flex: 0 1 auto;            /* la pill avvolge i link, non tutta la riga (v100: flex:1) */
  margin-inline: auto;       /* centrata fra brand e azioni */
  gap: 0.25rem;
  justify-content: safe center;
  white-space: nowrap;
  overflow-x: auto;          /* 1025–1439px: scroll orizzontale senza scrollbar visibile */
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: rgba(10, 14, 22, 0.72);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-pill);
  padding: 0.45rem 0.7rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lp-navbar-links::-webkit-scrollbar { display: none; }
.lp-navbar-link {
  font-size: 12px;
  letter-spacing: 0.13em;    /* 8 voci su una sola riga entro il container 1440px */
  border-radius: var(--lp-radius-pill);
  padding: 0.45rem 0.6rem;
  white-space: nowrap;
}
.lp-navbar-link:hover { background: rgba(255, 255, 255, 0.08); }
/* Attivo = inchiostro pieno, non un accento: e' la regola di navigazione di
   DESIGN.md ("attenuato a riposo, pieno in hover e attivo"). Il viola d'azione
   qui darebbe 3.26:1 sul fondo scuro, sotto AA per testo. */
.lp-navbar-link--active { color: var(--lp-text); }
.lp-navbar-brand-text {
  font-family: var(--lp-font-display);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lp-navbar-brand-accent { color: var(--lp-text); } /* Brand 2026-08: wordmark unito bianco, ".cloud" arancio */

/* ── Numerazione sezioni "0X / NOME" (utility per template) ── */
.lp-snum {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--lp-font-mono);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lp-muted);
}
.lp-snum::after { content: ""; width: 48px; height: 1px; background: #ff6a00; }

/* ── Card: hover orange + lift (course card mockup) ────────── */
.lp-shell-unified .lp-content-panel--interactive:hover {
  border-color: var(--lp-border-active);
  transform: translateY(-6px);
}

/* ── Footer: mono uppercase minimale ───────────────────────── */
.liquid-footer { font-size: 12px; letter-spacing: 0.16em; }
.liquid-footer .accent { color: #ff9a3c; }

/* ── Migrate 'Outfit' → Space Grotesk (liquid-portal-v6.css F4) ───────────── */
.lp-shell-unified .lp-page-title,
.lp-shell-unified .lp-section-title,
.lp-shell-unified .lp-course-title,
.lp-shell-unified .lp-cta-final h3,
.lp-shell-unified .lp-tier-name,
.lp-shell-unified .lp-tier-amount,
.lp-shell-unified .lp-instructor-name,
.lp-shell-unified .lp-stat-num,
.lp-shell-unified .course-title,
.lp-shell-unified .tier-name,
.lp-shell-unified .tier-price,
.lp-shell-unified .testimonial-quote,
.lp-shell-unified .testimonial-quote::before,
.lp-shell-unified .cat-orb,
.lp-shell-unified .section-head h2,
.lp-shell-unified .section-head h3 {
  font-family: var(--lp-font-display);
}
.lp-shell-unified .liquid-footer-brand span { font-family: var(--lp-font-mono); }
.lp-shell-unified .liquid-chat-title { font-family: var(--lp-font-mono); letter-spacing: 0.1em; }

/* ── Grain overlay (cinematico, sotto modali) ──────────────── */
.lp-shell-unified::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--lp-z-floating);
  pointer-events: none;
  opacity: 0.07;
  /* No mix-blend-mode: evita stacking context + compositing cost durante scroll */
  transform: translateZ(0);  /* GPU layer esplicito */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Niente grain dove serve leggibilità piena */
.lp-shell-unified[data-route-kind="admin"]::after,
.lp-shell-unified[data-route-kind="learning"]::after { content: none; }