/* =============================================================================
   base.css — Fondations legeek.tech
   Design tokens, reset, typographie, utilities
   IMPORTANT : Ce fichier doit être importé en premier par tous les autres CSS.
   Ne contient aucun composant.
   ============================================================================= */


/* =============================================================================
   GOOGLE FONTS — Space Grotesk + Inter + JetBrains Mono
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap');


/* =============================================================================
   DESIGN TOKENS — Variables CSS
   ============================================================================= */

/* --- Dark mode (défaut) --- */
:root,
[data-theme="dark"] {
  /* Arrière-plans */
  --bg-base:           #09090b;
  --bg-surface:        #19191f;
  --bg-elevated:       #222230;
  --bg-accent-subtle:  #1a0f08; /* teinte orange pour sections mises en avant */

  /* Textes */
  --text-primary:   #f0f0f5;
  --text-secondary: #a0a0b0;
  --text-muted:     #606070;

  /* Accent orange */
  --accent:        #E8602A;
  --accent-hover:  #FF7A42;
  --accent-subtle: rgba(232, 96, 42, 0.12);

  /* Accent secondaire violet */
  --secondary: #c180ff;

  /* Bordures */
  --border:       #1e1e24;
  --border-hover: #303040;
}

/* --- Light mode --- */
[data-theme="light"] {
  /* Arrière-plans */
  --bg-base:           #fafaf8;
  --bg-surface:        #f0f0ed;
  --bg-elevated:       #e8e8e4;
  --bg-accent-subtle:  #fff5f0;

  /* Textes */
  --text-primary:   #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-muted:     #888888;

  /* Accent orange */
  --accent:        #D04A1A;
  --accent-hover:  #B83A10;
  --accent-subtle: rgba(208, 74, 26, 0.08);

  /* Accent secondaire violet */
  --secondary: #8B5CF6;

  /* Bordures */
  --border:       #ddd8d0;
  --border-hover: #ccc5bb;
}

/* --- Espacement (base 4px) --- */
:root {
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-8:  48px;
  --sp-10: 64px;
  --sp-12: 80px;
  --sp-16: 128px;
}

/* --- Transitions --- */
:root {
  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow:   500ms ease;
}

/* --- Border radius --- */
:root {
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;
}

/* --- Typographie — familles --- */
:root {
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-code:    'JetBrains Mono', monospace;
}


/* =============================================================================
   RESET
   ============================================================================= */

/* Box-sizing universel */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:  0;
  padding: 0;
}

/* Scroll fluide */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Corps de base */
body {
  background-color: var(--bg-base);
  color:            var(--text-primary);
  font-family:      var(--font-body);
  font-size:        1.125rem;   /* 18px */
  font-weight:      400;
  line-height:      1.7;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Images */
img,
svg,
video {
  max-width: 100%;
  display:   block;
}

/* Liens */
a {
  color:           var(--accent);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

a:hover {
  color: var(--accent-hover);
}

/* Listes sans style par défaut */
ul,
ol {
  list-style: none;
}

/* Boutons — reset navigateur */
button {
  cursor:     pointer;
  border:     none;
  background: transparent;
  font:       inherit;
}

/* Inputs — reset navigateur */
input,
textarea,
select {
  font: inherit;
}

/* Tableaux */
table {
  border-collapse: collapse;
  width: 100%;
}


/* =============================================================================
   TYPOGRAPHIE — Échelle
   ============================================================================= */

/* Preconnect déclaré dans le HTML, mais on s'assure que les familles sont bien
   assignées via les variables tokens. */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color:       var(--text-primary);
  line-height: 1.2;
}

h1 {
  font-size:   2.5rem;    /* 40px */
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-size:   1.75rem;   /* 28px */
  font-weight: 600;
  line-height: 1.25;
}

h3 {
  font-size:   1.25rem;   /* 20px */
  font-weight: 600;
  line-height: 1.3;
}

/* Body — déjà défini sur body, rappel explicite */
p {
  font-size:   1.125rem;  /* 18px */
  font-weight: 400;
  line-height: 1.7;
}

/* Texte small / méta */
small,
.text-small {
  font-size:   0.875rem;  /* 14px */
  font-weight: 400;
  line-height: 1.5;
}

/* Overline / badge */
.text-overline {
  font-family:    var(--font-display);
  font-size:      0.75rem;   /* 12px */
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Code inline */
code,
kbd,
samp {
  font-family: var(--font-code);
  font-size:   0.9rem;    /* ~14.4px */
  line-height: 1.6;
}

/* Bloc de code */
pre {
  font-family: var(--font-code);
  font-size:   0.9rem;
  line-height: 1.6;
  overflow-x:  auto;
}

pre code {
  font-size: inherit;
}


/* =============================================================================
   UTILITIES
   ============================================================================= */

/* --- Couleurs texte --- */
.text-accent {
  color: var(--accent);
}

.text-secondary {
  color: var(--secondary);
}

.text-muted {
  color: var(--text-muted);
}

/* --- Accessibilité : masquage visuel (screen reader only) --- */
.visually-hidden {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}

/* --- Troncature sur une ligne --- */
.truncate {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* --- Line clamp multi-lignes --- */
.line-clamp-2 {
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

.line-clamp-3 {
  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

/* --- Ancres : compensation header sticky --- */
[id] {
  scroll-margin-top: 80px;
}