/* ==========================================================================
   brandogallo.com — CSS Custom Properties
   Allineato al design system v1.0+ (Fase 1 migrazione, 2026-05-15).
   Foundation di riferimento (DS repo):
     COLOR_PALETTE v1.0 · FONT_STACK v6.2 · TYPE_SCALE v6.4
     SPACING v1.0 · LAYOUT v1.5.1 · BORDER_RADIUS v1.0
     MOTION v1.0 · VERTICAL_RHYTHM v6.3
   I @font-face Manrope/Lora + relativi *-fallback vivono in fonts.css
   (caricato PRIMA di questo file via 'bg-fonts' in functions.php).
   ========================================================================== */

:root {

  /* --- Colori — funzionali dark ------------------------------------------ */
  --bg:             #000000;
  --text:           #F2F2F2;
  --accent:         #E63929;

  /* --- Superfici elevate — dark (COLOR_PALETTE v1.1) ---------------------- */
  --bg-elev-1:      #111111;  /* Sezioni separate dal nero base — callout, footer, blocchi TOC */
  --bg-elev-2:      #1A1A1A;  /* Overlay su superfici — tooltip, dropdown, surface-on-surface */

  /* --- Colori — funzionali light ----------------------------------------- */
  --paper:          #F5F0E8;
  --white:          #FFFFFF;  /* Bianco puro — testo inverse, contrast su overlay scuri (COLOR_PALETTE v1.1) */

  /* --- Token UI ---------------------------------------------------------- */
  --text-2:         rgba(242, 242, 242, 0.5);
  --text-3:         rgba(242, 242, 242, 0.35);
  --border:         rgba(242, 242, 242, 0.08);
  --border-hover:   rgba(242, 242, 242, 0.38);
  --overlay:        rgba(0, 0, 0, 0.72);

  /* --- Tipografia — famiglie -------------------------------------------- */
  --f-sans:         "Manrope", "Manrope-fallback", "Helvetica Neue", Arial, sans-serif;
  --f-serif:        "Lora", "Lora-fallback", Georgia, serif;
  --f-mono:         "JetBrains Mono", "JetBrains Mono-fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- Tipografia — sizes (alias verso classi DS, da migrare in Fase 3) - */
  --size-hero:      clamp(3rem, 5vw, 5.5rem);
  --size-title:     clamp(1.8rem, 3vw, 2.8rem);
  --size-label:     0.75rem;
  --size-intro:     clamp(1rem, 1.5vw, 1.125rem);
  --size-body:      1rem;

  /* --- Tipografia — line-height (alias, da migrare in Fase 3) ----------- */
  --lh-tight:       1.1;
  --lh-body:        1.7;
  --lh-prose:       1.8;

  /* --- Tipografia — tracking (--track-* dal DS, FONT_STACK v6.3) -------- */
  --track-hero:           -0.02em;
  --track-tight:          -0.015em;
  --track-normal:         -0.01em;
  --track-body:           0;
  --track-caption:        0.01em;
  --track-link-s:         0.02em;
  --track-meta:           0.03em;
  --track-cta:            0.04em;
  --track-eyebrow-tight:  0.06em;
  --track-ui:             0.1em;
  --track-wide:           0.14em;
  --track-wider:          0.18em;

  /* --- Alias --ls-* → --track-* (da rimuovere in Fase 2 dopo grep CSS) -- */
  --ls-hero:        var(--track-tight);
  --ls-title:       var(--track-normal);
  --ls-body:        var(--track-body);
  --ls-label:       var(--track-wide);

  /* --- Spaziatura — sezioni e padding ----------------------------------- */
  --pad-x:          clamp(20px, 4vw, 40px);
  --pad-hero:       clamp(80px, 12vw, 160px);
  --pad-section:    clamp(72px, 8vw, 120px);

  /* --- Spaziatura — gap intra-componente -------------------------------- */
  --gap-section:    clamp(72px, 8vw, 120px);
  --gap-cols:       clamp(24px, 5vw, 60px);
  --gap-block:      clamp(20px, 3vw, 32px);
  --gap-figure:     clamp(16px, 2vw, 24px);
  --gap-text:       clamp(16px, 2vw, 24px);
  --gap-inline:     0.75rem;
  --gap-tight:      0.375rem;

  /* --- Layout — larghezze contenitori ----------------------------------- */
  --max-width:        1280px;
  --max-width-wide:   1440px;
  --max-width-text:   680px;
  --max-width-narrow: 480px;

  /* --- Border Radius ----------------------------------------------------- */
  --radius-img:     5px;
  --radius-card:    16px;
  --radius-btn:     2px;

  /* --- Z-index — sistema completo --------------------------------------- */
  --z-base:         0;
  --z-sticky:       100;
  --z-dropdown:     200;
  --z-overlay:      300;
  --z-modal:        400;
  --z-toast:        500;
  --z-focus:        600;

  /* --- Vertical rhythm — flusso intra-prose (em col contenitore) -------- */
  --rhythm-xs:        0.5em;
  --rhythm-s:         1em;
  --rhythm-m:         1.6em;
  --rhythm-l:         2.6em;
  --rhythm-label-top: 1.8rem; /* eccezione rem: label uppercase < 0.85rem */

  /* --- Motion ------------------------------------------------------------ */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --dur-s:          200ms;
  --dur-sm:         280ms;
  --dur-m:          400ms;
  --dur-l:          700ms;
}