:root {
  /* Testo */
  --color-ink: #2a211a;
  --color-ink-soft: #3b3128;
  --color-ink-muted: #5c5045;
  --color-ink-quiet: #4a3b2e;

  /* Accento */
  --color-accent: #8b6a4c;
  --color-accent-strong: #6b5039;
  --color-accent-strong-hover: #55402d;

  /* Fondo */
  --color-bg-start: #f7f0ea;
  --color-bg-mid: #f3eae2;
  --color-bg-end: #efe5dc;
  --color-bg-solid: #f8f1ec;

  /* Superfici */
  --color-card-bg: rgba(255, 250, 246, 0.5);
  --color-card-bg-hover: rgba(255, 250, 246, 0.6);

  /* Bordi (scala unica su rgba(139,106,76,·), vedi PLAN.md) */
  --color-border-subtle: rgba(139, 106, 76, 0.14);
  --color-border: rgba(139, 106, 76, 0.2);
  --color-border-strong: rgba(139, 106, 76, 0.4);

  --color-white: #ffffff;

  /* Superfici aggiuntive (etapa 4: pagine dell'app) */
  --color-surface-solid: #fffcfa;
  --color-surface-warm: rgba(240, 229, 219, 0.9);
  --color-surface-sand: rgba(232, 220, 208, 0.65);
  --color-tile: rgba(240, 232, 224, 0.75);
  --color-tile-hover: rgba(255, 252, 249, 0.95);
  --color-accent-wash: rgba(139, 106, 76, 0.1);
  --color-photo-tint: rgba(216, 198, 180, 0.55);
  --color-control-bg: rgba(255, 250, 246, 0.6);
  --color-control-bg-hover: rgba(216, 198, 180, 0.5);
  --color-overlay: rgba(42, 33, 26, 0.65);

  /* Testo aggiuntivo */
  --color-ink-faint: #9c8b7a;
  --color-accent-warm: #b4795a;
  --color-ink-attribution: #6b5f52;

  /* Maschere sfumate dell'eroe con foto */
  --color-bg-start-a86: rgba(247, 240, 234, 0.86);
  --color-bg-start-a45: rgba(247, 240, 234, 0.45);
  --color-bg-start-a10: rgba(247, 240, 234, 0.1);
  --color-bg-start-a0: rgba(247, 240, 234, 0);
  --color-bg-mid-a0: rgba(243, 234, 226, 0);

  /* Tipografia */
  --font-display: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
  --font-signature: 'Parisienne', cursive;

  --weight-display: 400;
  --weight-body: 400;
  --weight-body-medium: 500;
  --weight-body-bold: 700;

  --text-2xs: 9.5px;
  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 14px;
  --text-md: 16.5px;
  --text-lg: 20px;
  --text-xl: 28px;
  --text-display-sm: 34px;
  --text-display-md: 44px;
  --text-display-lg: 62px;

  /* Raggi */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-round: 50%;

  /* Spaziatura */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
}

/*
 * Breakpoint standard (adattamento mobile/tablet):
 * i valori dei media query non sono variabili CSS (limite della spec),
 * quindi vanno scritti letteralmente in ogni @media — usare sempre questi due:
 * - tablet: @media (max-width: 900px)
 * - mobile: @media (max-width: 600px)
 */