/* Evaluation.it — design token
   Da includere prima di ogni altro CSS del sito.
   I valori sono definitivi: non aggiungere colori o font fuori da questa lista. */

:root {
  /* ---- Primario: blu profondo ---- */
  --color-primary-900: #0C1C2C; /* hero, sezioni di impatto, testo su ambra */
  --color-primary-800: #12293F; /* footer, card su scuro, titoli */
  --color-primary-700: #1C3A56; /* bordo pulsante secondario, link, focus ring */
  --color-primary-600: #2C5378; /* divisori su fondo scuro */
  --color-primary-400: #5A80A5; /* bordi tenui su scuro */
  --color-primary-100: #DCE6EF; /* fondo badge, hover secondario */

  /* ---- Accento: ambra. SOLO CTA e dati chiave (fair value, upside) ---- */
  --color-accent-700: #8A5A0B; /* testo ambra su fondo chiaro, badge Premium */
  --color-accent-500: #D08C1F; /* CTA primaria */
  --color-accent-400: #E0A03A; /* hover CTA primaria */
  --color-accent-300: #EFC978; /* testo ambra su fondo scuro */
  --color-accent-50:  #FBF1DE; /* fondo badge ambra */

  /* ---- Neutri: carta calda ---- */
  --color-neutral-50:  #F7F7F5; /* fondo pagina */
  --color-neutral-100: #EFEEEA;
  --color-neutral-200: #E2E0DA; /* bordo di default */
  --color-neutral-300: #CBC8C0; /* bordo input / enfatizzato */
  --color-neutral-400: #A8A49A;
  --color-neutral-500: #7D7A72; /* etichette, metadati */
  --color-neutral-600: #5C5A54; /* testo secondario */
  --color-neutral-700: #43423E; /* corpo */
  --color-neutral-800: #2B2A27;
  --color-neutral-900: #1A1917; /* massimo contrasto, numeri */
  --color-surface: #FFFFFF;

  /* ---- Semantici. Sempre accompagnati da segno e triangolo, mai solo colore ---- */
  --color-success: #1F6F46;
  --color-success-bg: #E4EFE9;
  --color-warning: #9A6B08;
  --color-error: #A32A22;

  /* ---- Tipografia ---- */
  --font-serif: 'Newsreader', Georgia, serif;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --text-display: 3.625rem;  /* 58px */
  --text-h1: 2.75rem;        /* 44px */
  --text-h2: 2.125rem;       /* 34px */
  --text-h3: 1.5rem;         /* 24px */
  --text-h4: 1.1875rem;      /* 19px */
  --text-body: 1.0625rem;    /* 17px */
  --text-small: 0.9375rem;   /* 15px */
  --text-caption: 0.8125rem; /* 13px */
  --text-overline: 0.75rem;  /* 12px */

  --leading-display: 1.04;
  --leading-heading: 1.12;
  --leading-body: 1.6;

  /* ---- Spaziature (scala a 4) ---- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 72px;
  --space-4xl: 112px;

  --container: 1240px;

  /* ---- Raggi ---- */
  --radius-none: 0;
  --radius-xs: 3px;   /* badge */
  --radius-sm: 4px;   /* pulsanti, input, card interattive */
  --radius-md: 6px;   /* cornice mockup */
  --radius-pill: 999px;

  /* ---- Ombre: i bordi vengono prima delle ombre ---- */
  --shadow-1: 0 1px 2px rgba(12, 28, 44, .06);
  --shadow-2: 0 8px 24px -8px rgba(12, 28, 44, .22);

  --focus-ring: 2px solid var(--color-primary-700);
  --tap-min: 44px;
}

/* ---- Reset essenziale ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-neutral-900);
  background: var(--color-neutral-50);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; line-height: var(--leading-heading); }
h3, h4 { font-weight: 600; line-height: 1.3; }

a { color: var(--color-primary-700); text-decoration: none; }
a:hover { color: var(--color-accent-700); }
::selection { background: #F0DCB4; }

:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* Obbligatorio su tabelle, KPI, prezzi, percentuali, multipli */
.num, table, .kpi { font-variant-numeric: tabular-nums; }

/* Colonne numeriche sempre a destra */
td.num, th.num { text-align: right; }

/* Bottoni: altezza tocco minima */
button, .btn, input[type="submit"] { min-height: var(--tap-min); font-family: inherit; }

.btn-primary {
  background: var(--color-accent-500);
  color: var(--color-primary-900);
  border: 1px solid var(--color-accent-500);
  border-radius: var(--radius-sm);
  padding: 13px 22px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}
.btn-primary:hover { background: var(--color-accent-400); border-color: var(--color-accent-400); }
.btn-primary:disabled { background: var(--color-neutral-100); border-color: var(--color-neutral-200); color: var(--color-neutral-500); }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-primary-800);
  border: 1px solid var(--color-primary-700);
  border-radius: var(--radius-sm);
  padding: 13px 22px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}
.btn-secondary:hover { background: var(--color-primary-100); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}