/* Jake ERP — Conçu et développé par Jonathan Cyr-Morin avec assistance IA — Tous droits réservés © 2025-2026 */
/* =============================================================================
   VARIABLES.CSS — Design Tokens Jake (partagé)
   =============================================================================
   Toutes les variables CSS du design system Jake.
   Importé par tous les modules frontend (launcher, wiki, catalogue, etc.)

   Organisation :
   - Thème foncé (défaut) — glassmorphism
   - Thème clair — glassmorphism
   - Alias de compatibilité
   - Typographie, rayons, reset global
   ============================================================================= */

/* ═══ THÈME FONCÉ (défaut) ═══ */
[data-theme="dark"],
:root {
  /* --- Backgrounds & Surfaces (solide, opaque) --- */
  --bg: #0f1218;
  --bg-flat: #0f1218;
  --glass: #1a1f2e;
  --glass-hover: #222838;
  --glass-active: #2a3142;
  --glass-border: #2a3142;
  --glass-border-strong: #3d4a63;

  /* --- Texte --- */
  --text: #e4e8f0;
  --text-secondary: #9ca3b4;
  --text-tertiary: #5f6880;

  /* --- Accent (bleu sobre) --- */
  --accent: #4a6fa5;
  --accent-hover: #3d5d8a;
  --accent-soft: rgba(74,111,165,0.12);

  /* --- Couleurs sémantiques --- */
  --green: #4ade80;
  --green-soft: rgba(74,222,128,0.12);
  --yellow: #fbbf24;
  --yellow-soft: rgba(251,191,36,0.12);
  --red: #fca5a5;
  --red-soft: rgba(252,165,165,0.12);
  --blue: #7dd3fc;
  --blue-soft: rgba(125,211,252,0.12);
  --purple: #a78bfa;
  --purple-soft: rgba(167,139,250,0.12);
  --cyan: #22d3ee;
  --cyan-soft: rgba(34,211,238,0.12);
  --orange: #fbbf24;
  --orange-soft: rgba(251,191,36,0.12);

  /* --- Effets (pas de blur, solide) --- */
  --blur: blur(0px);
  --shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.4);
  --dropdown-shadow: 0 4px 16px rgba(0,0,0,0.5);
  --backdrop: rgba(0, 0, 0, 0.7);

  /* --- Toggle thème --- */
  --toggle-bg: #2a3142;
  --toggle-active: #3d4a63;
  --toggle-knob: #e4e8f0;

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

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

  /* --- Alias de compatibilité (transition) --- */
  --surface: var(--glass);
  --surface-raised: var(--glass-hover);
  --border: var(--glass-border);
  --border-hover: var(--glass-border-strong);
  --text-muted: var(--text-secondary);
  --text-dim: var(--text-tertiary);
  --accent-hover: #3d5d8a;
}

/* ═══ THÈME CLAIR — style solide (inspiré Smartsheet) ═══ */
[data-theme="light"] {
  /* --- Backgrounds & Surfaces (opaques, zéro transparence) --- */
  --bg: #f0f2f5;
  --bg-flat: #f0f2f5;
  --glass: #ffffff;
  --glass-hover: #f7f8fa;
  --glass-active: #eef0f4;
  --glass-border: #d1d5db;
  --glass-border-strong: #9ca3af;

  /* --- Texte --- */
  --text: #111827;
  --text-secondary: #374151;
  --text-tertiary: #6b7280;

  /* --- Accent (bleu sobre) --- */
  --accent: #3d5d8a;
  --accent-hover: #2e4a6e;
  --accent-soft: rgba(61,93,138,0.08);

  /* --- Couleurs sémantiques (vives, pas pastel) --- */
  /* Note 2026-05-12 : variantes -soft à 18% en mode clair (vs 12% en dark).
     Sur fond blanc/clair, 12% est imperceptible ; 18% donne le poids visuel
     nécessaire pour qu'un pill statut/badge ressorte clairement du fond card. */
  --green: #16a34a;
  --green-soft: rgba(22,163,74,0.18);
  --yellow: #ca8a04;
  --yellow-soft: rgba(202,138,4,0.18);
  --red: #dc2626;
  --red-soft: rgba(220,38,38,0.18);
  --blue: #2563eb;
  --blue-soft: rgba(37,99,235,0.18);
  --purple: #7c3aed;
  --purple-soft: rgba(124,58,237,0.18);
  --cyan: #0891b2;
  --cyan-soft: rgba(8,145,178,0.18);
  --orange: #ea580c;
  --orange-soft: rgba(234,88,12,0.18);

  /* --- Effets (pas de blur en mode solide) --- */
  --blur: blur(0px);
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
  --dropdown-shadow: 0 4px 16px rgba(0,0,0,0.12);
  --backdrop: rgba(17, 24, 39, 0.55);

  /* --- Toggle thème --- */
  --toggle-bg: #d1d5db;
  --toggle-active: #9ca3af;
  --toggle-knob: #111827;
}

/* --- 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;
}

/* Cacher les spinners (flèches) sur tous les inputs number */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}