:root {
  /* Brand HERA — colori ufficiali dal logo */
  --hera-magenta: #E6007E;
  --hera-green: #009B77;
  --hera-blue: #0091D2;

  /* Extended palette from tokens */
  --hera-magenta-light: #ffeaf9;
  --hera-magenta-soft: #f0c8dc;
  --hera-violet: #867cd0;
  --hera-gold: #eed33e;

  /* Gradient ramp (tracciato cerchio) — segue i 3 colori del logo */
  --ramp-0: var(--hera-magenta);
  --ramp-1: #C2185B;
  --ramp-2: var(--hera-green);
  --ramp-3: #00B89C;
  --ramp-4: var(--hera-blue);
  --ramp-5: #5B6FD6;
  --ramp-6: var(--hera-magenta);

  /* Background — fallback dietro l'immagine sfondo (gradiente brand) */
  --bg-primary: #0d0d0d;
  /* Superfici: vetro scuro semi-trasparente, non pannelli pieni —
     restano leggibili sopra qualunque zona del gradiente sotto */
  --bg-surface: rgba(0, 0, 0, 0.45);
  --bg-elevated: rgba(0, 0, 0, 0.55);

  /* Text — bianco a opacita variabile invece di grigio: il grigio
     compete otticamente col gradiente colorato, il bianco resta
     coerente su ogni sua zona (verde/blu/magenta) */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.75);
  --text-muted: rgba(255, 255, 255, 0.5);

  /* Borders — derivati dal nero (scrim), non dal bianco: definiscono
     il bordo del pannello scuro invece di fluttuare sul gradiente */
  --border-light: rgba(0, 0, 0, 0.25);
  --border-medium: rgba(0, 0, 0, 0.35);

  /* Glow — brand accents su tema dark */
  --glow-brand: 0 2px 20px rgba(230, 0, 126, 0.25);
  --glow-score: 0 0 30px rgba(230, 0, 126, 0.25), 0 0 60px rgba(0, 155, 119, 0.15);

  /* Layout */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --canvas-margin: 24px;

  /* Typography */
  --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-bold: 700;
  --font-medium: 400;

  /* Sizes */
  --header-height: 56px;
  --btn-height: 52px;
  --btn-radius: 10px;
  --score-font-size: clamp(48px, 15vw, 96px);
}