/* =========================================
    IMPORTS DE POLICES (@font-face)
    Définition des fichiers de police locaux
========================================= */

/* Déclare la police "Rugen" */
@font-face {
  font-family: "Rugen";
  src: url("./Fonts/rugen/RugenExpanded.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Déclare la police "Montserrat" */
@font-face {
  font-family: "Montserrat";
  src: url("./Fonts/Montserrat/Montserrat-VariableFont_wght.ttf")
    format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Déclare la police "Lato" */
@font-face {
  font-family: "Lato";
  src: url("./Fonts/Lato/Lato-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Déclare la police "Lato" */
@font-face {
  font-family: "Lato";
  src: url("Fonts/Lato/Lato-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================
    VARIABLES GLOBALES (:root)
    Stockage des couleurs, tailles et polices
========================================= */
:root {
  /* --- Typographie --- */
  --font-rugen: "Rugen", sans-serif;
  --font-montserrat: "Montserrat", sans-serif;
  --font-lato: "Lato", sans-serif;

  /* Tailles de texte (Scale) */
  --text-h0: 72px;
  --text-h1: 48px;
  --text-h2: 32px;
  --text-h3: 24px;
  --text-h4: 18px;
  --text-base: 16px;
  --text-sm: 10px;

  /* Graisses de police */
  --weight-bold: 700;
  --weight-light: 400;
  --weight-medium: 500;
  --weight-expanded: 300;

  /* --- Couleurs --- */
  /* Couleurs Primaires (Teintes Cyan/Bleu vert) */
  --primary-1: #76ffd4;
  --primary-2: #21ecb5;
  --primary-3: #054a59;

  /* Couleurs Secondaires (Teintes Terre/Beige) */
  --secondary-1: #c1ac99;
  --secondary-2: #c68b5f;
  --secondary-3: #612026;

  /* Couleurs d'Accent (Rouges) */
  --accent-1: #dd1c37;
  --accent-2: #ff1133;
  --accent-3: #a9021c;

  /* Couleurs Neutres */
  --text-black: #000000;
  --text-white: #ffffff;
  --text-gray: #9b9b9b;

  /* Couleurs d'Arrière-plan spécifiques */
  --bg-header: #02090b;
  --bg-button: #ffb202; 
  --bg-main: #070b12;
  --bg-card: #08101d; 
  --bg-shop: #191a1b; 

  /* --- Effets Visuels --- */
  --shadow-drop: 0 4px 6px rgba(0, 0, 0, 0.5);     
  --shadow-inset: inset 8px 4px 3px 0 rgba(0, 0, 0, 0.25);
}

/* =========================================
    RESET & BASE
    Réinitialisation basique du navigateur
========================================= */

* {
  box-sizing: border-box;
}

body {
  background-color: var(--bg-main);
  overflow-x: hidden;
}