:root {
  /* Colors */
  --blue: #0060FF;
  --orange: #FF7800;
  --white: #FFFFFF;
  --black: #000000;
  --bg: #F5F5F7;
  --green: #2DDB76;     /* >=51% */
  --red: #FF0000;       /* <=25% */
  --gray: #6B7280;      /* petits textes, séparateurs, © */
  --track: #DDDDDD;     /* piste jauges */

  /* Border radius tokens */
  --r-lg: 40px;         /* cartes larges, formulaires */
  --r-xl: 60px;         /* cartes Projet */
  --r-pill: 100px;      /* barre flottante, boutons oblongs */

  /* Grid base */
  --grid: 8px;

  /* Typography weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Transitions */
  --transition-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
  --transition-duration: 280ms;
}

/* Typography base */
body {
  font-family: 'Montserrat', sans-serif;
  font-weight: var(--weight-regular);
  line-height: 1.5;
  color: var(--black);
  background-color: var(--bg);
  margin: 0;
  padding: 0;
}

/* Respect font weights exactly as specified */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-bold);
  margin: 0;
}

/* Section titles */
.section-title {
  font-weight: var(--weight-bold);
  font-size: 40px;
  line-height: 48px;
  color: var(--black);
}

/* Competence titles and nav labels */
.competence-title,
.nav-label,
.contact-button {
  font-weight: var(--weight-semibold);
}

/* Regular text - no bold by default */
p, span, div {
  font-weight: var(--weight-regular);
}

/* Only use strong tags where the design shows bold */
strong {
  font-weight: var(--weight-semibold);
}

/* Reduced motion support */
@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;
  }
}