/* §---------------------------------------------
§                   VARIABLES                    
§ Variables fonts, couleurs, espacements, etc... 
§--------------------------------------------- */

/**==============================================
**                 TYPOGRAPHIE
**===============================================**/
@font-face {
  font-family: 'FiraCode';
  src: url(../../fonts/FiraCode-VariableFont_wght.ttf);
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url(../../fonts/Roboto-VariableFont_wdth\wght.ttf);
  font-display: swap;
}

/**==============================================
**                LES COULEURS
**===============================================**/
:root {
  /**=========== Couleur de base ==============*/
  --hue: 29;
  --sat: 100%;
  --light: 63%;

  /**======== Palette des couleurs ============*/
  /*(1) Primary Color */
  --primary-color-light: hsl(
    var(--hue),
    calc((2 / 3) * var(--sat)),
    calc((2 / 3) * var(--light) + 33%)
  );
  --primary-color: hsl(var(--hue), var(--sat), var(--light));
  --primary-color-dark: hsl(var(--hue), calc(50% + var(--sat) / 2), calc(var(--light) / 2));

  /*(2) Neutral */
  --neutral0: hsl(var(--hue), 1%, 98%);
  --neutral1: hsl(var(--hue), 1%, 79%);
  --neutral2: hsl(var(--hue), 1%, 60%);
  --neutral3: hsl(var(--hue), 1%, 41%);
  --neutral3-5: hsl(var(--hue), 1%, 32%);
  --neutral4: hsl(var(--hue), 1%, 22%);
  --neutral4-5: hsl(var(--hue), 1%, 13%);
  --neutral5: hsl(var(--hue), 1%, 3%);

  /*(3) Variation en transparence */
  --transparent10: hsla(var(--hue), var(--sat), var(--light), 0.1); /* séparateur, ombre fine */
  --transparent30: hsla(
    var(--hue),
    var(--sat),
    var(--light),
    0.3
  ); /* fond de carte, bordure+visible */
  --transparent60: hsla(
    var(--hue),
    var(--sat),
    var(--light),
    0.6
  ); /* overlays, fond semi-transparent derrière texte, survol */
  --transparent90: hsla(
    var(--hue),
    var(--sat),
    var(--light),
    0.9
  ); /* effet de survol bouton/lien, actif */

  /*(4) Effets d'ombre */
  --shadow-color: 0 5px 10px 0 hsla(var(--hue), var(--sat), var(--light), 0.15),
    0 3px 5px 0 hsla(var(--hue), var(--sat), var(--light), 0.1),
    0 1px 2px 1px hsla(var(--hue), var(--sat), var(--light), 0.05);
  --shadow-black: 0 5px 10px 0 hsla(0, 0%, 22%, 0.15), 0 3px 5px 0 hsla(0, 0%, 22%, 0.1),
    0 1px 2px 1px hsla(0, 0%, 22%, 0.05);
  --shadow-white: 0 5px 10px 0 hsla(0, 0%, 79%, 0.15), 0 3px 5px 0 hsla(0, 0%, 79%, 0.1),
    0 1px 2px 1px hsla(0, 0%, 79%, 0.05);
}

/**==============================================
**               AUTRES VARIABLES
**===============================================**/
:root {
  /**============= Espacements ================*/
  --spacing-xs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-s: 0.75rem;
  --spacing-m: 1rem;
  --spacing-l: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;

  /**========= Taille des polices =============*/
  --font-size-xs: 0.75rem;
  --font-size-s: 0.875rem;
  --font-size-m: 1rem;
  --font-size-l: 1.25rem;
  --font-size-xl: 2rem;
  --font-size-xxl: 3rem;

  /**========== Rayon de bordure ==============*/
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;

  /**========= Durée de transition ============*/
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/**==============================================
**            VARIABLES SEMANTIQUES
**===============================================**/
:root {
  /**======== Couleur de background ===========*/
  --background-color-primary: var(--neutral4-5);

  /**============= Typographie ================*/
  --font-text: 'Roboto', sans-serif;
  --font-code: 'FiraCode', monospace;

  /**========== Couleur de texte ==============*/
  --color-text-primary: var(--neutral0);
  --color-text-secondary: var(--neutral2);

  /**======= Couleur d'interactivité ==========*/
  /*(1) Accentuation : */
  --color-accent-primary: var(--primary-color);
  --color-accent-primary-dark: var(--primary-color-dark);
  --color-accent-primary-light: var(--primary-color-light);

  /*(2) Hover : */
  --color-hover-button: var(--transparent90); /* effet au survol des lien et bouttons*/
  --color-hover-link: var(--transparent60); /* effet au survol des li*/

  /*(3) Border : */
  --color-border: var(--transparent30);

  /*(4) Light Separator */
  --color-separator-light: var(var(--transparent10));
}