/* ============================================
   ALGORIS IT — variables.css
   Design tokens. Tout le thème est ici.
   ============================================ */

/* ─── Dark Theme (défaut) ─── */
:root,
:root[data-theme="dark"] {

  /* Backgrounds */
  --bg-primary:      #050508;
  --bg-secondary:    #0C0C10;
  --bg-card:         #111116;
  --bg-card-hover:   #16161D;
  --bg-overlay:      rgba(5, 5, 8, 0.75);

  /* Accent — Bleu ALGORIS, utilisé avec parcimonie */
  --accent:          #3B82F6;
  --accent-dark:     #1D4ED8;
  --accent-glow:     rgba(59, 130, 246, 0.15);
  --accent-glow-lg:  rgba(59, 130, 246, 0.08);

  /* Textes */
  --text-primary:    #F9FAFB;
  --text-secondary:  #9CA3AF;
  --text-muted:      #4B5563;

  /* Bordures */
  --border:          #1F1F27;
  --border-hover:    #2E2E3E;
  --border-accent:   rgba(59, 130, 246, 0.4);

  /* Navbar */
  --navbar-bg:       rgba(5, 5, 8, 0.0);
  --navbar-bg-scrolled: rgba(5, 5, 8, 0.85);

  /* Splash */
  --splash-bg:       #050508;
}

/* ─── Light Theme (toggle) ─── */
:root[data-theme="light"] {

  --bg-primary:      #F4F4F8;
  --bg-secondary:    #EAEAF0;
  --bg-card:         #FFFFFF;
  --bg-card-hover:   #F8F8FC;
  --bg-overlay:      rgba(244, 244, 248, 0.85);

  --accent:          #2563EB;
  --accent-dark:     #1D4ED8;
  --accent-glow:     rgba(37, 99, 235, 0.12);
  --accent-glow-lg:  rgba(37, 99, 235, 0.06);

  --text-primary:    #0C0C10;
  --text-secondary:  #4B5563;
  --text-muted:      #9CA3AF;

  --border:          #E5E5ED;
  --border-hover:    #D1D1E0;
  --border-accent:   rgba(37, 99, 235, 0.35);

  --navbar-bg:       rgba(244, 244, 248, 0.0);
  --navbar-bg-scrolled: rgba(244, 244, 248, 0.88);

  --splash-bg:       #050508;
}

/* ─── Nexa — Police locale ─── */
@font-face {
  font-family: 'Nexa';
  src: url('../fonts/Nexa-Heavy.ttf') format('truetype');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nexa';
  src: url('../fonts/Nexa-ExtraLight.ttf') format('truetype');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}

/* ─── Typographie ─── */
:root {
  --font-display:  'Nexa', sans-serif;         /* Titres H1/H2/H3 */
  --font-body:     'Inter', sans-serif;        /* Corps, paragraphes */
  --font-mono:     'Space Mono', monospace;    /* Labels, accents, code */
}

/* ─── Espacements ─── */
:root {
  --space-xs:   0.25rem;   /*  4px */
  --space-sm:   0.5rem;    /*  8px */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2.5rem;    /* 40px */
  --space-2xl:  4rem;      /* 64px */
  --space-3xl:  6rem;      /* 96px */
  --space-4xl:  8rem;      /* 128px */
}

/* ─── Tailles de section ─── */
:root {
  --section-padding: var(--space-4xl) var(--space-xl);
  --container-max:   1440px;
  --container-wide:  1600px;
}

/* ─── Radius ─── */
:root {
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
}

/* ─── Transitions ─── */
:root {
  --transition-fast:   0.15s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.6s ease;
  --transition-xslow:  1.2s ease;
}

/* ─── Ombres ─── */
:root {
  --shadow-card:   0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
  --shadow-hover:  0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow:   0 0 32px var(--accent-glow);
  --shadow-glow-lg:0 0 80px var(--accent-glow-lg);
}

/* ─── Z-index ─── */
:root {
  --z-base:    1;
  --z-card:    10;
  --z-navbar:  100;
  --z-splash:  1000;
}