/**
 * Impronta — Base
 * Reset, tipografia, classi utility GLOBALI.
 * Dipende da tokens.css — caricare dopo.
 *
 * Tema globale: questi stili si applicano a tutto il sito.
 * Le classi che esistono anche in app.css (.container, .divider...) qui
 * vincono per ordine di caricamento (base.css dopo app.css) — voluto:
 * uniformano il look al nuovo design system.
 */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:          var(--font);
  font-size:            var(--fs-base);
  font-weight:          var(--fw-regular);
  line-height:          var(--lh-base);
  color:                var(--ink);
  background:           var(--bg-grad);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height:           100vh;
  display:              flex;
  flex-direction:       column;
  overflow-x:           hidden;
}

main { flex: 1; }

img, svg { max-width: 100%; display: block; }

a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--ink); }

button { font-family: var(--font); cursor: pointer; }

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
.eyebrow {
  font-family:    var(--mono);
  font-size:      9px;
  font-weight:    var(--fw-regular);
  letter-spacing: .20em;
  text-transform: uppercase;
  color:          var(--gold);
  opacity:        .85;
}

h1, .h1 {
  font-family:    var(--font);
  font-size:      var(--fs-h1);
  font-weight:    var(--fw-light);
  line-height:    var(--lh-tight);
  letter-spacing: -.03em;
  color:          var(--ink);
}
h2, .h2 {
  font-family:    var(--font);
  font-size:      var(--fs-h2);
  font-weight:    var(--fw-regular);
  line-height:    var(--lh-snug);
  letter-spacing: -.025em;
  color:          var(--ink);
}
h3, .h3 {
  font-family:    var(--font);
  font-size:      var(--fs-h3);
  font-weight:    var(--fw-medium);
  line-height:    var(--lh-snug);
  letter-spacing: -.01em;
  color:          var(--ink);
}

.mono {
  font-family:    var(--mono);
  font-size:      var(--fs-xs);
  letter-spacing: .05em;
}

.section-label {
  font-family:    var(--mono);
  font-size:      9px;
  font-weight:    var(--fw-regular);
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--ink30);
}

/* ============================================================
   DIVISORE
   ============================================================ */
.divider {
  height:     1px;
  border:     none;
  background: var(--ln);
  margin:     var(--sp-5) 0;
}
.divider--gold {
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .18), transparent);
}

/* ============================================================
   CONTAINER
   ============================================================ */
.container {
  width:     100%;
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 var(--sp-6);
}
.container--narrow  { max-width: 680px; }
.container--wide    { max-width: 1400px; }
.container--reading { max-width: 960px; }

/* ============================================================
   UTILITY — Spacing
   ============================================================ */
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }

/* ============================================================
   UTILITY — Testo
   ============================================================ */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-muted   { color: var(--ink40); font-size: var(--fs-sm); }
.text-gold    { color: var(--gold); }
.text-sage    { color: var(--sage); }
.text-terra   { color: var(--terra); }
.text-violet  { color: var(--violet); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* ============================================================
   UTILITY — Flex/Grid
   ============================================================ */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.gap-1        { gap: var(--sp-1); }
.gap-2        { gap: var(--sp-2); }
.gap-3        { gap: var(--sp-3); }
.gap-4        { gap: var(--sp-4); }

/* ============================================================
   TIPO HD — badge colore (colori intoccabili)
   ============================================================ */
.hd-type--generator            { color: var(--hd-generator); }
.hd-type--manifesting_generator{ color: var(--hd-manifesting_generator); }
.hd-type--projector            { color: var(--hd-projector); }
.hd-type--manifestor           { color: var(--hd-manifestor); }
.hd-type--reflector            { color: var(--hd-reflector); }

/* ============================================================
   ANIMAZIONI GLOBALI
   ============================================================ */
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pulse  { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes navPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--gold-rgb), .55); opacity: 1; }
  70%  { box-shadow: 0 0 0 6px rgba(var(--gold-rgb), 0); opacity: .85; }
  100% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb), 0); opacity: 1; }
}
.nav-pulse {
  display:        inline-block;
  width:          7px;
  height:         7px;
  border-radius:  var(--rFull);
  background:     var(--gold);
  vertical-align: middle;
  margin-left:    6px;
  animation:      navPulse 1.8s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .nav-pulse { animation: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   LIGHT MODE — Tipografia premium
   Firma estetica: il Cormorant Garamond (--sacred) attivato
   sui titoli h1 in light porta la pagina da tool digitale a
   prodotto premium editoriale. In dark resta Inter (geometrico,
   cosmico). La distinzione è intenzionale e coerente col palette.
   ============================================================ */
[data-theme="light"] h1,
[data-theme="light"] .h1,
[data-theme="light"] .dash-h1,
[data-theme="light"] .home-hero__h1,
[data-theme="light"] .auth-header__h1,
[data-theme="light"] .home-h2 {
  font-family: var(--sacred);
  font-weight: 300;
  letter-spacing: -.04em;
}

[data-theme="light"] h2,
[data-theme="light"] .h2 {
  letter-spacing: -.030em;
  font-weight: var(--fw-light);
}

/* Divider gold più caldo in light */
[data-theme="light"] .divider--gold {
  background: linear-gradient(90deg, transparent, rgba(138, 90, 12, .22), transparent);
}

/* Link hover: gold in light (invece di --ink) */
[data-theme="light"] a:hover { color: var(--gold-dim); }

/* Eyebrow: più visibile su bg chiaro */
[data-theme="light"] .eyebrow,
[data-theme="light"] .section-label { opacity: 1; }