/* =========================================================================
   CharmEEvents — Design tokens (Fase 1, approvati l'11/11/2026)
   Un solo sistema, due anime: la struttura resta identica, cambia solo
   il colore d'accento in base alla sezione.
   Uso:  <body data-anima="home">   pagine comuni e home
         <body data-anima="academy"> sezione Academy (verde)
         <body data-anima="agency">  sezione Agency (magenta)
   ========================================================================= */

:root {
  /* --- Primitivi: colori estratti dai loghi (valori esatti) --- */
  --green-300: #A0C050;   /* pennellata chiara logo Academy */
  --green-400: #8EB134;   /* pennellata media logo Academy */
  --green-500: #89AF14;   /* banda "ACADEMY" — verde di marca */
  --green-600: #5A7509;   /* derivato: testo su chiaro (5.0:1) */
  --green-700: #4E6608;   /* derivato: link/testo verde (6.2:1) */
  --green-50:  #F3F7E4;   /* derivato: fondo tenue */

  --magenta-300: #E07AAA; /* derivato: accento su fondo scuro */
  --magenta-500: #C52B74; /* logo Agency — colore di marca */
  --magenta-600: #A82262; /* derivato: hover / testo (6.5:1) */
  --magenta-50:  #FCEEF4; /* derivato: fondo tenue */

  /* Neutri leggermente "prugna" per legare le due anime */
  --ink:      #1C1A21;    /* testo principale, marchio principale */
  --ink-80:   #3D3A44;
  --muted:    #6A6672;    /* testo secondario (5.3:1 su paper) */
  --line:     #E4E1E8;
  --paper:    #FAF9F7;    /* fondo pagina */
  --white:    #FFFFFF;
  --night:    #141217;    /* fondi scuri (hero, footer) */

  /* --- Semantici (default = Home / pagine comuni) --- */
  --bg: var(--paper);
  --surface: var(--white);
  --text: var(--ink);
  --text-muted: var(--muted);
  --border: var(--line);
  --accent: var(--ink);            /* colore pieno di pulsanti e motivi */
  --on-accent: var(--white);       /* testo sopra --accent */
  --accent-text: var(--ink);       /* link e testo colorato */
  --accent-soft: #EFEDF1;          /* fondi tenui, chip */
  --focus: var(--ink);

  /* --- Tipografia (coppia A consigliata) --- */
  --font-display: "Antonio", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.7rem + 2vw, 3.2rem);
  --step-4:  clamp(2.8rem, 2rem + 4vw, 5rem);

  /* --- Spazi, raggi, ombre, movimento --- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4.5rem;
  --radius-s: 6px; --radius-m: 12px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgb(28 26 33 / 0.06), 0 4px 16px rgb(28 26 33 / 0.06);
  --beat: 0.48s;          /* "battito" delle micro-animazioni ≈ 125 bpm */
}

/* Academy: verde. Il pulsante usa il verde del logo con testo scuro (6.7:1) */
[data-anima="academy"] {
  --accent: var(--green-500);
  --on-accent: var(--ink);
  --accent-text: var(--green-700);
  --accent-soft: var(--green-50);
  --focus: var(--green-700);
}

/* Agency: magenta del logo con testo bianco (5.3:1) */
[data-anima="agency"] {
  --accent: var(--magenta-500);
  --on-accent: var(--white);
  --accent-text: var(--magenta-600);
  --accent-soft: var(--magenta-50);
  --focus: var(--magenta-600);
}

/* Sezioni scure (hero video, footer): stessi ruoli, valori chiari */
.tema-scuro { --bg: var(--night); --surface: #1E1B22; --text: #F2F0F4;
  --text-muted: #A9A5B0; --border: #34303A; --accent-soft: #26222B; --focus: #F2F0F4; }
[data-anima="academy"] .tema-scuro { --accent-text: var(--green-300); }
[data-anima="agency"]  .tema-scuro { --accent-text: var(--magenta-300); }
[data-anima="home"]    .tema-scuro { --accent: var(--white); --on-accent: var(--ink); --accent-text: var(--white); }

/* Movimento: tutte le animazioni si spengono se l'utente lo chiede */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}