/* CSS Variables */
:root {
  /* Colors */
  --color-primary: #04fea0;
  --color-primary-hover: #03d98c;
  --color-background: #000;
  --color-text: #fff;

  /* BREAKPOINTS (référence — non utilisables directement dans @media)
   * --breakpoint-mobile : 700px
   * --breakpoint-tablet : 912px
   */
  --breakpoint-mobile: 700px;
  --breakpoint-tablet: 912px;

  /* Z-INDEX SCALE
   * --z-base     : éléments décoratifs (lignes verticales, bg)
   * --z-content  : contenu de slides (textes, overlays légers)
   * --z-menu     : overlay menu plein écran
   * --z-header   : barre de navigation (toujours au-dessus du menu)
   * --z-cursor   : curseur personnalisé (toujours au-dessus de tout)
   */
  --z-base:    1;
  --z-content: 5;
  --z-menu:    100;
  --z-header:  200;
  --z-cursor:  9999;

  /* Font sizes — desktop */
  --font-size-paragraph: 18px;
  --font-size-paragraph-small: 16px;
  --font-size-subtitle: 20px;
  --font-size-title-section: 32px;
  --font-size-title-main: 48px;
  --font-size-title-hero: 96px;
  --font-size-button: 13px;
  --font-size-caption: 12px;

  /* Font sizes — mobile */
  --font-size-paragraph-mobile: 16px;
  --font-size-paragraph-small-mobile: 12px;
  --font-size-subtitle-mobile: 16px;
  --font-size-title-section-mobile: 24px;
  --font-size-title-main-mobile: 32px;
  --font-size-title-hero-mobile: 48px;
  --font-size-button-mobile: 11px;
  --font-size-caption-mobile: 10px;

  /* Font sizes — tablet */
  --font-size-paragraph-tablet: 16px;
  --font-size-paragraph-small-tablet: 14px;
  --font-size-subtitle-tablet: 18px;
  --font-size-title-section-tablet: 28px;
  --font-size-title-main-tablet: 40px;
  --font-size-title-hero-tablet: 64px;
  --font-size-button-tablet: 12px;
  --font-size-caption-tablet: 11px;
}