/* Design tokens condivisi da tutte le pagine di ScoutHub. */
:root {
  /* Viola ScoutHub: un solo primary; le varianti derivano dallo stesso tono (270,6°) variando la luminosità. */
  --color-purple: #552583;            /* primary */
  --color-purple-700: #431D67;        /* primary dark: hover, stati attivi */
  --color-purple-800: #31164B;        /* fondi scuri */
  --color-purple-900: #211132;        /* fondo più profondo (footer) */
  --color-purple-100: #EBE1F4;        /* soft: tessere, pill, bordi */
  --color-purple-50: #F6F3FA;         /* background soft */

  /* Bordino chiaro dei blocchi colorati (come in Golee): stessa tinta, più pallida */
  --ring-purple: #D7C3EA;

  /* Giallo ScoutHub: un solo primary; varianti dallo stesso tono (41°). */
  --color-yellow: #FDB927;            /* primary */
  --color-yellow-100: #FFF0D1;        /* crema: pill, tessere */
  --color-yellow-300: #FFD270;        /* testo giallo su fondo viola */
  --color-yellow-800: #7A5200;        /* testo scuro su fondo giallo chiaro */
  --color-yellow-border: #F5D184;     /* bordi su giallo chiaro */

  /* Accenti decorativi (solo icone) */
  --color-teal: #19A58A;
  --color-coral: #F0644F;

  /* Neutri */
  --color-ink: #17121F;
  --color-muted: #5F5B6B;
  --color-subtle: #6E6A78;
  --color-line: #E8E4EE;
  --color-bg: #FFFFFF;
  --color-bg-soft: #FFFFFF;

  /* Sfondi viola: stessa famiglia, tre intensità */
  --bg-brand:                       /* ricco: "Tutto collegato" */
    radial-gradient(60% 70% at 88% 8%, rgba(176, 128, 226, 0.38), transparent 62%),
    radial-gradient(50% 60% at 4% 100%, rgba(253, 185, 39, 0.16), transparent 62%),
    linear-gradient(135deg, var(--color-purple) 0%, #4B2173 48%, #391958 100%);
  --bg-brand-soft:                  /* sobrio: "Nuove funzionalità" */
    radial-gradient(60% 80% at 92% 0%, rgba(176, 128, 226, 0.24), transparent 62%),
    linear-gradient(135deg, var(--color-purple) 0%, #431D67 100%);
  /* Tipografia */
  --font-heading: "Sora", system-ui, sans-serif;
  --font-body: "Gantari", system-ui, sans-serif;

  /* Layout */
  --header-h: 64px;
  --container: 1280px;
  --gutter: 16px;

  /* Forme e ombre */
  --radius-sm: 10px;
  --radius-md: 10px;
  --radius-lg: 24px;
  --shadow-header: 0 1px 12px rgba(23, 18, 31, 0.06);
  --shadow-panel: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); /* schermata hero e blocco PWA */
  --color-bg-neutral: #F8F8FA;                          /* grigio neutro: blocco PWA */
  --shadow-float: 0 10px 24px -10px rgba(23, 18, 31, 0.22);

  /* Movimento */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 768px) {
  :root {
    --header-h: 68px;
    --gutter: 32px;
  }
}