/* ===================================================================
   Synthassi — Design tokens (port per CRM interno Venta TPV).
   Palette LOCKED identica al sito Synthassi. Base chiara (paper) +
   inchiostro nero + giallo segnale; console scura come accento.
   =================================================================== */
:root {
  /* ─── PALETTE LOCKED ─────────────────────────────────────────────── */
  --c-yellow: #ffff00;
  --c-black:  #111110;
  --c-grey:   #f5f5f5;
  --c-blue:   #0000f4;
  --c-green:  #02ff95;
  --c-red:    #ff2d55;
  --c-red-ink:#d4173f;
  --c-white:  #ffffff;

  /* ─── Superfici ──────────────────────────────────────────────────── */
  --paper:      var(--c-grey);
  --paper-2:    #ededeb;
  --raised:     var(--c-white);
  --ground:     var(--c-black);
  --ground-2:   #1a1a18;
  --panel:      #161614;
  --signal:     var(--c-yellow);

  /* ─── Inchiostro / testo ─────────────────────────────────────────── */
  --ink:          var(--c-black);
  --ink-soft:     rgba(17,17,16,0.66);
  --ink-faint:    rgba(17,17,16,0.42);
  --ink-hair:     rgba(17,17,16,0.14);
  --paper-ink:    var(--c-grey);
  --paper-ink-soft: rgba(245,245,245,0.64);
  --paper-ink-faint:rgba(245,245,245,0.40);
  --paper-hair:   rgba(245,245,245,0.12);

  --focus:        var(--c-blue);
  --line:         var(--ink-hair);

  /* ─── Tipografia ─────────────────────────────────────────────────── */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Noto Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fw-body:  400;
  --fw-medium:500;
  --fw-bold:  700;

  /* ─── Spazio ─────────────────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 3.5rem;

  /* ─── Layout ─────────────────────────────────────────────────────── */
  --shell:   1280px;
  --radius:    4px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --hair: 1px;

  /* ─── Motion ─────────────────────────────────────────────────────── */
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.16s;
  --dur:      0.3s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0s; --dur: 0s; }
}