/* Work Multiservizi — design tokens */

:root {
  /* Color */
  --navy-900: #0a1c33;
  --navy-700: #0f2a4a;
  --navy-500: #1f4a7a;
  --orange-500: #f26a1b;
  --orange-600: #d9560c;
  --sand-50: #f3f5f7;
  --sand-100: #e5eaf0;
  --ink: #101826;
  --steel: #4d5c70;
  --white: #ffffff;

  --bg: var(--sand-50);
  --surface: var(--white);
  --text: var(--ink);
  --text-muted: var(--steel);
  --brand: var(--navy-700);
  --accent: var(--orange-500);
  --accent-hover: var(--orange-600);
  --line: rgba(16, 24, 38, 0.12);

  /* Type */
  --font-display: "Archivo", "Arial Black", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  --step-3: clamp(2.2rem, 1.7rem + 2.5vw, 3.6rem);
  --step-4: clamp(2.8rem, 2rem + 4vw, 5.2rem);

  /* Space (4px base) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-6: 1.5rem; --s-8: 2rem; --s-12: 3rem; --s-16: 4rem; --s-24: 6rem;

  /* Shape & depth */
  --radius-s: 6px; --radius-m: 12px; --radius-l: 20px;
  --shadow-1: 0 1px 2px rgba(16, 24, 38, 0.06), 0 4px 12px rgba(16, 24, 38, 0.06);

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
}

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