/* ========================================
  TYPOGRAPHIE – Système Modulaire & Accessible
  ======================================== */

/* ————————————————————————
  1. ROOT & VARIABLES (doivent être définies dans :root ou [data-theme])
  ———————————————————————— */
  :root {
  /* Police principale */
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* --font-family: -apple-system, "system-ui", "Segoe UI", sans-serif; */
  /* --font-family: "Graphik", sans-serif; */
  --font-family-mono: "SF Mono", "Roboto Mono", Menlo, Monaco, Consolas, "Courier New", monospace;

  /* Tailles de base – échelle modulaire (1.25 ratio) */
  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md:   1.125rem;  /* 18px */
  --font-size-lg:   1.25rem;   /* 20px */
  --font-size-xl:   1.5rem;    /* 24px */
  --font-size-2xl:  1.875rem;  /* 30px */
  --font-size-3xl:  2.25rem;   /* 36px */
  --font-size-4xl:  3rem;      /* 48px */
  --font-size-5xl:  3.75rem;   /* 60px */

  /* Line heights – optimisés pour lisibilité */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed:1.75;

  /* Poids */
  --font-weight-light:  300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold:600;
  --font-weight-bold:   700;
  --font-weight-black:  900;

  /* Couleurs texte */
  --text-color:         #1a1a1a;
  --text-color-muted:   #666;
  --text-color-muted-light: #999;
  --text-color-inverse: #fff;
  --primary-color:      #0066ff;
  --link-color-hover:  color-mix(in oklab, var(--primary-color), #000 20%);

  /* Espacements verticaux – rythme vertical */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2.5rem;
  --spacing-2xl: 4rem;
}

/* Paragraphes */
p {
  margin: 0 0 var(--spacing-md);
  max-width: 70ch; /* Lisibilité optimale */
}

small, .text--small {
  font-size: var(--font-size-sm);
  line-height: var(--leading-snug);
}

/* ————————————————————————
    3. HEADINGS – Échelle typographique cohérente
    ———————————————————————— */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--spacing-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  color: inherit;
}

h1 { font-size: var(--font-size-4xl); font-weight: 800; margin-bottom: var(--spacing-lg); }
h2 { font-size: var(--font-size-3xl); font-weight: 700; margin-bottom: var(--spacing-md); }
h3 { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-md); }
h4 { font-size: var(--font-size-xl);  margin-bottom: var(--spacing-sm); }
h5 { font-size: var(--font-size-lg);  margin-bottom: var(--spacing-sm); }
h6 { font-size: var(--font-size-md);  margin-bottom: var(--spacing-sm); }

/* Responsive headings */
@media (max-width: 640px) {
  h1 { font-size: var(--font-size-3xl); }
  h2 { font-size: var(--font-size-2xl); }
  h3 { font-size: var(--font-size-xl); }
}

/* ————————————————————————
    4. LIENS – Accessibles & beaux
    ———————————————————————— */
a {
  color: var(--text-color);
  text-decoration: underline;
  /* text-underline-offset: 0.1em; */
  transition: color 0.2s ease, text-decoration 0.2s ease;

  &:hover,
  &:focus {
    color: var(--link-color-hover);
    /* text-decoration-thickness: 2px; */
  }

  &:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* Lien visité */
  &:visited {
    /* color: color-mix(in oklab, var(--primary-color), #000 5%); */
    color: var(--text-color);
  }
}

/* Variante sans underline */
a.text--no-underline {
  text-decoration: none;
}

/* ————————————————————————
    5. LISTES – Propres & indentées
    ———————————————————————— */
ul, ol {
  margin: 0 0 var(--spacing-md);
  padding-left: var(--spacing-lg);
}

li {
  margin-bottom: var(--spacing-xs);
}

/* Liste sans style */
.list--unstyled {
  list-style: none;
  padding-left: 0;
}

/* ————————————————————————
    6. BLOCKQUOTE & CODES
    ———————————————————————— */
blockquote {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-md) var(--spacing-lg);
  border-left: 4px solid var(--primary-color);
  background: color-mix(in oklab, var(--primary-color), transparent 95%);
  font-style: italic;
  color: var(--text-color-muted);
}

code, kbd, samp, pre {
  font-family: var(--font-family-mono);
  font-size: 0.875em;
  background: #f4f4f4;
  padding: 0.2em 0.4em;
  border-radius: 4px;
}

pre {
  padding: var(--spacing-md);
  overflow-x: auto;
  background: #2d2d2d;
  color: #f8f8f2;
  border-radius: 6px;
}

/* ————————————————————————
    7. UTILITAIRES TYPO (classes réutilisables)
    ———————————————————————— */
.text--center   { text-align: center; }
.text--left     { text-align: left; }
.text--right    { text-align: right; }
.text--justify  { text-align: justify; }

.text--uppercase { text-transform: uppercase; }
.text--lowercase { text-transform: lowercase; }
.text--capitalize { text-transform: capitalize; }

.text--bold     { font-weight: var(--font-weight-bold); }
.text--medium   { font-weight: var(--font-weight-medium); }
.text--light    { font-weight: var(--font-weight-light); }

.text--muted    { color: var(--text-color-muted); }
.text--primary  { color: var(--primary-color); }
.text--inverse  { color: var(--text-color-inverse); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ————————————————————————
    8. RYTHME VERTICAL – Espacement cohérent
    ———————————————————————— */
.flow > * + * {
  margin-top: var(--flow-space, var(--spacing-md));
}

/* Ex: <div class="flow" style="--flow-space: 2rem"> */