/* ══════════════════════════════════════════════════════════════════
   TUBINO — Base
   Reset, tipografia globale e stili fondamentali per il documento.
   ══════════════════════════════════════════════════════════════════ */

/* ── Reset ─────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ── Documento ─────────────────────────────────────────────────── */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-main);
    font-weight: var(--fw-regular);
    color: var(--color-text);
    background: var(--color-white);
    line-height: var(--leading-normal);
    overflow-x: hidden;
}

/* ── Link ──────────────────────────────────────────────────────── */
a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
    color: var(--color-accent-hover);
}

/* ── Immagini ──────────────────────────────────────────────────── */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── Tipografia — Heading ──────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--fw-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-snug);
    /* Nessun color: i heading ereditano dal parent container.
       Questo è fondamentale per le sezioni scure dove il parent 
       imposta color: white e i figli lo ereditano. */
}

h1 { font-size: var(--heading-lg); }
h2 { font-size: var(--heading-md); }
h3 { font-size: var(--heading-sm); }

h4 {
    font-size: var(--text-lg);
    font-weight: var(--fw-semi);
}

h5 {
    font-size: var(--text-sm);
    font-weight: var(--fw-semi);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* ── Tipografia — Corpo ────────────────────────────────────────── */
p {
    line-height: var(--leading-relaxed);
}

strong, b {
    font-weight: var(--fw-bold);
}

small {
    font-size: var(--text-sm);
}

/* ── Label / Overline ──────────────────────────────────────────── */
.label {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: var(--fw-semi);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-light);
}

.label--accent {
    color: var(--color-accent);
}

/* ── Liste ─────────────────────────────────────────────────────── */
ul, ol {
    list-style: none;
}