/* =====================================================================
   RACCOON MUSIC — BASE COMUNE
   Copia identica in ogni repository (sito, Iscrizioni, Gestionale/Card,
   Redazione). Se cambi qualcosa qui, ricopia il file in tutti i repo.
   Ogni coppia testo/sfondo qui sotto è verificata WCAG AA (>= 4.5:1 per
   il testo, >= 3:1 per bordi di campi e anelli di focus).
   ===================================================================== */

:root {
  /* --- Colori del marchio --- */
  --rm-black: #0A0A0A;        /* Nero tana */
  --rm-black-2: #141414;      /* superficie rialzata su scuro */
  --rm-black-3: #1E1E1E;      /* hover su scuro */
  --rm-cream: #F2EDE4;        /* Crema: testo su scuro (17:1) */
  --rm-paper: #FAF7F1;        /* Carta: sfondo chiaro */
  --rm-paper-2: #F2EDE4;      /* riempimento leggero su chiaro */
  --rm-white: #FFFFFF;

  --rm-orange: #F38B28;       /* azione / evidenza. Testo SEMPRE nero sopra (8:1) */
  --rm-orange-hi: #F7A256;    /* hover dell'arancione, testo nero (9.7:1) */
  --rm-orange-deep: #C4610A;  /* arancione per bordi/anelli su chiaro (3.9:1) */
  --rm-red: #8B2E2E;          /* rosso marchio: errori su chiaro (7.8:1), mai testo su scuro */
  --rm-red-on-dark: #F08A84;  /* errori su scuro (8.2:1) */
  --rm-blue: #0077C8;         /* blu marchio: righe e grafica */
  --rm-blue-on-light: #0067AD;/* link/testo blu su chiaro (5.5:1); testo bianco sopra 5.9:1 */
  --rm-blue-on-dark: #4FA8E8; /* link/testo blu su scuro (7.6:1) */
  --rm-ok-on-light: #2E7A4B;  /* fatto, su chiaro (4.9:1) */
  --rm-ok-on-dark: #5DC08A;   /* fatto, su scuro (8.8:1) */
  --rm-warn-on-light: #8A5A00;/* avviso, su chiaro (5.5:1) */
  --rm-warn-on-dark: #E9B44C; /* avviso, su scuro (10.5:1) */

  /* --- Carattere --- */
  --rm-font: 'Acumin Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Forme --- */
  --rm-r-sm: 8px;    /* campi, etichette, chip */
  --rm-r-lg: 16px;   /* pannelli, schede, finestre, tessera */
  --rm-r-pill: 999px;/* pulsanti */

  /* --- Movimento --- */
  --rm-ease: cubic-bezier(0.2, 0.8, 0.2, 1);  /* unica curva per tutto */
  --rm-d1: 150ms;  /* risposta a un tocco / hover */
  --rm-d2: 250ms;  /* aprire, chiudere, cambiare */
  --rm-d3: 400ms;  /* momento firma */

  /* --- Ombre (solo per ciò che galleggia: finestre, menu, messaggi) --- */
  --rm-shadow-float: 0 12px 32px -12px rgba(10, 10, 10, 0.35), 0 2px 6px rgba(10, 10, 10, 0.12);
}

/* ---------------------------------------------------------------------
   Superfici: mettere .rm-dark o .rm-light su <body> o su una zona.
   I componenti usano solo queste variabili semantiche.
   --------------------------------------------------------------------- */
.rm-dark {
  --rm-bg: var(--rm-black);
  --rm-raised: var(--rm-black-2);
  --rm-hover: var(--rm-black-3);
  --rm-fg: var(--rm-cream);
  --rm-fg-muted: #A8A49E;          /* 8:1 su nero */
  --rm-line: rgba(242, 237, 228, 0.12);   /* divisori decorativi */
  --rm-line-strong: #7E7C77;       /* bordi dei campi (4.7:1) */
  --rm-link: var(--rm-blue-on-dark);
  --rm-error: var(--rm-red-on-dark);
  --rm-ok: var(--rm-ok-on-dark);
  --rm-warn: var(--rm-warn-on-dark);
  --rm-focus: var(--rm-orange);
  --rm-btn-bg: var(--rm-cream);
  --rm-btn-fg: var(--rm-black);
  color-scheme: dark;
}
.rm-light {
  --rm-bg: var(--rm-paper);
  --rm-raised: var(--rm-white);
  --rm-hover: var(--rm-paper-2);
  --rm-fg: var(--rm-black);
  --rm-fg-muted: #5C5852;          /* 6.6:1 su carta */
  --rm-line: rgba(10, 10, 10, 0.10);
  --rm-line-strong: #82807E;       /* bordi dei campi (3.7:1) */
  --rm-link: var(--rm-blue-on-light);
  --rm-error: var(--rm-red);
  --rm-ok: var(--rm-ok-on-light);
  --rm-warn: var(--rm-warn-on-light);
  --rm-focus: var(--rm-black);
  --rm-btn-bg: var(--rm-black);
  --rm-btn-fg: var(--rm-cream);
  color-scheme: light;
}

