/* ============================================
   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 (WOFF2 prioritaire, TTF fallback) ─── */
@font-face {
  font-family: 'Nexa';
  src: url('../fonts/Nexa-Heavy.woff2') format('woff2'),
       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.woff2') format('woff2'),
       url('../fonts/Nexa-ExtraLight.ttf')   format('truetype');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}

/* ─── Tokens divers (fusionnés dans un seul bloc :root) ─── */
:root {
  /* Typographie */
  --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 */
  --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 */
  --section-padding: var(--space-4xl) var(--space-xl);
  --container-max:   1440px;
  --container-wide:  1600px;

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

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

  /* Ombres */
  --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 */
  --z-base:    1;
  --z-card:    10;
  --z-navbar:  100;
  --z-splash:  1000;
}

/* ============================================
   ─── Breakpoints canoniques ───
   ⚠️  Les media queries CSS ne supportent pas
   les custom properties ; ces valeurs sont la
   RÉFÉRENCE à utiliser dans tout nouveau code.
   ============================================

   --bp-xs: 400px   (mobile portrait, petits écrans)
   --bp-sm: 600px   (mobile large / phablet)
   --bp-md: 700px   (tablette portrait)
   --bp-lg: 900px   (tablette paysage / desktop S)
   --bp-xl: 1024px  (desktop standard)
   --bp-2xl: 1280px (desktop large)

   Usage :
   @media (max-width: 400px)  { ... }
   @media (max-width: 600px)  { ... }
   @media (max-width: 700px)  { ... }
   @media (max-width: 900px)  { ... }
   @media (max-width: 1024px) { ... }
   @media (max-width: 1280px) { ... }
   ============================================ */