/* Brand Hollyfood (design system: hollyfoodnapoli/Hollyfood Design System).
   Fondo scuro → si usa SOLO la palette B "fondi scuri". Font: famiglia Town (J Foundry).
   Angoli a 0, niente ombre morbide né gradienti, niente rimbalzi. I giochi usano SOLO queste variabili. */
@font-face { font-family: 'Town 10 Display'; src: url('/shared/brand/Town10DisplayBold.otf') format('opentype'); font-weight: 700; font-display: block; }
@font-face { font-family: 'Town 10 Display'; src: url('/shared/brand/Town10Display-Black.ttf') format('truetype'); font-weight: 900; font-display: block; }
@font-face { font-family: 'Town 30 Shadow'; src: url('/shared/brand/Town30ShadowMedium.otf') format('opentype'); font-weight: 500; font-display: block; }
@font-face { font-family: 'Town 23 Lines'; src: url('/shared/brand/Town23LinesBold.otf') format('opentype'); font-weight: 700; font-display: block; }
@font-face { font-family: 'Town 31 Dim'; src: url('/shared/brand/Town31DimBold-L.otf') format('opentype'); font-weight: 700; font-display: block; }

:root {
  /* palette B "fondi scuri" (manuale p.12) */
  --hf-soft-teal: #05868E;
  --hf-soft-aqua: #59BEC9;
  --hf-soft-orange: #F19C49;
  --hf-soft-peach: #FCC89B;
  --hf-soft-sand: #EED484;
  --hf-soft-rose: #DBB7BB;
  --hf-soft-coral: #FFA38B;
  --hf-soft-mauve: #AC8584;
  --hf-soft-red: #D66965;
  --hf-plaster: #3A3531;
  --hf-black: #161616;

  /* fondi e testo */
  --bg: #1d1a18;            /* intonaco scurito: base di tutte le pagine */
  --bg-2: var(--hf-black);  /* fasce nere (piè di pagina, targhe) */
  --surface: #2b2724;       /* campi e card */
  --surface-2: var(--hf-plaster);
  --line: #574e47;
  --text: #F4EFE9;
  --muted: #B9AFA6;

  /* accenti (nomi storici usati dai giochi → colori del brand) */
  --gold: var(--hf-soft-sand);    /* accento principale, pulsanti (testo scuro sopra) */
  --orange: var(--hf-soft-orange);
  --pink: var(--hf-soft-coral);
  --cyan: var(--hf-soft-aqua);
  --peach: var(--hf-soft-peach);
  --green: var(--hf-soft-aqua);   /* "giusto" */
  --red: var(--hf-soft-red);      /* "sbagliato" / urgenza */
  --ink-on-accent: #161616;       /* testo sopra un campo colorato */

  /* tipografia: Town 10 Display per tutto, Town 30 Shadow per i titoli da locandina,
     Town 23 Lines / 31 Dim solo per parole singole da insegna */
  --font-display: 'Town 10 Display', system-ui, sans-serif;
  --font-body: 'Town 10 Display', system-ui, sans-serif;
  --font-shadow: 'Town 30 Shadow', 'Town 10 Display', sans-serif;
  --font-lines: 'Town 23 Lines', 'Town 10 Display', sans-serif;
  --font-dim: 'Town 31 Dim', 'Town 10 Display', sans-serif;
  --font-plain: system-ui, -apple-system, 'Segoe UI', sans-serif; /* Town ha solo maiuscole: per URL e codici */
  --ls-label: 0.16em;

  /* forme e motivi */
  --radius: 0px;
  --hatch: repeating-linear-gradient(45deg, var(--hf-soft-aqua) 0 3px, transparent 3px 8px);
  --hatch-sand: repeating-linear-gradient(45deg, var(--hf-soft-sand) 0 3px, transparent 3px 8px);
  --pinstripe: repeating-linear-gradient(0deg, var(--hf-soft-peach) 0 2px, transparent 2px 7px);
  --shadow-hard: 8px 8px 0 rgba(0, 0, 0, .45);
  --ease-cine: cubic-bezier(.22, .61, .36, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
.display { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; }
.shadow-title { font-family: var(--font-shadow); font-weight: 500; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: .7em; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--cyan); }
.eyebrow::before { content: ''; width: 2.2em; height: 2px; background: currentColor; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

/* Motion del brand: cambi netti da cambio-bobina, nessun rimbalzo. */
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { transform: translateY(24px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }
@keyframes pop { from { transform: translateY(16px); opacity: 0 } to { transform: none; opacity: 1 } } /* alias storico: niente scale/bounce */
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .7 } }
.pop { animation: pop .32s var(--ease-cine) both; }
.slide-up { animation: slideUp .32s var(--ease-cine) both; }