/* ---------------------------------------------------------------------
   Focus visibile da tastiera, ovunque
   --------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--rm-focus, var(--rm-orange));
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Movimento ridotto: chi lo chiede al sistema non vede animazioni
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   Animazioni comuni
   --------------------------------------------------------------------- */
@keyframes rm-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes rm-rise   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rm-pop    { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes rm-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes rm-fill-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rm-sweep  { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes rm-shine  { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(220%) skewX(-18deg); } }

.rm-anim-fade  { animation: rm-fade var(--rm-d2) var(--rm-ease) both; }
.rm-anim-rise  { animation: rm-rise var(--rm-d3) var(--rm-ease) both; }
.rm-anim-pop   { animation: rm-pop var(--rm-d2) var(--rm-ease) both; }
.rm-anim-down  { animation: rm-slide-down var(--rm-d2) var(--rm-ease) both; }

/* ---------------------------------------------------------------------
   Elemento firma: le tre righe arancio-rosso-blu
   .rm-stripes            = righe ferme
   .rm-stripes--fill      = si riempiono da sinistra (una volta, all'apertura)
   .rm-stripes--busy      = scorrono mentre si salva / si carica
   .rm-stripes--progress  = barra di avanzamento: impostare --rm-progress (0-1)
   --------------------------------------------------------------------- */
.rm-stripes {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}
.rm-stripes > i {
  display: block;
  height: var(--rm-stripe-h, 3px);
  transform-origin: left center;
}
.rm-stripes > i:nth-child(1) { background: var(--rm-orange); }
.rm-stripes > i:nth-child(2) { background: var(--rm-red); }
.rm-stripes > i:nth-child(3) { background: var(--rm-blue); }

.rm-stripes--fill > i { animation: rm-fill-x var(--rm-d3) var(--rm-ease) both; }
.rm-stripes--fill > i:nth-child(2) { animation-delay: 60ms; }
.rm-stripes--fill > i:nth-child(3) { animation-delay: 120ms; }

.rm-stripes--progress > i {
  transform: scaleX(var(--rm-progress, 0));
  transition: transform var(--rm-d3) var(--rm-ease);
}
.rm-stripes--progress { background: var(--rm-line); }

.rm-stripes--busy > i { position: relative; background: transparent; }
.rm-stripes--busy > i::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 40%;
  animation: rm-sweep 1.1s var(--rm-ease) infinite;
}
.rm-stripes--busy > i:nth-child(1)::after { background: var(--rm-orange); }
.rm-stripes--busy > i:nth-child(2)::after { background: var(--rm-red); animation-delay: 80ms; }
.rm-stripes--busy > i:nth-child(3)::after { background: var(--rm-blue); animation-delay: 160ms; }

/* ---------------------------------------------------------------------
   Pulsanti. Ogni stato (anche hover) ha testo leggibile >= 4.5:1.
   .rm-btn + una variante: --primary | --accent | --ghost | --quiet
   Taglia: default 44px di altezza, --sm 36px (solo strumenti interni)
   --------------------------------------------------------------------- */
.rm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--rm-r-pill);
  font-family: var(--rm-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--rm-d1) var(--rm-ease),
    color var(--rm-d1) var(--rm-ease),
    border-color var(--rm-d1) var(--rm-ease),
    transform var(--rm-d1) var(--rm-ease);
}
.rm-btn:active:not(:disabled) { transform: scale(0.98); }
.rm-btn:disabled, .rm-btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }
.rm-btn--sm { min-height: 36px; padding: 0 0.875rem; font-size: 14px; }
.rm-btn--lg { min-height: 52px; padding: 0 1.75rem; font-size: 16px; }

/* principale: crema su scuro / nero su chiaro → hover arancione con testo nero */
.rm-btn--primary { background: var(--rm-btn-bg); color: var(--rm-btn-fg); }
.rm-btn--primary:hover:not(:disabled) { background: var(--rm-orange); color: var(--rm-black); }

/* accento: arancione pieno, testo nero */
.rm-btn--accent { background: var(--rm-orange); color: var(--rm-black); }
.rm-btn--accent:hover:not(:disabled) { background: var(--rm-orange-hi); color: var(--rm-black); }

/* contorno: testo nel colore della superficie, hover con fondo appena più chiaro */
.rm-btn--ghost { background: transparent; color: var(--rm-fg); border-color: var(--rm-line-strong); }
.rm-btn--ghost:hover:not(:disabled) { background: var(--rm-hover); color: var(--rm-fg); border-color: var(--rm-fg); }

/* discreto: solo testo, per azioni secondarie */
.rm-btn--quiet { background: transparent; color: var(--rm-fg); }
.rm-btn--quiet:hover:not(:disabled) { background: var(--rm-hover); color: var(--rm-fg); }

