/* SETUP VARIABILI (Configurazione) */
:root {
  /* Colori */
  --color-bg-beige: #e6ded1;
  --color-brand-brown: #3e342b;
  --color-brand-green: #7a9939;

  --color-text-grey: #6b7280;

  /* Sfondo blocco scuro */
  --stats-bg-dark: #2a211c;
  --stats-border-dark: #1a1411;
  --stats-text-light: #e6ded1;
  --stats-text-muted: #8c7e72; /* Colore icone e descrizioni */
  --stats-text-gold: #bca68e; /* Titoli card */
  --stats-accent: #7a9939; /* Verde JE */

  /* Font */
  --font-mono: "Space Mono", monospace;
  --font-primary: "Lexend Peta", sans-serif;
  --font-secondary: "Montserrat", sans-serif;

  /* Spaziature */
  --spacing-sm: 1rem;
  --spacing-gap: 1.5rem;

  /* Card 1: Boldness (Dark Wood) */
  --card-1-bg: #4a3b32;
  --card-1-text: #e6ded1;
  --card-1-accent: #7a9939;

  /* Card 2: Sense of Self (Mossy Wood) */
  --card-2-bg: #5d7052;
  --card-2-text: #f0f1e1;
  --card-2-accent: #3e342b;
  --card-2-vine: #b1bf95;

  /* Card 3: Pathfinding (Light Birch) */
  --card-3-bg: #d4c5b0;
  --card-3-text: #3e342b;
  --card-3-accent: #7a9939;
  --card-3-vine: #4f6c24;

  /* Ombre sofisticate */
  --shadow-3d-block: 0 40px 80px -20px rgba(42, 33, 28, 0.7), 0 20px 40px rgba(0, 0, 0, 0.5);
  --shadow-carved: inset 4px 4px 10px rgba(0, 0, 0, 0.8), inset -2px -2px 5px rgba(255, 255, 255, 0.05);

  /* --- Timeline Section Variables --- */
  --timeline-sign-bg: #f2f0e6; /* Sfondo cartello */
  --timeline-header-bg: #4a5d23; /* Header verde scuro */
  --timeline-border: #5c4033; /* Colore bordi legno */
  --timeline-path: #8c7558; /* Colore sentiero terra */
  --timeline-path-glow: #ffffff; /* Colore sentiero illuminato */

  /* --- BLOG SPECIFIC PALETTE (Dal file React) --- */
  /* Sfondi */
  --blog-bg-dark: #1c1917; /* Sfondo pagina esterno */
  --blog-cover: #1f1a17; /* Copertina in pelle scura */
  --blog-paper: #fdfbf7; /* Carta interna */
  --blog-ink: #2c241f; /* Colore testo principale */

  /* Accenti */
  --blog-accent-green: #7a9939;
  --blog-accent-brown: #5c4033;

  /* Tab Colors (Esatti da React) */
  --tab-red: #d9534f; /* Mobile use */
  --tab-red-d: #c0392b; /* Desktop Key */
  --tab-yellow: #f0ad4e; /* Mobile use */
  --tab-yellow-d: #f1c40f; /* Desktop Map */
  --tab-blue: #2980b9;
  --tab-green: #27ae60;

  /* Ombre Esatte (React tailwind shadow classes convertite) */
  --shadow-notebook-mobile: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-notebook-desktop: 0 30px 70px -10px rgba(0, 0, 0, 0.9);

  /* Texture URLs */
  --tex-wood: url("https://www.transparenttextures.com/patterns/wood-pattern.png");
  --tex-scales: url("https://www.transparenttextures.com/patterns/black-scales.png");
  --tex-cardboard: url("https://www.transparenttextures.com/patterns/cardboard-flat.png");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  /* height: 100%; */
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Impostazioni base per il corpo del sito */
body {
  background-color: var(--color-bg-beige);
  color: var(--color-brand-brown);
  font-family: var(--font-secondary);
}

/* --- Utility --- */
/* per le texture (la useremo nelle card)  */
.texture-overlay {
  background-image: url(../img/wood-pattern.png);
  /* Nota: per produzione sarebbe meglio scaricare questa immagine in assets/img/wood-pattern.png */
}

.opacity-0 {
  opacity: 0;
}

.stop-scrolling {
  overflow: hidden !important;
  height: 100vh !important; /* Forza l'altezza pari allo schermo */
  position: fixed !important; /* Blocca fisicamente il body */
  width: 100% !important;
}