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

:root {
  /* Palette de base — slate (gris bleutés neutres, harmonisés avec l'accent) */
  --green: #2d6aad;          /* accent renforcé pour AA sur blanc (~5.6:1) */
  --green-dark: #1e4d80;
  --green-light: #e0ecf8;
  --green-mid: #a9c8e8;
  --red: #e23b3b;
  --white: #ffffff;
  --gray-50:  #f1f5f9;       /* slate-100 */
  --gray-100: #e2e8f0;       /* slate-200 */
  --gray-200: #b0bdcc;       /* bordures — entre slate-300 et slate-400 pour du corps */
  --gray-300: #94a3b8;       /* slate-400 */
  --gray-400: #64748b;       /* slate-500 — text-dim, 4.83:1 sur blanc ✓ */
  --gray-600: #334155;       /* slate-700 */
  --gray-700: #1e293b;       /* slate-800 — text, 12.6:1 sur blanc ✓ */
  --gray-900: #0f172a;       /* slate-900 — text-strong */

  /* Layout */
  --sidebar-w: 240px;
  --radius: 10px;
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.10), 0 1px 2px rgba(15,23,42,0.06);
  --shadow-md: 0 4px 16px rgba(15,23,42,0.10);
  --shadow-lg: 0 12px 36px rgba(15,23,42,0.15);

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

  /* Tokens semantiques — mode clair */
  --bg-body:    #eef2f7;     /* fond plus contrasté que les cartes */
  --bg-sidebar: var(--white);
  --bg-card:    var(--white);
  --bg-input:   #f1f5f9;
  --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:    #f1f5fb;
  --row-even:   #e2ebf6;
  --row-hover:  #cfdef0;
  --row-sep:    #b8c8d8;
  --thead-bg:   #cfdce8;
  --thead-color: #1e3a5f;
}

/* ── DARK MODE ── */
html.dark {
  --bg-body:    #0a0f1a;
  --bg-sidebar: #0d1525;
  --bg-card:    #111c2e;
  --bg-input:   #0a0f1a;
  --border:     rgba(74,143,212,0.30);
  --text:       #b8cfe8;
  --text-dim:   #5a7aaa;
  --text-strong: #e8f0f9;
  --divider:    rgba(74,143,212,0.24);
  --gray-50:    #0a0f1a;
  --gray-100:   #111c2e;
  --gray-200:   rgba(74,143,212,0.30);
  --gray-300:   rgba(74,143,212,0.40);
  --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;
}