/* pericolo: rosso pieno, testo crema (7.1:1) */
.rm-btn--danger { background: var(--rm-red); color: var(--rm-cream); }
.rm-btn--danger:hover:not(:disabled) { background: #A33838; color: var(--rm-white); }

/* ---------------------------------------------------------------------
   Link nel testo
   --------------------------------------------------------------------- */
.rm-link {
  color: var(--rm-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--rm-d1) var(--rm-ease);
}
.rm-link:hover { text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------------
   Campi
   --------------------------------------------------------------------- */
.rm-field {
  width: 100%;
  min-height: 44px;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--rm-line-strong);
  border-radius: var(--rm-r-sm);
  background: var(--rm-raised);
  color: var(--rm-fg);
  font-family: var(--rm-font);
  font-size: 16px; /* 16px evita lo zoom automatico su iPhone */
  transition: border-color var(--rm-d1) var(--rm-ease), box-shadow var(--rm-d1) var(--rm-ease);
}
.rm-field::placeholder { color: var(--rm-fg-muted); opacity: 1; }
.rm-field:hover { border-color: var(--rm-fg-muted); }
.rm-field:focus { outline: none; border-color: var(--rm-fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rm-orange) 45%, transparent); }
.rm-field[aria-invalid='true'] { border-color: var(--rm-error); }

/* ---------------------------------------------------------------------
   Messaggio a comparsa (toast) e segnaposto di caricamento
   --------------------------------------------------------------------- */
.rm-toast {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border-radius: var(--rm-r-lg);
  background: var(--rm-black);
  color: var(--rm-cream);
  font-family: var(--rm-font);
  font-size: 15px;
  box-shadow: var(--rm-shadow-float);
  animation: rm-rise var(--rm-d2) var(--rm-ease) both;
}
.rm-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--rm-r-sm);
  background: var(--rm-hover, #ECE7DE);
}
.rm-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: rm-sweep 1.4s var(--rm-ease) infinite;
}
.rm-dark .rm-skeleton::after { background: linear-gradient(90deg, transparent, rgba(242, 237, 228, 0.06), transparent); }

/* ---------------------------------------------------------------------
   Tipografia (revisione 3 novembre: più minimal, niente maiuscolo)
   Regola: maiuscolo SOLO nel logotipo "RACCOON MUSIC". Titoli in tondo
   (prima lettera maiuscola), pesi medi, dimensioni contenute, molto spazio.
   Acumin è già allungato nei file: interlinee mai sotto 1.05.
   --------------------------------------------------------------------- */
.rm-title-hero {          /* uno per pagina */
  font-family: var(--rm-font);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: none;
  text-wrap: balance;
}
.rm-title-section {       /* titoli di sezione */
  font-family: var(--rm-font);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-transform: none;
  text-wrap: balance;
}
.rm-title-card {          /* titoli dentro schede e pannelli */
  font-family: var(--rm-font);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-transform: none;
}
.rm-label {               /* etichette piccole: in tondo, mai maiuscolo spaziato */
  font-family: var(--rm-font);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  color: var(--rm-fg-muted);
  text-transform: none;
  letter-spacing: 0;
}
.rm-wordmark {            /* unico uso del maiuscolo */
  font-family: var(--rm-font);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.rm-num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   Grana: texture di carta appena percepibile sulle superfici scure.
   Mettere .rm-grain su un contenitore con position: relative (o su body).
   --------------------------------------------------------------------- */
.rm-grain { position: relative; isolation: isolate; }
.rm-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body.rm-grain::before { position: fixed; }

/* Transizione tra pagine (React Router <Link viewTransition>): dissolvenza breve */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--rm-d2); animation-timing-function: var(--rm-ease); }

/* ---------------------------------------------------------------------
   Etichette di stato (badge): una riga sola, testo centrato nella forma.
   Varianti: --ok (verde), --warn (ambra), --info (blu), --neutral, --accent.
   Mai cerchi con testo su più righe: per numeri + parola usare la pillola.
   --------------------------------------------------------------------- */
.rm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  flex-shrink: 0;
  max-width: 100%;
  min-height: 26px;
  padding: 0 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--rm-r-pill);
  font-family: var(--rm-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  text-box: trim-both cap alphabetic; /* centratura ottica dove supportato */
}
.rm-badge > svg { flex-shrink: 0; width: 14px; height: 14px; }
.rm-badge--ok      { background: #E3F1E8; color: #1F5A36; border-color: #C3E0CD; }
.rm-badge--warn    { background: #FBEFD9; color: #6B4600; border-color: #F0D9AE; }
.rm-badge--info    { background: #E1EEF8; color: #00507F; border-color: #BFD8EC; }
.rm-badge--neutral { background: var(--rm-hover, #F2EDE4); color: var(--rm-fg, #0A0A0A); border-color: var(--rm-line, rgba(10,10,10,.1)); }
.rm-badge--accent  { background: var(--rm-orange); color: var(--rm-black); }
.rm-dark .rm-badge--ok   { background: rgba(93,192,138,.14); color: #8FD9AE; border-color: rgba(93,192,138,.3); }
.rm-dark .rm-badge--warn { background: rgba(233,180,76,.14); color: #F0C878; border-color: rgba(233,180,76,.3); }
.rm-dark .rm-badge--info { background: rgba(79,168,232,.14); color: #8CC6F0; border-color: rgba(79,168,232,.3); }