/* ─── Graph'it Design System — Tokens ────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

:root {

  /* ── Couleurs ─────────────────────────────────────────────────────────── */
  --color-dark:           #1A1B1D;
  --color-dark-2:         #1c1f23;
  --color-dark-3:         #242830;
  --color-dark-4:         #2d333b;

  --color-turquoise:      #2FB6BC;
  --color-turquoise-10:   rgba(47, 182, 188, 0.10);
  --color-turquoise-25:   rgba(47, 182, 188, 0.25);

  --color-white:          #EEF0F2;
  --color-grey:           #424242;
  --color-grey-light:     #A8B0BA;

  --color-green:          #8FD14F;

/* Dégradé allant de Noir (1) à Transparent (0) sur 54% */
  --overlay-normal: linear-gradient(
    to top, 
    hsl(0 0% 0% / 1) 0%, 
    hsl(0 0% 0% / 0.89) 8%, 
    hsl(0 0% 0% / 0.72) 16%, 
    hsl(0 0% 0% / 0.54) 25%, 
    hsl(0 0% 0% / 0.35) 34%, 
    hsl(0 0% 0% / 0.18) 43%, 
    hsl(0 0% 0% / 0.05) 50%, 
    hsl(0 0% 0% / 0) 54%
  );

  /* Dégradé allant de Noir (0.92) à Transparent (0) sur 70% */
  --overlay-hover: linear-gradient(
    to top, 
    hsl(0 0% 0% / 1) 0%, 
    hsl(0 0% 0% / 0.83) 10%, 
    hsl(0 0% 0% / 0.69) 20%, 
    hsl(0 0% 0% / 0.52) 32%, 
    hsl(0 0% 0% / 0.34) 44%, 
    hsl(0 0% 0% / 0.17) 56%, 
    hsl(0 0% 0% / 0.05) 66%, 
    hsl(0 0% 0% / 0) 70%
  );

  /* ── Typographie ──────────────────────────────────────────────────────── */
  --font-display:   'Open Sans', sans-serif;
  --font-body:      'Open Sans', sans-serif;

  --fw-black:       800;
  --fw-medium:      500;
  --fw-light:       300;

  /* ── Espacements (échelle 8px) ────────────────────────────────────────── */
  --sp-1:    8px;
  --sp-2:   16px;
  --sp-3:   24px;
  --sp-4:   32px;
  --sp-6:   48px;
  --sp-8:   64px;
  --sp-12:  96px;

  /* ── Transitions ──────────────────────────────────────────────────────── */
  --tr-fast:  0.18s ease;
  --tr-base:  0.25s ease;
  --tr-slow:  0.50s ease;

  /* ── Radius ───────────────────────────────────────────────────────────── */
  --r-sm:    8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-full: 100px;

}