/* =============================================================================
   VARIABLES.CSS — Design Tokens Cistec (partagé)
   =============================================================================
   Toutes les variables CSS du design system Cistec.
   Importé par tous les modules frontend (launcher, wiki, catalogue, etc.)

   Organisation :
   - Couleurs de base (backgrounds, surfaces, borders)
   - Couleurs de texte
   - Couleurs d'accent et sémantiques
   - Typographie
   - Rayons de bordure, ombres
   - Reset global
   ============================================================================= */

:root {
  /* --- Backgrounds & Surfaces --- */
  --bg: #0c0f14;
  --surface: #151921;
  --surface-raised: #1c2230;
  --border: #2a3142;
  --border-hover: #3d4a63;

  /* --- Texte --- */
  --text: #e4e8f0;
  --text-muted: #8892a6;
  --text-dim: #5a6478;

  /* --- Accent (orange Cistec) --- */
  --accent: #ff6b2b;
  --accent-soft: rgba(255, 107, 43, 0.12);
  --accent-hover: #ff8a54;

  /* --- Couleurs sémantiques --- */
  --green: #34d399;
  --green-soft: rgba(52, 211, 153, 0.12);
  --yellow: #fbbf24;
  --yellow-soft: rgba(251, 191, 36, 0.12);
  --red: #f87171;
  --red-soft: rgba(248, 113, 113, 0.12);
  --blue: #60a5fa;
  --blue-soft: rgba(96, 165, 250, 0.12);
  --purple: #a78bfa;
  --purple-soft: rgba(167, 139, 250, 0.12);
  --cyan: #22d3ee;
  --cyan-soft: rgba(34, 211, 238, 0.12);

  /* --- Rayons de bordure --- */
  --radius: 8px;
  --radius-lg: 12px;

  /* --- Typographie --- */
  --font: 'DM Sans', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  /* --- Ombres --- */
  --shadow: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
}

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

html, body {
  height: 100dvh;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}