/* Design tokens condivisi tra playground e sito finale.
   Ogni animazione dovrebbe usare queste variabili invece di valori hardcoded,
   così quando le unisci nel sito restano coerenti tra loro. */

:root {
  /* Colori */
  --color-bg: #0b0b0f;
  --color-surface: #16161c;
  --color-text: #f5f5f7;
  --color-text-muted: #a1a1aa;
  --color-accent: #7c5cff;
  --color-accent-2: #ff5c8a;

  /* Font — Inter, con lo stack di sistema come riserva.
     Il webfont lo carica site/index.html da Google Fonts (pesi 300/400/500).
     Le pagine del playground non lo caricano e cadono sul fallback: va bene,
     lì conta il comportamento dell'animazione, non la resa tipografica. */
  --font-base: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 2rem;
  --space-5: 4rem;

  /* Timing / easing per le animazioni */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-base: 500ms;
  --duration-slow: 1000ms;
}