/*
 * MIROIR PLAIN-CSS de `../tailwind-preset.css`.
 *
 * Le showroom est une page STATIQUE : pas de build, donc pas de compilateur
 * Tailwind pour interpréter `@theme` / `@utility`. Ce fichier rejoue le preset
 * en CSS natif — mêmes noms de variables, mêmes valeurs, mêmes utilitaires.
 *
 * ⚠️ Ne pas éditer ici pour changer un token : la source de vérité reste
 * `tailwind-preset.css`. La parité (tokens, utilitaires, couche base) est
 * VÉRIFIÉE par `test/showroom.test.mjs` — toute dérive casse la CI.
 */

:root {
  --font-sans:
    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo,
    monospace;

  /* Safe areas iOS */
  --spacing-safe-top: env(safe-area-inset-top);
  --spacing-safe-bottom: env(safe-area-inset-bottom);
  --spacing-safe-left: env(safe-area-inset-left);
  --spacing-safe-right: env(safe-area-inset-right);

  /*
   * Breakpoints alignés mobile-first. En rem (= défauts Tailwind 4, équivalents
   * à 640/768/1024/1280 px quand la racine vaut 16 px) : ils suivent ainsi la
   * taille de police du navigateur. En px, une police par défaut agrandie ne
   * décalerait plus les points de rupture — régression d'accessibilité.
   */
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;

  /* Typographie fluide (text-fluid-*) — partagée badminton / molkky / etc. */
  --text-fluid-xs: clamp(0.7rem, 1.6vw, 0.8125rem);
  --text-fluid-sm: clamp(0.8125rem, 1.9vw, 0.95rem);
  --text-fluid-base: clamp(0.9rem, 2.2vw, 1.05rem);
  --text-fluid-lg: clamp(1rem, 2.6vw, 1.25rem);
  --text-fluid-xl: clamp(1.15rem, 3vw, 1.5rem);
  --text-fluid-2xl: clamp(1.35rem, 4.2vw, 2rem);

  /* Spacing fluide (p-fluid-*, gap-fluid-*, …) */
  --spacing-fluid-sm: clamp(0.5rem, 1.4vw, 0.75rem);
  --spacing-fluid-md: clamp(0.75rem, 2.4vw, 1.25rem);
  --spacing-fluid-lg: clamp(1rem, 3.2vw, 1.75rem);
}

/* Base : reset additionnel après preflight */
@layer base {
  html {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
}

/* ── Safe-area helpers (notch / Dynamic Island / home bar iOS) ─────────────── */
.pt-safe {
  padding-top: max(env(safe-area-inset-top), 0px);
}
.pb-safe {
  padding-bottom: max(env(safe-area-inset-bottom), 0px);
}
.pl-safe {
  padding-left: max(env(safe-area-inset-left), 0px);
}
.pr-safe {
  padding-right: max(env(safe-area-inset-right), 0px);
}
.px-safe {
  padding-left: max(env(safe-area-inset-left), 0px);
  padding-right: max(env(safe-area-inset-right), 0px);
}
.py-safe {
  padding-top: max(env(safe-area-inset-top), 0px);
  padding-bottom: max(env(safe-area-inset-bottom), 0px);
}

.top-safe {
  top: max(env(safe-area-inset-top), 0px);
}
.bottom-safe {
  bottom: max(env(safe-area-inset-bottom), 0px);
}
.left-safe {
  left: max(env(safe-area-inset-left), 0px);
}
.right-safe {
  right: max(env(safe-area-inset-right), 0px);
}

/* Variantes "offset" — inset système + 0.75rem (≈ ancien `*-3`) */
.top-safe-3 {
  top: calc(max(env(safe-area-inset-top), 0px) + 0.75rem);
}
.bottom-safe-3 {
  bottom: calc(max(env(safe-area-inset-bottom), 0px) + 0.75rem);
}
.left-safe-3 {
  left: calc(max(env(safe-area-inset-left), 0px) + 0.75rem);
}
.right-safe-3 {
  right: calc(max(env(safe-area-inset-right), 0px) + 0.75rem);
}

/* Cible tactile recommandée (≈ 44 px) */
.touch-target {
  min-height: 2.75rem;
  min-width: 2.75rem;
}