/* ============================================================
   BASE.CSS — Sistema di Design
   Variabili, Reset, Tipografia
   ============================================================ */

/* ------------------------------------------------------------
   FONT IMPORT
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* ------------------------------------------------------------
   VARIABILI GLOBALI
   ------------------------------------------------------------ */
:root {
  /* --- Palette principale --- */
  --blu:          #1A56DB;
  --blu-d:        #1547BF;
  --blu-l:        #EFF4FF;
  --blu-glow:     rgba(26, 86, 219, 0.12);

  --verde:        #2DB83D;
  --verde-d:      #239931;
  --verde-l:      #EDFBEF;
  --verde-glow:   rgba(45, 184, 61, 0.13);

  --oro:          #F5C400;
  --oro-d:        #D4A900;
  --oro-l:        #FFFBE6;
  --oro-glow:     rgba(245, 196, 0, 0.18);

  --rosso:        #C0123B;
  --rosso-d:      #9E0F31;
  --rosso-l:      #FDEEF2;
  --rosso-glow:   rgba(192, 18, 59, 0.12);

  --arancio:      #E8620A;
  --arancio-l:    #FFF0E6;

  /* --- Neutri --- */
  --bg:           #FFFFFF;
  --s1:           #F9FAFB;
  --s2:           #F3F4F6;
  --s3:           #E9ECEF;
  --card:         #FFFFFF;
  --bordo:        #E5E7EB;
  --bordo-f:      #D1D5DB;
  --testo:        #111827;
  --testo-s:      #374151;
  --testo-m:      #6B7280;
  --testo-l:      #9CA3AF;

  /* --- Stato --- */
  --stato-ok:     #059669;
  --stato-ok-l:   #ECFDF5;
  --stato-warn:   #D97706;
  --stato-warn-l: #FFFBEB;
  --stato-err:    #DC2626;
  --stato-err-l:  #FEF2F2;
  --stato-info:   #2563EB;
  --stato-info-l: #EFF6FF;

  /* --- Layout --- */
  --sidebar-w:       240px;
  --sidebar-w-min:   56px;
  --header-h:        56px;
  --raggio:          8px;
  --raggio-l:        12px;
  --raggio-xl:       16px;

  /* --- Tipografia --- */
  --font:            'DM Sans', sans-serif;
  --font-mono:       'DM Mono', monospace;

  /* --- Ombre --- */
  --ombra-s:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --ombra-m:   0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --ombra-l:   0 8px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04);

  /* --- Transizioni --- */
  --trans:     all 0.18s ease;
  --trans-s:   all 0.12s ease;
}

/* ------------------------------------------------------------
   RESET
   ------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--testo);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
input, button, select, textarea { font-family: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* ------------------------------------------------------------
   TIPOGRAFIA
   ------------------------------------------------------------ */
h1 { font-size: 1.875rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.5px; }
h2 { font-size: 1.5rem;   font-weight: 700; line-height: 1.25; letter-spacing: -0.3px; }
h3 { font-size: 1.25rem;  font-weight: 600; line-height: 1.3; }
h4 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
h5 { font-size: 0.9375rem; font-weight: 600; }
h6 { font-size: 0.875rem;  font-weight: 600; }

p { margin-bottom: 0; }

.testo-grande   { font-size: 1.0625rem; }
.testo-piccolo  { font-size: 0.8125rem; color: var(--testo-m); }
.testo-micro    { font-size: 0.75rem;   color: var(--testo-l); }
.testo-mono     { font-family: var(--font-mono); font-size: 0.875rem; }

.peso-300 { font-weight: 300; }
.peso-400 { font-weight: 400; }
.peso-500 { font-weight: 500; }
.peso-600 { font-weight: 600; }
.peso-700 { font-weight: 700; }
.peso-800 { font-weight: 800; }

.testo-centro    { text-align: center; }
.testo-destra    { text-align: right; }
.maiuscolo       { text-transform: uppercase; letter-spacing: 0.5px; }
.maiuscolo-s     { text-transform: uppercase; letter-spacing: 0.3px; font-size: 0.75rem; font-weight: 600; color: var(--testo-m); }

/* ------------------------------------------------------------
   COLORI TESTO UTILITARI
   ------------------------------------------------------------ */
.c-blu    { color: var(--blu); }
.c-verde  { color: var(--verde); }
.c-oro    { color: var(--oro-d); }
.c-rosso  { color: var(--rosso); }
.c-muted  { color: var(--testo-m); }
.c-light  { color: var(--testo-l); }

/* ------------------------------------------------------------
   SPAZIATURA UTILITARI
   ------------------------------------------------------------ */
.mt-0  { margin-top: 0; }
.mt-1  { margin-top: 0.25rem; }
.mt-2  { margin-top: 0.5rem; }
.mt-3  { margin-top: 0.75rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }

.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }

.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

/* ------------------------------------------------------------
   FLEX / GRID UTILITARI
   ------------------------------------------------------------ */
.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start   { display: flex; align-items: center; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }
.flex-shrink0 { flex-shrink: 0; }

.griglia-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.griglia-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.griglia-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

/* ------------------------------------------------------------
   ANIMAZIONI
   ------------------------------------------------------------ */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes ticker-scorrimento {
  from { transform: translateX(100vw); }
  to   { transform: translateX(-100%); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.animazione-fade    { animation: fade-in 0.25s ease; }
.animazione-slide-l { animation: slide-in-left 0.22s ease; }
.animazione-slide-r { animation: slide-in-right 0.22s ease; }

/* ------------------------------------------------------------
   SCROLLBAR PERSONALIZZATA
   ------------------------------------------------------------ */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--bordo-f); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--testo-l); }

/* ------------------------------------------------------------
   SELEZIONE TESTO
   ------------------------------------------------------------ */
::selection {
  background: var(--blu-l);
  color: var(--blu-d);
}

/* ------------------------------------------------------------
   FOCUS ACCESSIBILITA'
   ------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--blu);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   RESPONSIVE BREAKPOINTS
   ------------------------------------------------------------ */
/* Mobile: < 640px  */
/* Tablet: 640px — 1024px */
/* Desktop: > 1024px */

@media (max-width: 640px) {
  body { font-size: 14px; }
  h1   { font-size: 1.5rem; }
  h2   { font-size: 1.25rem; }
  .griglia-2,
  .griglia-3,
  .griglia-4 { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .griglia-4 { grid-template-columns: repeat(2, 1fr); }
  .griglia-3 { grid-template-columns: repeat(2, 1fr); }
}