/* ═══════════════════════════════════════════
   KIT PRO — Tokens du design system
   Source : design system Kit Pro (tokens.json, synchronisé le 2026-09-26).
   Chargé en premier (head.tpl) : kp-tokens → kp-components → custom → pages.
   Mode d'emploi : docs/design-system.md
   ═══════════════════════════════════════════ */

/* ── Polices auto-hébergées (sous-ensemble latin) ── */
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Variable-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/DMMono-Regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/DMMono-Medium-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/InstrumentSerif-Regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/InstrumentSerif-Italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Neutres : une seule échelle ── */
  --kp-ink: #0b0e14;
  --kp-ink-80: #2a2e38;
  --kp-ink-60: #494e5c;
  --kp-ink-40: #5f6473;
  --kp-ink-30: #8a8f9e;
  --kp-ink-20: #b4b8c4;
  --kp-ink-10: #dfe1e7;
  --kp-ink-05: #f0f1f4;
  --kp-ink-02: #f8f8fa;
  --kp-white: #ffffff;

  /* ── Action (et rien d'autre) ── */
  --kp-blue: #2563eb;
  --kp-blue-dark: #1d4ed8;
  --kp-blue-light: #eff5ff;

  /* ── États, nommés par rôle ── */
  --kp-success: #047857;
  --kp-success-light: #ecfdf5;
  --kp-warning: #b45309;
  --kp-warning-light: #fffbeb;
  --kp-danger: #b91c1c;
  --kp-danger-light: #fef2f2;
  --kp-info: #0e7490;
  --kp-info-light: #ecfeff;

  /* ── Logo et couverture uniquement ── */
  --kp-mark-blue: #3a66ae;
  --kp-mark-sky: #1c9fda;

  /* ── Typographie ── */
  --kp-font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kp-font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --kp-font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── Espacements (base 4px) ── */
  --kp-space-1: 4px;
  --kp-space-2: 8px;
  --kp-space-3: 12px;
  --kp-space-4: 16px;
  --kp-space-5: 20px;
  --kp-space-6: 24px;
  --kp-space-8: 32px;
  --kp-space-12: 48px;
  --kp-space-16: 64px;

  /* ── Rayons (selon la taille de l'objet) ── */
  --kp-radius-xs: 4px;
  --kp-radius-sm: 8px;
  --kp-radius-md: 12px;
  --kp-radius-lg: 16px;
  --kp-radius-full: 9999px;

  /* ── Ombres : ce qui flotte ── */
  --kp-shadow-sm: 0 1px 2px #0b0e140f, 0 1px 3px #0b0e140a;
  --kp-shadow-md: 0 4px 12px #0b0e1414, 0 2px 4px #0b0e140a;
  --kp-shadow-lg: 0 16px 40px #0b0e1424, 0 4px 12px #0b0e140f;
  --kp-focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #2563eb;

  /* ── Ruptures (référence : inutilisables dans @media, écrire 576/768/992/1200/1400 en min-width) ── */
  --kp-bp-sm: 576px;
  --kp-bp-md: 768px;
  --kp-bp-lg: 992px;
  --kp-bp-xl: 1200px;
  --kp-bp-xxl: 1400px;

  /* ── Tailles ── */
  --kp-container: 1320px;
  --kp-control-lg: 48px;
  --kp-control-md: 44px;
  --kp-control-sm: 36px;
  --kp-icon-sm: 16px;
  --kp-icon-md: 20px;
  --kp-icon-lg: 24px;

  /* ── Empilement ── */
  --kp-z-sticky: 100;
  --kp-z-menu: 200;
  --kp-z-search: 300;
  --kp-z-modal: 400;

  /* ── Mouvement ── */
  --kp-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --kp-transition: 0.15s var(--kp-ease);

  /* ── Pont Bootstrap 5 (Hummingbird) : ses composants héritent de la police ── */
  --bs-body-font-family: var(--kp-font-sans);
}