/* =========================================================
   KIFMAMÈCHE 2 — Design tokens (v0.13.0)
   Préfixe : --km-
   ========================================================= */

/*
  Auto-hébergement activé dynamiquement par inc/enqueue.php uniquement pour les
  fichiers présents. Familles : Oswald 400/500/600/700 et Manrope
  400/500/600/700. Voir assets/fonts/README.md.

  @font-face {
    font-family: "Oswald";
    src: url("../fonts/oswald-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Oswald";
    src: url("../fonts/oswald-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }

  Emplacement attendu : assets/fonts/
*/

:root {
  /* ——— Couleurs de base ——— */
  --km-color-ink: #080808;
  --km-color-coal: #121212;
  --km-color-graphite: #242424;
  --km-color-surface-muted: #3a3a3a;
  --km-color-steel: #7a7a7a;
  --km-color-muted: #8a8680;
  --km-color-bone: #f2efe8;
  --km-color-white: #ffffff;
  --km-color-red: #e1262f;
  --km-color-red-light: #e8404a;
  --km-color-red-dark: #8e1018;
  --km-color-blue: #1769ff;
  --km-color-blonde: #d9a441;
  --km-color-success: #3d9a5f;
  --km-color-warning: #d9a441;
  --km-color-error: #e1262f;

  /* ——— Sémantique ——— */
  --km-color-bg: var(--km-color-ink);
  --km-color-bg-elevated: var(--km-color-coal);
  --km-color-bg-inverse: var(--km-color-bone);
  --km-color-text: var(--km-color-bone);
  --km-color-text-muted: #918d84;
  --km-color-text-inverse: var(--km-color-ink);
  --km-color-border: rgba(242, 239, 232, 0.12);
  --km-color-border-strong: rgba(242, 239, 232, 0.28);
  --km-color-accent: var(--km-color-red);
  --km-color-accent-text: var(--km-color-red-light);
  --km-color-accent-hover: var(--km-color-red-dark);
  --km-color-focus: var(--km-color-red);
  --km-color-surface: var(--km-color-coal);

  /* ——— Typographie ——— */
  --km-font-display: Oswald, "Arial Narrow", Helvetica, Arial, sans-serif;
  --km-font-body: Manrope, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --km-fw-regular: 400;
  --km-fw-medium: 500;
  --km-fw-semibold: 600;
  --km-fw-bold: 700;

  --km-lh-tight: 1.05;
  --km-lh-snug: 1.2;
  --km-lh-body: 1.65;
  --km-lh-relaxed: 1.8;

  --km-tracking-tight: -0.02em;
  --km-tracking-normal: 0;
  --km-tracking-wide: 0.08em;
  --km-tracking-wider: 0.16em;
  --km-tracking-widest: 0.24em;

  --km-measure: 68ch;

  --km-text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --km-text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --km-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --km-text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --km-text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --km-text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --km-text-3xl: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);
  --km-text-4xl: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  --km-text-5xl: clamp(2.75rem, 1.8rem + 3.2vw, 4.5rem);
  --km-text-display: clamp(4rem, 1.5rem + 8vw, 9.5rem);
  --km-text-hero-brand: clamp(5rem, 1.25rem + 12vw, 13rem);

  /* ——— Espacements ——— */
  --km-space-2xs: 0.25rem;
  --km-space-xs: 0.5rem;
  --km-space-sm: 1rem;
  --km-space-md: 1.5rem;
  --km-space-lg: 2rem;
  --km-space-xl: 3rem;
  --km-space-2xl: 4.5rem;
  --km-space-3xl: 6rem;
  --km-space-4xl: 8rem;

  /* ——— Layout ——— */
  --km-container-sm: 40rem;
  --km-container-md: 48rem;
  --km-container-lg: 72rem;
  --km-container-xl: 80rem;
  --km-gutter: clamp(1rem, 0.7rem + 1.2vw, 2rem);
  --km-header-height: 4.5rem;
  --km-header-h: var(--km-header-height);
  --km-content-width: var(--km-container-lg);

  /* ——— Bordures / rayons ——— */
  --km-border-width: 1px;
  --km-border-width-strong: 2px;
  --km-radius-sm: 0;
  --km-radius-md: 0.125rem;
  --km-radius-lg: 0.25rem;
  --km-radius-xl: 0.5rem;

  /* ——— Ombres ——— */
  --km-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --km-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --km-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5);

  /* ——— Matière éditoriale ——— */
  --km-line-soft: rgba(242, 239, 232, 0.14);
  --km-line-loud: rgba(242, 239, 232, 0.42);
  --km-paper: #f2efe8;

  /* ——— Mouvement ——— */
  --km-duration-instant: 80ms;
  --km-duration-fast: 150ms;
  --km-duration-normal: 280ms;
  --km-duration-slow: 600ms;
  --km-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --km-ease-expressive: cubic-bezier(0.16, 1, 0.3, 1);

  /* ——— Touch ——— */
  --km-touch-min: 44px;
  --km-btn-h: 48px;
}