/* ============================================================================
   VEST ARCHIVE — DESIGN TOKENS
   Il cuore del design system. Ogni valore cromatico, spaziale e tipografico
   del sito nasce da qui. Nessun valore hard-coded nelle pagine.
   ============================================================================ */

:root {
  /* ---------------------------------------------------------------------------
     1. COLOR — Base scura, rosso solo per CTA / hover / accenti
     --------------------------------------------------------------------------- */
  --c-black-abs:   #000000;   /* nero assoluto */
  --c-ink:         #08080A;   /* sfondo pagina */
  --c-ink-2:       #0D0D10;   /* sezioni alternate */
  --c-surface:     #121216;   /* card / pannelli */
  --c-surface-2:   #191920;   /* card elevata / hover */
  --c-surface-3:   #23232C;   /* input / chip */
  --c-anthracite:  #2A2A32;   /* grigio antracite */

  --c-line:        rgba(255,255,255,.09);   /* hairline standard */
  --c-line-strong: rgba(255,255,255,.16);
  --c-line-faint:  rgba(255,255,255,.045);

  --c-white:       #FFFFFF;
  --c-text:        #F4F4F5;   /* testo primario */
  --c-text-2:      rgba(255,255,255,.62);   /* testo secondario */
  --c-text-3:      rgba(255,255,255,.40);   /* muted / meta */
  --c-text-4:      rgba(255,255,255,.26);   /* faint / disabled */

  /* Rosso brand — UNICO accento cromatico saturo */
  --c-red:         #E10600;
  --c-red-600:     #C40500;   /* active / pressed */
  --c-red-400:     #FF2A24;   /* hover luminoso */
  --c-red-glow:    rgba(225,6,0,.45);
  --c-red-soft:    rgba(225,6,0,.14);   /* fill badge / tint */
  --c-on-red:      #FFFFFF;

  /* Chrome / metallo — usato per logo hero e dettagli editoriali */
  --grad-chrome: linear-gradient(155deg,#fdfdfd 0%,#c9c9d2 18%,#8f8f9c 34%,#f2f2f6 50%,#7c7c88 66%,#d6d6de 82%,#a6a6b2 100%);
  --grad-chrome-soft: linear-gradient(160deg,#f6f6f8,#b9b9c4 45%,#e9e9ee 60%,#9a9aa6);
  --grad-red:    linear-gradient(135deg,#FF2A24 0%,#E10600 45%,#9E0400 100%);
  --grad-ink-fade: linear-gradient(180deg,rgba(8,8,10,0) 0%,var(--c-ink) 92%);
  --grad-panel:  linear-gradient(180deg,#16161B 0%,#0D0D10 100%);
  --grad-red-veil: radial-gradient(120% 90% at 50% -10%, rgba(225,6,0,.22) 0%, rgba(225,6,0,0) 55%);

  /* ---------------------------------------------------------------------------
     2. TYPOGRAPHY
     Display: Archivo (semantica "archivio") — titoli enormi, expanded/black
     Sans:    Inter — UI e testo
     Mono:    Space Mono — numeri di catalogo, label, meta editoriali
     --------------------------------------------------------------------------- */
  --font-display: 'Archivo', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-sans:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Fraunces', 'Times New Roman', Georgia, serif;   /* voce editoriale ad alto contrasto */
  --font-mono:    'Space Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale — fluida (clamp) per un layout respirato e responsive */
  --fs-mega:  clamp(3.4rem, 13vw, 13rem);   /* hero display */
  --fs-h1:    clamp(2.6rem, 7vw, 6rem);
  --fs-h2:    clamp(2rem, 4.6vw, 3.6rem);
  --fs-h3:    clamp(1.4rem, 2.4vw, 2.1rem);
  --fs-h4:    clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-lg:    1.125rem;
  --fs-body:  1rem;
  --fs-sm:    0.875rem;
  --fs-xs:    0.75rem;
  --fs-2xs:   0.6875rem;   /* label / catalog nº */

  --lh-tight: 0.92;
  --lh-snug:  1.06;
  --lh-body:  1.6;

  --ls-mega:  -0.03em;
  --ls-tight: -0.02em;
  --ls-label: 0.22em;   /* label maiuscole tracked */
  --ls-wide:  0.34em;

  /* ---------------------------------------------------------------------------
     3. SPACING — scala 4px, layout respirato
     --------------------------------------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3rem;
  --sp-9: 4rem;     --sp-10: 5rem;    --sp-12: 6rem;    --sp-14: 8rem;
  --sp-16: 10rem;   --sp-20: 14rem;

  --gutter: clamp(1.25rem, 4vw, 4rem);      /* padding orizzontale pagina */
  --maxw:   1560px;                          /* larghezza max contenuto */
  --maxw-tight: 1200px;

  /* ---------------------------------------------------------------------------
     4. RADIUS — angoli leggermente arrotondati, premium
     --------------------------------------------------------------------------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  32px;
  --r-pill: 999px;

  /* ---------------------------------------------------------------------------
     5. SHADOW — moderne, morbide + glow rosso su CTA
     --------------------------------------------------------------------------- */
  --sh-sm:   0 1px 2px rgba(0,0,0,.4);
  --sh-md:   0 8px 24px -8px rgba(0,0,0,.6);
  --sh-lg:   0 24px 60px -16px rgba(0,0,0,.7);
  --sh-xl:   0 40px 120px -24px rgba(0,0,0,.85);
  --sh-card: 0 2px 4px rgba(0,0,0,.3), 0 20px 48px -24px rgba(0,0,0,.7);
  --sh-red:  0 8px 30px -6px var(--c-red-glow);
  --sh-inset-line: inset 0 0 0 1px var(--c-line);

  /* ---------------------------------------------------------------------------
     6. GLASS — effetto vetro molto leggero
     --------------------------------------------------------------------------- */
  --glass-bg:   rgba(12,12,15,.62);
  --glass-blur: saturate(140%) blur(18px);
  --glass-line: rgba(255,255,255,.08);

  /* ---------------------------------------------------------------------------
     7. MOTION — micro animazioni, hover eleganti
     --------------------------------------------------------------------------- */
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast:  .18s;
  --t-med:   .38s;
  --t-slow:  .7s;

  /* ---------------------------------------------------------------------------
     8. Z-INDEX
     --------------------------------------------------------------------------- */
  --z-nav:    100;
  --z-drawer: 200;
  --z-modal:  300;
  --z-toast:  400;

  /* Elementi UI */
  --nav-h: 72px;
  --ticker-h: 34px;
}

/* Riduzione motion per accessibilità */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* con motion ridotto: contenuto sempre visibile, nessuna dipendenza dallo scroll */
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}