/* Traducto — design tokens
   Variabili CSS native + @font-face IBM Plex self-hosted.
   Caricato come PRIMO foglio di stile in ogni pagina. */

/* ── @font-face — IBM Plex Sans / Serif / Mono (latin subset) ──────────── */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/IBMPlexSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/IBMPlexSerif-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── Design tokens ─────────────────────────────────────────────────────── */

:root {
  /* ── Type ─────────────────────────────────────────────────────── */
  --ff-sans: "IBM Plex Sans", "Source Sans 3", -apple-system, system-ui, sans-serif;
  --ff-serif: "IBM Plex Serif", Georgia, serif;
  --ff-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;

  --fs-display: 56px;
  --fs-h1: 40px;
  --fs-h2: 28px;
  --fs-h3: 20px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-caption: 12px;
  --fs-code: 14px;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-body: 1.5;

  /* ── Neutrals — Editorial (warm grey) ────────────────────────── */
  --paper: #f5f3ef;
  --paper-2: #ebe8e1;
  --ink: #181715;
  --ink-2: #3a3833;
  --ink-3: #6b6862;
  --ink-4: #9b988f;
  --line: #d9d5cb;
  --line-2: #e5e1d6;

  /* ── Accent (blue, fissato come default produzione) ──────────── */
  --accent: oklch(0.51 0.18 256);
  --accent-ink: oklch(0.36 0.18 256);
  --accent-soft: oklch(0.95 0.04 256);
  --accent-fg: #ffffff;

  --success: oklch(0.65 0.14 155);
  --success-soft: oklch(0.95 0.04 155);
  --warning: oklch(0.72 0.14 65);
  --warning-soft: oklch(0.96 0.05 65);
  --danger: oklch(0.58 0.19 25);
  --danger-soft: oklch(0.95 0.04 25);

  /* ── Surface ─────────────────────────────────────────────────── */
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --surface-elevated: #ffffff;

  /* ── Radius ──────────────────────────────────────────────────── */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 14px;
  --r-5: 20px;
  --r-full: 999px;

  /* ── Space (8pt scale + 4 step) ──────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;
  --sp-9: 64px;
  --sp-10: 96px;

  /* ── Shadow ──────────────────────────────────────────────────── */
  --shadow-1: 0 1px 0 rgba(24, 23, 21, 0.04), 0 1px 2px rgba(24, 23, 21, 0.06);
  --shadow-2: 0 1px 0 rgba(24, 23, 21, 0.04), 0 4px 14px rgba(24, 23, 21, 0.08);
  --shadow-3: 0 1px 0 rgba(24, 23, 21, 0.04), 0 12px 32px rgba(24, 23, 21, 0.12);
  --shadow-focus: 0 0 0 3px oklch(0.51 0.18 256 / 0.18);
}

/* Variant warm — opt-in via .theme-warm (riservato a future varianti, es. speaker theatre) */
.theme-warm {
  --paper: #f6f1ea;
  --paper-2: #ede5d6;
  --ink: #211e19;
  --ink-2: #423d33;
  --ink-3: #76705f;
  --ink-4: #a59f8a;
  --line: #ddd2bd;
  --line-2: #e8dfcc;
  --surface: #fdfaf3;
  --surface-2: #f7f1e3;
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 18px;
  --r-5: 24px;
}

/* ── prefers-reduced-motion ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}