/* ============================================================
   VARIABLES.CSS
   Charte graphique globale du site.
   
   PALETTE : Inspirée Cyberpunk 2077 / Carpenter Brut
   - Fond sombre (noir bleuté profond)
   - Accents néon : cyan, magenta/rose, jaune électrique
   - Texte clair sur fond sombre
   
   TYPOGRAPHIE :
   - Orbitron : Titres (géométrique, futuriste, type HUD)
   - Rajdhani : Texte courant (lisible, légèrement tech)
   - Share Tech Mono : Code, données, éléments techniques
   
   Tu peux modifier ces variables pour ajuster toute la charte
   graphique du site d'un seul coup.
   ============================================================ */
@font-face {
    font-family: "Satoshi-Black";
    src: url(../media/font/Satoshi-Black.otf) format("opentype") 
  }
  @font-face {
    font-family: "Satoshi-Regular";
    src: url(../media/font/Satoshi-Regular.otf) format("opentype")
  }
  @font-face {
    font-family: "Satoshi-Light";
    src: url(../media/font/Satoshi-Light.otf) format("opentype");
  }
:root {
  /* ---- COULEURS PRINCIPALES ---- */     
  --color-bg-primary:    #f3f2e8;       
  --color-bg-secondary:  #edece3;       
  --color-bg-tertiary:   #cac9c0;       

  --color-default:          #FFDC00;
  --color-default-dim:          #FFDC0088;
  --color-default-glow:          #FFDC0040;       
  --color-secondary:       #000;    

  --color-green:         #00b32d;
  --color-orange:           #b37400;
  --color-red:           #b30000;
  --color-blue:           #0077b3;        

  /* ---- TEXTE ---- */
  --color-text-primary:  #000;       /* Texte principal (quasi blanc) */
  --color-text-secondary:#676257;       /* Texte secondaire (labels, hints) */
  --color-text-muted:    #91897a;       /* Texte désactivé/muted */

  /* ---- BORDURES & LIGNES ---- */
  --color-border:  #cac9c0;       /* Bordures subtiles */
  --color-border-active: var(--color-default);  /* Bordures actives/focus */

  /* ---- TYPOGRAPHIE ---- */
  --font-display:   'Satoshi', sans-serif;
  --font-body:      'Satoshi-Light', sans-serif;      
  --font-mono:      'Satoshi-Regular', monospace; 

  /* ---- TAILLES DE TEXTE ---- */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;
  --text-sm2:   0.9375rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  2rem;       /* 32px */
  --text-4xl:  2.5rem;     /* 40px */
  --text-5xl:  3.5rem;     /* 56px */

  /* ---- ESPACEMENTS ---- */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-sm2: 0.7rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* ---- BORDURES ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* ---- TRANSITIONS ---- */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   500ms ease;

  /* ---- Z-INDEX (échelle cohérente) ---- */
  --z-bg:        -1;
  --z-base:       0;
  --z-elevated:  10;
  --z-overlay:   50;
  --z-modal:    100;
  --z-toast:    200;
}

/* ============================================================
   STYLES DE BASE GLOBAUX
   Appliqués à tout le site via body.
   ============================================================ */

body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
}

/* Scrollbar personnalisée (Webkit) — style cyberpunk */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-deep);
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-cyan-dim);
}

/* Sélection de texte */
::selection {
  background: var(--color-secondary);
  color: var(--color-default);
}