/* ==========================================================================
   sl-root.css — ShangriLux · fondamenta del sistema visivo
   Dark-first. Antracite a tre profondità · crema · oro nei dettagli.
   Nessun valore estetico va scritto altrove: questa è la fonte di verità.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Font del brand — self-hosted, variable, latin + latin-ext
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Bodoni Moda';
  src: url('../fonts/BodoniModa-var-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bodoni Moda';
  src: url('../fonts/BodoniModa-var-latin-ext.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/HankenGrotesk-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/HankenGrotesk-var-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Token
   -------------------------------------------------------------------------- */
:root {
  /* --- Superfici: antracite a tre profondità (hue 255, croma quasi nullo) ---
     Non è nero. Il nero puro è l'anti-reference; l'antracite ha una temperatura
     che dialoga col noce caldo degli interni reali. */
  --sl-abisso:   oklch(0.16 0.005 255); /* #0C0D0F · hero, CTA full-bleed, footer */
  --sl-base:     oklch(0.20 0.006 255); /* #141619 · fondo delle sezioni         */
  --sl-rilievo:  oklch(0.24 0.006 255); /* #1D1F22 · card, bande, campi          */

  /* --- Inchiostro: crema, tre livelli. Mai grigio: la crema porta la stessa
     temperatura calda dell'oro e della luce serale delle foto. --- */
  --sl-cream:      oklch(0.96 0.010 88); /* #F4F2EA · testo primario  17.3:1     */
  --sl-cream-soft: oklch(0.82 0.010 88); /* #C7C4BD · secondario      11.1:1     */
  --sl-cream-mute: oklch(0.66 0.012 88); /* #95928A · terziario        6.2:1     */

  /* --- Oro: solo nei dettagli. Occhielli, hairline attive, numeri, hover,
     un solo bottone pieno per schermata. Mai campiture d'oro. --- */
  --sl-gold:      oklch(0.80 0.088 88); /* #D5BB7B · oro su scuro     10.4:1     */
  --sl-gold-deep: oklch(0.52 0.095 74); /* #896020 · oro su crema      (inversi) */

  /* --- Derivati: un solo posto dove nasce ogni trasparenza --- */
  --sl-hairline:       color-mix(in oklab, var(--sl-cream) 12%, transparent);
  --sl-hairline-gold:  color-mix(in oklab, var(--sl-gold) 34%, transparent);
  --sl-veil:           color-mix(in oklab, var(--sl-cream)  5%, transparent);
  --sl-veil-strong:    color-mix(in oklab, var(--sl-cream)  9%, transparent);
  --sl-gold-veil:      color-mix(in oklab, var(--sl-gold)  12%, transparent);
  --sl-gold-hover:     color-mix(in oklab, var(--sl-gold) 78%, var(--sl-cream));

  /* --- Contesto: le sezioni dichiarano la loro profondità, i figli la leggono.
     Nessun componente deve sapere su che fondo sta. --- */
  --ctx-surface: var(--sl-base);
  --ctx-ink:     var(--sl-cream);
  --ctx-ink-soft:var(--sl-cream-soft);
  --ctx-ink-mute:var(--sl-cream-mute);

  /* --- Tipografia --- */
  --sl-display: 'Bodoni Moda', 'Times New Roman', serif;
  --sl-text:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --sl-t-display: clamp(2.75rem, 1.20rem + 6.40vw, 6rem);
  --sl-t-h1:      clamp(2.25rem, 1.30rem + 3.90vw, 4rem);
  --sl-t-h2:      clamp(1.85rem, 1.20rem + 2.70vw, 3rem);
  --sl-t-h3:      clamp(1.30rem, 1.05rem + 1.05vw, 1.75rem);
  --sl-t-lead:    clamp(1.05rem, 0.98rem + 0.35vw, 1.30rem);
  --sl-t-body:    clamp(0.97rem, 0.93rem + 0.20vw, 1.06rem);
  --sl-t-small:   0.875rem;
  --sl-t-label:   0.6875rem;

  /* Bodoni ha hairline sottili: sotto i 28px va all'opsz basso o sparisce. */
  --sl-track-display: -0.03em;
  --sl-track-label:    0.20em;

  /* --- Spazio: base 4px, scala geometrica. --- */
  --sl-s-1: 0.25rem;  --sl-s-2: 0.5rem;   --sl-s-3: 0.75rem;
  --sl-s-4: 1rem;     --sl-s-5: 1.5rem;   --sl-s-6: 2rem;
  --sl-s-7: 3rem;     --sl-s-8: 4rem;     --sl-s-9: 6rem;
  --sl-s-section: clamp(4.5rem, 6.5vw, 9rem);
  --sl-gutter:    clamp(1.5rem, 3.4vw, 3.625rem);
  --sl-measure:   68ch;

  /* --- Forma: raggi contenuti. Oltre i 20px una card smette di essere
     architettura e diventa bolla. --- */
  --sl-r-sm: 4px;
  --sl-r-md: 10px;
  --sl-r-lg: 16px;
  --sl-r-shell: clamp(14px, 1.4vw, 20px);
  --sl-r-pill: 999px;

  /* --- Profondità: offset + sfocatura. Mai un alone senza direzione.
     Regola: un elemento porta la hairline OPPURE l'ombra, mai entrambe. --- */
  --sl-lift: 0 18px 48px -12px rgb(0 0 0 / 0.55);
  --sl-deep: 0 40px 120px -24px rgb(0 0 0 / 0.70);

  /* --- Movimento --- */
  --sl-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --sl-ease-expo: cubic-bezier(0.16, 1.00, 0.30, 1);
  --sl-d-fast: 180ms;
  --sl-d-base: 420ms;
  --sl-d-slow: 900ms;
}

