/* ══════════════════════════════════════════════════
   theme.css — Variables CSS partagees (light + dark)
   Inclus par le shell ET par chaque module (iframe)
   ══════════════════════════════════════════════════ */

:root {
  /* Palette de base */
  --green: #4a8fd4;
  --green-dark: #2d6aad;
  --green-light: #e8f0f9;
  --green-mid: #b8d4f0;
  --red: #ff5252;
  --white: #ffffff;
  --gray-50: #f8fafb;
  --gray-100: #f0f4f2;
  --gray-200: #dde6e1;
  --gray-300: #b8ccc3;
  --gray-400: #8aa898;
  --gray-600: #4a6558;
  --gray-700: #2d4037;
  --gray-900: #111f18;

  /* Layout */
  --sidebar-w: 240px;
  --radius: 10px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);

  /* Typo */
  --font: 'DM Sans', sans-serif;
  --mono: 'DM Mono', monospace;

  /* Tokens semantiques — mode clair */
  --bg-body:    var(--gray-50);
  --bg-sidebar: var(--white);
  --bg-card:    var(--white);
  --bg-input:   var(--gray-50);
  --border:     var(--gray-200);
  --text:       var(--gray-700);
  --text-dim:   var(--gray-400);
  --text-strong: var(--gray-900);
  --divider:    var(--gray-200);

  /* Table */
  --row-odd:    #f4f8fc;
  --row-even:   #e8f0f8;
  --row-hover:  #dceaf6;
  --row-sep:    #cddaea;
  --thead-bg:   #dde6ee;
  --thead-color: #4a6a88;
}

/* ── DARK MODE ── */
html.dark {
  --bg-body:    #0a0f1a;
  --bg-sidebar: #0d1525;
  --bg-card:    #111c2e;
  --bg-input:   #0a0f1a;
  --border:     rgba(74,143,212,0.15);
  --text:       #b8cfe8;
  --text-dim:   #5a7aaa;
  --text-strong: #e8f0f9;
  --divider:    rgba(74,143,212,0.12);
  --gray-50:    #0a0f1a;
  --gray-100:   #111c2e;
  --gray-200:   rgba(74,143,212,0.15);
  --gray-300:   rgba(74,143,212,0.25);
  --gray-400:   #5a7aaa;
  --gray-600:   #7a9ac0;
  --gray-700:   #b8cfe8;
  --gray-900:   #e8f0f9;
  --white:      #111c2e;
  --green-light: rgba(74,143,212,0.1);
  --green-mid:  rgba(74,143,212,0.2);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 30px rgba(0,0,0,0.6);

  /* Table dark */
  --row-odd:    #081018;
  --row-even:   #0b1628;
  --row-hover:  rgba(74,143,212,0.18);
  --row-sep:    rgba(74,143,212,0.14);
  --thead-bg:   #0a0f1a;
  --thead-color: #4a8fd4;
}