/* ==========================================
   SERVME - CORE TYPOGRAPHY
   Typographie de base - Fonts, tailles, line-height
   Extrait de styles.css et design-system.css
   ========================================== */

/* === BODY === */
/* Note : Les couleurs globales s'appliquent au contenu principal.
   Les composants avec leur propre design system (header, footer) 
   redéfinissent leurs couleurs via leurs propres fichiers CSS. */
body {
  font-family: var(--font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: var(--font-base, 16px);
  color: var(--gray-900, #222222);
  background: var(--white, #ffffff);
  line-height: var(--line-height-normal, 1.6);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === TITRES === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-weight: var(--font-semibold, 600);
  line-height: var(--line-height-tight, 1.25);
  margin-bottom: 1rem;
  color: var(--gray-900, #222222);
}

h1 {
  font-size: var(--font-3xl, 40px);
  font-weight: var(--font-extrabold, 800);
}

h2 {
  font-size: var(--font-2xl, 32px);
  font-weight: var(--font-bold, 700);
}

h3 {
  font-size: var(--font-xl, 24px);
  font-weight: var(--font-semibold, 600);
}

h4 {
  font-size: var(--font-lg, 20px);
  font-weight: var(--font-semibold, 600);
}

h5 {
  font-size: var(--font-md, 18px);
  font-weight: var(--font-semibold, 600);
}

h6 {
  font-size: var(--font-base, 16px);
  font-weight: var(--font-semibold, 600);
}

/* === PARAGRAPHES === */
p {
  font-family: var(--font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  font-size: var(--font-base, 16px);
  line-height: var(--line-height-normal, 1.6);
  color: var(--gray-900, #222222);
  margin-bottom: 1rem;
}

/* === LIENS === */
a {
  color: inherit;
  text-decoration: none;
}

/* === IMAGES === */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* === BOUTONS === */
button {
  font-family: inherit;
  cursor: pointer;
}

/* === FOCUS VISIBLE === */
*:focus-visible {
  outline: 2px solid var(--primary, #FF385C);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 4px);
}