/* Le sezioni cambiano profondità; tutto il resto eredita. */
.sl-section            { background: var(--ctx-surface); color: var(--ctx-ink); }
.sl-section--deep      { --ctx-surface: var(--sl-abisso); }
.sl-section--raised    { --ctx-surface: var(--sl-rilievo); }

/* --------------------------------------------------------------------------
   3. Reset e basi
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  background: var(--sl-base);
  color: var(--sl-cream);
  font-family: var(--sl-text);
  font-size: var(--sl-t-body);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }

/* Bodoni è una didone: l'asse opsz è ciò che tiene in piedi le grazie
   ai corpi grandi e le ispessisce ai corpi piccoli. Va lasciato automatico. */
h1, h2, h3, h4, .sl-display {
  font-family: var(--sl-display);
  font-optical-sizing: auto;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: var(--sl-track-display);
  text-wrap: balance;
}

p { text-wrap: pretty; }
p, li { max-width: var(--sl-measure); }

/* --------------------------------------------------------------------------
   4. Superfici del browser — le parti che non disegniamo portano comunque
      il design. Selezione, cursore, scrollbar, focus, sottolineature, cifre.
   -------------------------------------------------------------------------- */
::selection {
  background: color-mix(in oklab, var(--sl-gold) 30%, transparent);
  color: var(--sl-cream);
}

:root { caret-color: var(--sl-gold); accent-color: var(--sl-gold); }

@supports (scrollbar-color: red blue) {
  html {
    scrollbar-color: color-mix(in oklab, var(--sl-cream) 22%, transparent) transparent;
    scrollbar-width: thin;
  }
}

:focus-visible {
  outline: 2px solid var(--sl-gold);
  outline-offset: 3px;
  border-radius: var(--sl-r-sm);
}
:focus:not(:focus-visible) { outline: none; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

/* I numeri di una tariffa o di una data devono incolonnarsi. */
.sl-num, time, [data-numeric] { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   5. Movimento — un solo momento d'autore, e sempre una via d'uscita
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Theme layout tokens --- */
:root {
  --sl-shell:     min(1340px, 100% - (2 * var(--sl-gutter)));
  --sl-s-section-lg: clamp(6rem, 13vh, 11rem);
  --sl-header-h:  clamp(64px, 8vh, 88px);
  --sl-track-mark: 0.34em;
}