/* ============================================================
   DG ATHLETIC CLUB — DESIGN TOKENS (membership premium)
   Obiettivo: app a uso quotidiano, calma e pulita.
   Principio guida: RESTRAINT. Un solo accento, glow ridotti,
   tutto su griglia. Riferimenti: Whoop, Oura, Nike Training Club.

   Come usarlo: incolla questo :root al posto di quello attuale
   in OGNI pagina (membership/settimana/scheda/cardio/nutrizione/
   progressi/profilo) e nav.js. I nomi storici (--bg, --card,
   --ciano, ecc.) sono mantenuti → migrazione senza rotture.
   ============================================================ */

:root {
  /* ── COLORI: base navy + UN accento (ciano) ───────────────
     Regola: il ciano appare nel ~10% dell'UI (CTA, stato attivo,
     "oggi", progresso). Le card normali sono neutre, NON ciano. */
  --bg:    #0A0E14;   /* sfondo app */
  --surf:  #0E1620;   /* superfici leggermente sopra il bg */
  --card:  #111A24;   /* card neutra (default) — niente gradiente ciano */
  --raise: #16202B;   /* elementi sopra le card (toggle, input) */

  --line:  rgba(255,255,255,0.08);   /* divisori */
  --line2: rgba(255,255,255,0.14);   /* bordi più visibili */

  /* Testo — contrasto alzato per leggibilità quotidiana */
  --tx:   #EDEFF2;   /* testo primario */
  --tx2:  #AEB6BD;   /* secondario (alzato da #9AA0A6 per WCAG) */
  --dim:  #6B7178;   /* solo micro-label uppercase */

  /* Accenti — usare con parsimonia */
  --ciano: #00C8DB;  /* accento primario */
  --ciano-soft: rgba(0,200,219,0.12); /* fill tenue per stati attivi */
  --oro:   #F0C040;  /* secondario: cardio / warning */
  --verde: #22C55E;  /* successo / completato */
  --rosso: #E85555;  /* distruttivo */
  --ink:   #04282B;  /* testo su sfondo ciano (CTA) */

  /* ── SPACING: scala 4/8pt (UNICA) ─────────────────────────
     Usa SOLO questi valori. Niente 14/18/22 sparsi. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  /* Default consigliati */
  --pad-card: 20px;      /* padding interno card */
  --gap-card: 12px;      /* spazio tra card */
  --pad-page: 16px;      /* margine laterale pagina */
  --gap-section: 28px;   /* tra sezioni */

  /* ── TYPE SCALE: modulare ~1.25 (UNICA) ───────────────────
     Display = Flatline. Corpo = DM Sans. Body mai sotto 13px. */
  --f-xs:  12px;   /* micro-label / eyebrow uppercase */
  --f-sm:  14px;   /* note, sub */
  --f-md:  16px;   /* corpo base */
  --f-lg:  20px;   /* sottotitoli */
  --f-xl:  26px;   /* titoli sezione (Flatline) */
  --f-2xl: 34px;   /* titoli pagina (Flatline) */
  --f-3xl: 44px;   /* hero (Flatline) */

  --lh-tight: 1.1;   /* titoli */
  --lh-body:  1.55;  /* corpo */

  /* Letter-spacing */
  --ls-eyebrow: 0.14em;  /* micro-label uppercase (questo lo fai già bene) */
  --ls-title:  -0.01em;  /* titoli grandi: leggermente stretti (stile Linear) */

  /* Pesi (max 3 in uso) */
  --w-reg: 400;
  --w-med: 500;
  --w-bold: 700;

  /* ── RAGGI: solo 2 + pillola ──────────────────────────────*/
  --r-sm: 12px;   /* elementi piccoli: input, chip, bottoni piccoli */
  --r-lg: 18px;   /* card e contenitori */
  --r-pill: 999px;

  /* ── OMBRE: NEUTRE e morbide (niente glow colorati) ───────
     Il glow ciano è ciò che più "abbassa" la qualità: rimosso.
     Profondità solo con ombre nere soft. */
  --sh-1: 0 2px 8px rgba(0,0,0,0.30);
  --sh-2: 0 8px 28px rgba(0,0,0,0.40);   /* card in rilievo / modali */
  /* Eccezione: SOLO la CTA primaria può avere un alone ciano tenue */
  --sh-cta: 0 6px 20px rgba(0,200,219,0.22);

  /* ── MOTION ───────────────────────────────────────────────*/
  --ease: cubic-bezier(.22,1,.36,1);
  --dur:  .18s;

  /* ── TOUCH TARGET ─────────────────────────────────────────*/
  --tap: 44px;       /* minimo per elementi cliccabili */
  --btn-h: 52px;     /* altezza bottone primario */
}

/* ============================================================
   COMPONENTI DI RIFERIMENTO (primitive da riusare ovunque)
   ============================================================ */

/* CARD neutra di default. Il ciano NON è il default. */
.card-base {
  background: var(--card);
  border: 0.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--pad-card);
}

/* Card "attiva/evidenziata" — usare con parsimonia (es. allenamento di oggi) */
.card-accent {
  background: var(--card);
  border: 1px solid rgba(0,200,219,0.30);
  border-radius: var(--r-lg);
  padding: var(--pad-card);
  /* niente box-shadow glow: il bordo ciano basta a distinguerla */
}

/* CTA primaria — l'UNICO posto dove il ciano "spinge" */
.btn-primary {
  height: var(--btn-h);
  width: 100%;
  border: none;
  border-radius: var(--r-sm);
  background: var(--ciano);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--f-md);
  font-weight: var(--w-bold);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
  box-shadow: var(--sh-cta);
}
.btn-primary:active { transform: scale(.985); }

/* Bottone secondario (ghost) — l'unica alternativa alla primaria */
.btn-ghost {
  height: var(--btn-h);
  border: 1px solid var(--line2);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--tx);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--f-md);
  font-weight: var(--w-med);
  cursor: pointer;
}

/* Eyebrow / micro-label (questo stile è già giusto, formalizzato) */
.eyebrow {
  font-size: var(--f-xs);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ciano);
}

/* Titoli display */
.title-page { font-family:'Flatline',sans-serif; font-size:var(--f-2xl); line-height:var(--lh-tight); letter-spacing:var(--ls-title); }
.title-sec  { font-family:'Flatline',sans-serif; font-size:var(--f-xl);  line-height:var(--lh-tight); letter-spacing:var(--ls-title); }

/*
NOTE DI APPLICAZIONE (per chi applica):
1. Sostituire gradienti "linear-gradient(...rgba(0,200,219...))" delle card
   normali con `background: var(--card)` piatto. Tenere l'accento solo su:
   CTA, stato "oggi"/attivo, barra progressi, badge FOCUS.
2. Rimuovere i box-shadow con rgba(0,200,219,...) (glow). Usare --sh-1/--sh-2.
3. Sostituire le EMOJI (🔥💪🏠📸 ecc.) con icone line stroke 1.8 coerenti
   col set di nav.js. Le emoji abbassano la percezione premium.
4. Uniformare raggi: input/chip/bottoni → --r-sm (12px); card → --r-lg (18px).
5. Bottoni: solo .btn-primary e .btn-ghost, altezza 52px. Eliminare varianti.
6. Spacing: padding card 20px, gap 12px, margini sezione 28px. Niente valori fuori scala.
*/