/* OnAir — Design tokens
 * Palette ancorata ai colori del logo NHM (navy #0F1B5C + sky blue #70BFEC)
 * estesa con neon broadcast (mint, cyan), red REC e amber peak.
 *
 * Tutti i font e le icone sono hostati localmente (vedi /vendor/).
 */

/* Font locali (Inter / Space Grotesk / JetBrains Mono) */
@import url("/vendor/fonts/google.css");

/* FontAwesome locale */
@import url("/vendor/fontawesome/all.min.css");

:root {
  /* === Logo NHM === */
  --c-navy:           #0F1B5C;   /* fill quadrati logo — base scura */
  --c-navy-deep:      #0A1240;   /* ancora più scuro (gradienti, bg app) */
  --c-navy-soft:      #1A2570;   /* superficie elevata (card, modali) */
  --c-sky:            #70BFEC;   /* ombra logo — accento freddo */
  --c-sky-bright:     #A8DCF5;   /* sky più chiaro per hover */

  /* === Estensioni broadcast / synthwave === */
  --c-mint:           #10E0A0;   /* ON AIR / mic attivo */
  --c-mint-deep:      #00A878;
  --c-cyan:           #22D3EE;   /* link/highlight neon */
  --c-violet:         #5E2CED;   /* primary action gradient (NHM web) */
  --c-violet-bright:  #9749F8;
  --c-magenta:        #E84393;   /* accent decorativo */
  --c-coral:          #FF4757;   /* REC / kick / danger */
  --c-coral-deep:     #BE1F27;
  --c-amber:          #FFB627;   /* VU peak / warning */
  --c-gold:           #FDE047;

  /* === Neutri freddi (testi e bordi su navy) === */
  --c-text:           #F5F7FF;
  --c-text-muted:     #B4BCD8;
  --c-text-dim:       #7A85B0;
  --c-border:         #2A3578;
  --c-border-soft:    #1F2A66;
  --c-input-bg:       #15205A;

  /* === Stati semantici === */
  --c-ok:             var(--c-mint);
  --c-warn:           var(--c-amber);
  --c-danger:         var(--c-coral);
  --c-info:           var(--c-sky);

  /* === Gradienti firma === */
  --gd-primary:       linear-gradient(135deg, var(--c-violet) 0%, var(--c-sky) 100%);
  --gd-primary-hover: linear-gradient(135deg, var(--c-violet-bright) 0%, var(--c-sky-bright) 100%);
  --gd-onair:         linear-gradient(135deg, var(--c-mint) 0%, var(--c-cyan) 100%);
  --gd-rec:           linear-gradient(135deg, var(--c-coral) 0%, var(--c-magenta) 100%);
  --gd-bg-radial:     radial-gradient(ellipse at top, #1A2570 0%, var(--c-navy-deep) 65%);

  /* === Tipografia === */
  --ff-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ff-display: "Space Grotesk", "Inter", system-ui, sans-serif;

  /* === Spacing === */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* === Radius === */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* === Ombre + glow === */
  --sh-sm: 0 2px 8px rgba(0,0,0,.25);
  --sh-md: 0 8px 24px rgba(0,0,0,.35);
  --sh-lg: 0 16px 48px rgba(0,0,0,.45);
  --glow-mint:  0 0 18px rgba(16,224,160,.55);
  --glow-coral: 0 0 18px rgba(255,71,87,.6);
  --glow-sky:   0 0 18px rgba(112,191,236,.55);
  --glow-violet:0 0 22px rgba(94,44,237,.5);

  /* === Animazioni === */
  --easing: cubic-bezier(.4,.0,.2,1);
  --t-fast: 120ms;
  --t-med:  220ms;
  --t-slow: 380ms;
}

/* Reset minimale */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--gd-bg-radial) fixed;
  color: var(--c-text);
  font-family: var(--ff-sans);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c-cyan); text-decoration: none; }
a:hover { color: var(--c-sky-bright); }

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  outline: 0;
}

input, select {
  font-family: inherit;
  font-size: inherit;
  background: var(--c-input-bg);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  border-radius: var(--r-md);
  padding: 10px 14px;
  transition: border-color var(--t-fast) var(--easing),
              box-shadow var(--t-fast) var(--easing);
}
input:focus, select:focus {
  border-color: var(--c-sky);
  box-shadow: 0 0 0 3px rgba(112,191,236,.18);
}

/* === Componenti riutilizzabili === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  background: var(--c-navy-soft);
  color: var(--c-text);
  transition: transform var(--t-fast) var(--easing),
              box-shadow var(--t-med) var(--easing),
              background var(--t-fast) var(--easing);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--gd-primary);
  box-shadow: var(--glow-violet);
}
.btn-primary:hover { background: var(--gd-primary-hover); box-shadow: var(--glow-sky); }

.btn-onair  { background: var(--gd-onair);  color: var(--c-navy-deep); box-shadow: var(--glow-mint); }
.btn-rec    { background: var(--gd-rec);    box-shadow: var(--glow-coral); }
.btn-ghost  { background: transparent; border: 1px solid var(--c-border); }
.btn-icon   { padding: 10px; border-radius: 50%; }

.card {
  background: linear-gradient(180deg, rgba(26,37,112,.85) 0%, rgba(15,27,92,.7) 100%);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sh-md);
  backdrop-filter: blur(10px);
}

/* Pill ON AIR pulsante */
.onair-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  background: var(--gd-onair);
  color: var(--c-navy-deep);
  box-shadow: var(--glow-mint);
}
.onair-pill::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-navy-deep);
  animation: pulse 1.4s var(--easing) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}

/* Pill REC */
.rec-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  background: var(--gd-rec);
  color: white;
  box-shadow: var(--glow-coral);
}
.rec-pill::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: white;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Logo OnAir riprodotto inline (ispirato al logo NHM) */
.logo-mark {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.logo-mark .tile {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--c-navy);
  color: white;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 18px;
  display: grid; place-items: center;
  box-shadow: 4px 4px 0 var(--c-sky);
}
.logo-mark .tile.accent { background: var(--c-violet); box-shadow: 4px 4px 0 var(--c-magenta); }