/**
 * Design token — UNICA fonte di verità per colori, tipografia, spaziatura.
 * Nessun colore va scritto letterale altrove: sempre var(--mk-*).
 * Cambiare il brand = cambiare questo file, punto.
 */

:root {
  /* ── Palette ─────────────────────────────────────────────── */
  --mk-bg: #080f14;          /* sfondo pagina */
  --mk-surface: #14181e;     /* card, header bar, pannelli */
  --mk-surface-2: #1a1f26;   /* superfici sollevate: hover, popover */
  --mk-text: #f2f2f4;        /* testo principale */
  --mk-text-muted: #8a8d93;  /* testo secondario, label, meta */
  --mk-accent: #00e0c6;      /* accento del brand */
  --mk-on-accent: #04120f;   /* testo/icone sopra sfondo accento */

  /* Stati semantici — separati dall'accento, non toccarli nel rebrand */
  --mk-success: #22c55e;
  --mk-warning: #f59e0b;
  --mk-danger: #ef4444;

  /* Linee e trasparenze, derivate dal testo principale */
  --mk-border: rgba(242, 242, 244, 0.10);
  --mk-border-strong: rgba(242, 242, 244, 0.18);
  --mk-accent-soft: rgba(0, 224, 198, 0.14);
  --mk-scrim: rgba(8, 15, 20, 0.72); /* overlay scuro su immagini */

  /* ── Tipografia ──────────────────────────────────────────── */
  /* Un'unica famiglia, gerarchia per peso — non due font separati. */
  --mk-font-display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --mk-font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;

  /* ── Spaziatura (multipli di 4px) ────────────────────────── */
  --mk-sp-1: 4px;
  --mk-sp-2: 8px;
  --mk-sp-3: 12px;
  --mk-sp-4: 16px;
  --mk-sp-5: 20px;
  --mk-sp-6: 24px;
  --mk-sp-8: 32px;
  --mk-sp-10: 40px;

  /* ── Raggi e ombre ───────────────────────────────────────── */
  --mk-radius-sm: 8px;
  --mk-radius: 14px;
  --mk-radius-lg: 22px;
  --mk-radius-pill: 999px;
  --mk-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
  --mk-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45);

  /* ── Layout ──────────────────────────────────────────────── */
  --mk-content-width: 720px; /* larghezza massima contenuto su desktop */
  --mk-bp-mobile: 640px;
}