/* ============================================================
   SYSTÈME TYPOGRAPHIQUE GLOBAL - Boréal Architecture
   ============================================================ */

:root {
  /* ── Polices ────────────────────────────────────────────── */
  --font-heading-primary: "TT-Milks-Casual-Pie-Line", serif;
  --font-heading-secondary: "Poiret", serif;
  --font-body: "Montserrat", sans-serif;
  --font-signature: "East-liberty-signature", cursive;

  /* ── Échelle typographique responsive ───────────────────── */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.35rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.75rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
  --text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);

  /* ── Line heights ───────────────────────────────────────── */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  --leading-loose: 2;

  /* ── Couleurs de texte ──────────────────────────────────── */
  --color-text-primary: #042825;
  --color-text-secondary: #666666;
  --color-text-tertiary: #999999;
  --color-text-accent: #d9a33e;

  /* ── Couleurs de texte inversées (pour fonds sombres) ─── */
  --color-text-inverse: #ffffff;
  --color-text-inverse-secondary: rgba(255, 255, 255, 0.85);
  --color-text-inverse-tertiary: rgba(255, 255, 255, 0.7);

  /* ── Breakpoints (pour référence) ───────────────────────── */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1400px;
}

/* ── Styles de base ─────────────────────────────────────────── */
/*
* {
  outline: 1px solid red !important;
}*/

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-x: none;
}

/* ── Hiérarchie des titres ──────────────────────────────────── */

h1 {
  font-family: var(--font-heading-primary);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  font-weight: 600;
  color: var(--color-text-secondary);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-text-stroke: 1px currentcolor;
}

h2 {
  font-family: var(--font-heading-secondary);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  font-weight: 600;
  color: var(--color-text-primary);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-text-stroke: 1px currentcolor;
}

h3 {
  font-family: var(--font-heading-secondary);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: 600;
  color: var(--color-text-primary);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-text-stroke: 1px currentcolor;
}

h4 {
  font-family: var(--font-heading-secondary);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  font-weight: 600;
  color: var(--color-text-primary);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-text-stroke: 1px currentcolor;
}

h5 {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-text-stroke: 1px currentcolor;
}

/* ── Paragraphes ────────────────────────────────────────────── */

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  text-align: left;
  max-width: 75ch;
}

/* ── Listes ─────────────────────────────────────────────────── */

li {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}

/* ============================================================
   COMPONENT-SPECIFIC RESETS
   ============================================================ */

/* ── Custom Menu ────────────────────────────────────────────── */
/* Reset typography inheritance but preserve layout properties */
.custom-menu h1,
.custom-menu h2,
.custom-menu h3,
.custom-menu h4,
.custom-menu p {
  all: unset;
}

.custom-menu li {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: inherit;
  max-width: none;
}

/* ── Slogan & Handwritten Effect ────────────────────────────── */
/* Preserve signature font for special text elements */
.slogan,
.handwritten-effect {
  font-family: var(--font-signature);
}

/* ── Texte petit ────────────────────────────────────────────── */

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

/* ── Classes utilitaires ────────────────────────────────────── */

.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

.font-signature {
  font-family: var(--font-signature);
  font-weight: 400;
}

/* ── Classes de taille ──────────────────────────────────────── */

.text-xs {
  font-size: var(--text-xs);
}
.text-sm {
  font-size: var(--text-sm);
}
.text-base {
  font-size: var(--text-base);
}
.text-lg {
  font-size: var(--text-lg);
}
.text-xl {
  font-size: var(--text-xl);
}
.text-2xl {
  font-size: var(--text-2xl);
}
.text-3xl {
  font-size: var(--text-3xl);
}

/* ============================================================
   BACKGROUND CONTEXT UTILITIES - Text Legibility
   ============================================================ */

/* ── For Dark Backgrounds ───────────────────────────────── */
/* Use on sections with dark backgrounds (e.g., materials slide) */
.text-light,
.theme-dark {
  --color-text-primary: var(--color-text-inverse);
  --color-text-secondary: var(--color-text-inverse-secondary);
  --color-text-tertiary: var(--color-text-inverse-tertiary);
}

.text-light *,
.theme-dark * {
  color: inherit;
}

/* ── For Light Backgrounds ──────────────────────────────── */
/* Explicit override when needed */
.text-dark,
.theme-light {
  --color-text-primary: #042825;
  --color-text-secondary: #666666;
  --color-text-tertiary: #999999;
}

/* ── For Unpredictable Image Backgrounds ────────────────── */
/* Adds shadow for legibility over any image */
.text-on-image,
.text-on-image h1,
.text-on-image h2,
.text-on-image h3,
.text-on-image h4,
.text-on-image p,
.text-on-image li {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ── Combined Utility ───────────────────────────────────── */
/* For light text on dark/unpredictable image backgrounds */
.text-on-image-light {
  --color-text-primary: var(--color-text-inverse);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.text-on-image-light h1,
.text-on-image-light h2,
.text-on-image-light h3,
.text-on-image-light h4,
.text-on-image-light p,
.text-on-image-light li {
  color: var(--color-text-inverse);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

/* ── Mobile Typography Adjustments ──────────────────────── */
@media (max-width: 768px) {
  h1 {
    font-size: var(--text-2xl); /* Au lieu de --text-3xl */
  }
}