/* ==========================================================
   TOKENS DE DISEÑO · Andrea Bianchi Systema
   Todo lo visual se cambia aquí. Nada de valores sueltos en styles.css.
   ========================================================== */

:root {
  /* ---- Color ---- */
  --ink:        #0d0c0c;   /* fondo base (no negro puro) */
  --ink-2:      #161314;   /* superficies */
  --ink-3:      #221d1e;   /* superficies elevadas */
  --line:       rgb(233 230 224 / .14);
  --stone:      #e9e6e0;   /* texto principal */
  --stone-dim:  #a39e96;   /* texto secundario (AA sobre --ink) */
  --red:        #d4151c;   /* único acento: rojo del logo */
  --red-deep:   #9b0f14;
  --red-ink:    #ff4a50;   /* rojo legible para texto sobre fondo oscuro */
  --on-red:     #fff7f4;
  --paper:      #ece6da;   /* papel del diploma: sección Corso y CV */
  --paper-2:    #e1d9ca;
  --paper-ink:  #161314;
  --paper-dim:  #5b544c;   /* texto secundario sobre papel (AA) */
  --wa:         #25d366;   /* verde WhatsApp: solo el icono del botón */

  /* ---- Tipografía ---- */
  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-body:    "Schibsted Grotesk", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --fs-hero-word: clamp(5rem, 22.5vw, 34rem);
  --fs-display:   clamp(3.4rem, 9.5vw, 10rem);
  --fs-h2:        clamp(2.6rem, 6.4vw, 6.4rem);
  --fs-h3:        clamp(1.7rem, 2.6vw, 2.6rem);
  --fs-lead:      clamp(1.1rem, 1.5vw, 1.4rem);
  --fs-body:      1.0625rem;
  --fs-small:     .8125rem;

  --track-display: -.012em;   /* tracking negativo en tamaños grandes */
  --track-mono:    .14em;
  --lh-display:    .88;
  --lh-body:       1.6;

  /* ---- Espaciado ---- */
  --gutter:    clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(6rem, 14vw, 13rem);
  --nav-h:     6.25rem;
  --logo-w:    116px;         /* logo del header: 96px +0,5 cm a pedido del cliente (14/10) */
  --logo-scrolled: .88;       /* scala del logo con la barra compatta */
  --max-w:     92rem;

  /* ---- Forma (una sola regla: todo recto) ---- */
  --radius: 0;
  --stroke: 1px;

  /* ---- Sombras ---- */
  --shadow-photo: 0 40px 80px -30px rgb(0 0 0 / .7);

  /* ---- Imágenes: tratamiento común ---- */
  --photo-filter: saturate(1.05) contrast(1.03);   /* foto a colori originali (richiesta di Andrea, 15/10) */
  --photo-filter-hover: saturate(1.1) contrast(1.05);
  --photo-tint: linear-gradient(180deg, rgb(13 12 12 / 0) 70%, rgb(13 12 12 / .18));   /* solo un velo leggero in basso, senza rosso */
  --photo-bw:   grayscale(1) contrast(1.08);   /* retrato del CV */
  --hero-art-h: min(74dvh, 46rem);             /* alto del logo del caballero en el hero */
  --hero-scene-w:     min(78vw, 120rem);       /* ancho de la escena del hero (escritorio) */
  --hero-scene-pos:   46% 40%;                 /* encuadre de la escena (escritorio) */
  --hero-scene-veil:   .21;                    /* velo oscuro sobre la escena: 0 = intensa, .6 = muy suave */
  --hero-scene-filter: saturate(.82) contrast(.96);
  --hero-scene-pos-m: 47% 0%;                  /* encuadre de la escena (celular): caballero centrado */
  --hero-scene-h-m:   64svh;                   /* alto de la escena en celular */
  --hero-word-bottom-m: 22rem;                 /* respaldo; main.js lo ajusta al alto real del texto */

  /* ---- Movimiento ---- */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --dur-fast:    160ms;
  --dur-base:    420ms;
  --dur-slow:    900ms;

  /* ---- Botones del hero ---- */
  --fs-cta:      clamp(1.3rem, 1.6vw, 1.6rem);
  --cta-pad-y:   .8rem;
  --cta-pad-x:   1.7rem;
  --cta-rule:    3.2rem;    /* largo de la raya roja bajo «Perché il Systema» */
  --cta-plate:   rgb(13 12 12 / .86);   /* fondo de «Perché il Systema» */
  --whatis-bg-opacity: .55;           /* fortezza dietro «Cos'è il Systema» */
  --brush-tilt:  -1.5deg;    /* inclinación de la pincelada */
  --brush-shape: polygon(2% 14%, 9% 6%, 22% 9%, 38% 3%, 55% 7%, 71% 2%, 86% 6%, 97% 1%, 99% 22%, 96% 38%, 100% 55%, 97% 74%, 99% 93%, 88% 97%, 72% 93%, 56% 99%, 40% 94%, 24% 98%, 10% 93%, 1% 97%, 3% 78%, 0% 60%, 2% 41%, 0% 26%);

  /* ---- «Perché il Systema» ---- */
  --fs-strike:   clamp(3.6rem, 13vw, 13rem);   /* palabras tachadas: Competizione, Trofei… */
  --strike-h:    .11em;                        /* grosor de la raya roja */
  --dur-strike:  700ms;
  --fab-size:    3.5rem;

  /* ---- Asistente IA ---- */
  --assist-w:       26rem;          /* ancho del panel (escritorio) */
  --assist-h:       min(40rem, calc(100dvh - 2 * var(--gutter) - var(--nav-h)));
  --assist-h-m:     86dvh;          /* alto de la hoja en celular */
  --dur-assist:     320ms;          /* apertura del panel (cierre: 2/3) */
  --breath-cycle:   14s;            /* 4 s inspira · 4 s trattieni · 6 s espira (como «Respira con me») */

  /* ---- Textura ---- */
  --grain-opacity: .045;       /* 0 para quitar el grano */

  /* ---- z-index (escala única) ---- */
  --z-base: 1;
  --z-photo: 2;
  --z-front: 3;
  --z-fab: 45;              /* botón flotante de WhatsApp */
  --z-assist: 55;           /* panel del asistente (sobre la nav, bajo el menú) */
  --z-nav: 50;
  --z-menu: 60;
  --z-progress: 70;
  --z-intro: 80;
  --z-grain: 90;
}

/* Pantallas bajas (laptops 720–820px de alto): SYSTEMA más chica para no tapar los botones */
@media (min-width: 861px) and (max-height: 820px) {
  :root { --fs-hero-word: min(22.5vw, 33dvh); --hero-art-h: min(70dvh, 46rem); }
}