/*
  base.css — reset, typographie, accessibilité. Aucune valeur en dur : tout vient de tokens.css.
  Ce qui doit être vrai partout et changer en un seul endroit.
*/

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--kk-font-family);
  font-size: var(--kk-font-size-md);
  line-height: var(--kk-line-height-normal);
  color: var(--kk-color-text);
  background-color: var(--kk-color-canvas);
  -webkit-font-smoothing: antialiased;
}

/* Bootstrap est chargé après cette feuille dans l'hôte MAUI. Cette règle plus spécifique garantit
   que le texte racine reste piloté par les tokens KostKat lorsque le thème sombre est actif. Les
   composants conservent ensuite leurs couleurs sémantiques (succès, erreur, lien, action). */
:root[data-theme="dark"] body {
  color: var(--kk-color-text);
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--kk-font-family-display);
  line-height: var(--kk-line-height-tight);
  font-weight: var(--kk-font-weight-bold);
}
h1 { font-size: var(--kk-font-size-xl); }
h2 { font-size: var(--kk-font-size-lg); }

a { color: var(--kk-color-brand); }
a:hover { color: var(--kk-color-brand-hover); }

img, svg, video { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; color: inherit; }

/* R-35 — le focus reste TOUJOURS visible : le parcours au clavier doit être suivable à l'œil
   (SC-007). Ne jamais remplacer par `outline: none` sans indicateur de substitution. */
:focus-visible {
  outline: 2px solid var(--kk-color-focus);
  outline-offset: 2px;
  border-radius: var(--kk-radius-xs);
}

/* FocusOnNavigate place le focus sur le premier h1 avec tabindex="-1" pour annoncer la nouvelle
   page aux lecteurs d'écran. Ce titre n'est pas interactif : conserver le focus sémantique sans
   lui dessiner le contour réservé aux contrôles évite le cadre bleu observé après navigation. */
h1[tabindex="-1"]:focus { outline: none; }

/* Contenu réservé aux lecteurs d'écran : présent dans l'arbre d'accessibilité, invisible à l'œil. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Respecte le réglage système de réduction des animations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Écran de chargement initial : le pré-rendu étant désactivé, sans lui l'utilisateur regarde une
   page blanche pendant le téléchargement du runtime, sans savoir si l'application charge ou casse. */
.kk-boot {
  display: grid;
  place-content: center;
  gap: var(--kk-space-4);
  min-height: 100dvh;
  color: var(--kk-color-text-muted);
}

.kk-boot__spinner {
  width: 2rem; height: 2rem;
  justify-self: center;
  border: 3px solid var(--kk-color-border);
  border-top-color: var(--kk-color-brand);
  border-radius: var(--kk-radius-pill);
  animation: kk-spin var(--kk-duration-slow) linear infinite;
}

@keyframes kk-spin { to { transform: rotate(360deg); } }