/* =============================================================
   SAB SAT RH — Design Tokens
   Sober, institutional, accessible (WCAG AA+)
   ============================================================= */

:root {
  /* ---------- Brand ---------- */
  --brand-50:  #eef3fb;
  --brand-100: #d6e0f0;
  --brand-200: #adc1e0;
  --brand-300: #7d9bcb;
  --brand-400: #4f74b1;
  --brand-500: #2d5594;
  --brand-600: #1f3f73;
  --brand-700: #14213d; /* primaire — bleu institutionnel */
  --brand-800: #0e1a33;
  --brand-900: #08122a;

  /* ---------- Slate (neutres froids) ---------- */
  --slate-0:   #ffffff;
  --slate-25:  #fafbfc;
  --slate-50:  #f5f7fa;
  --slate-100: #eef1f5;
  --slate-150: #e3e8ef;
  --slate-200: #d6dde6;
  --slate-300: #b7c0cc;
  --slate-400: #8b95a4;
  --slate-500: #5f6a7a;
  --slate-600: #46505f;
  --slate-700: #2f3845;
  --slate-800: #1e2530;
  --slate-900: #131822;
  --slate-950: #0a0e16;

  /* ---------- Statuts ---------- */
  --ok-50:    #ecf6ee;
  --ok-100:   #d2ebd7;
  --ok-500:   #2f8c4a;     /* présent / validé */
  --ok-600:   #226e39;
  --ok-700:   #1a5429;

  --warn-50:  #fbf2e3;
  --warn-100: #f5e1bc;
  --warn-500: #b87913;     /* retard / en attente */
  --warn-600: #93600d;
  --warn-700: #6f4708;

  --err-50:   #faeceb;
  --err-100:  #f2cfcc;
  --err-500:  #b8362c;     /* absent / refusé */
  --err-600:  #93281f;
  --err-700:  #6f1c16;

  --info-50:  #e8f0f9;
  --info-100: #c6d6ee;
  --info-500: #2563a6;     /* permission */
  --info-600: #1c4d83;

  /* ---------- Surfaces (mode clair par défaut) ---------- */
  --bg-app:        var(--slate-50);
  --bg-surface:    var(--slate-0);
  --bg-sunken:     var(--slate-100);
  --bg-hover:      var(--slate-100);
  --bg-active:     var(--slate-150);
  --bg-overlay:    rgba(19, 24, 34, 0.42);
  --bg-sidebar:    var(--brand-700);
  --bg-sidebar-hover: rgba(255,255,255,0.06);
  --bg-sidebar-active: rgba(255,255,255,0.10);

  /* ---------- Texte ---------- */
  --text-primary:    var(--slate-900);
  --text-secondary:  var(--slate-600);
  --text-tertiary:   var(--slate-500);
  --text-disabled:   var(--slate-400);
  --text-on-brand:   #ffffff;
  --text-on-sidebar: #d8e0ee;
  --text-on-sidebar-muted: #8fa0bf;
  --text-link:       var(--brand-600);

  /* ---------- Bordures ---------- */
  --border-subtle:  var(--slate-150);
  --border-default: var(--slate-200);
  --border-strong:  var(--slate-300);
  --border-focus:   var(--brand-500);

  /* ---------- Rayons ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-pill: 999px;

  /* ---------- Ombres (subtiles) ---------- */
  --shadow-xs: 0 1px 0 rgba(20, 33, 61, 0.04);
  --shadow-sm: 0 1px 2px rgba(20, 33, 61, 0.06), 0 1px 0 rgba(20, 33, 61, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(20, 33, 61, 0.08), 0 2px 4px rgba(20, 33, 61, 0.04);
  --shadow-lg: 0 12px 28px -8px rgba(20, 33, 61, 0.14), 0 4px 10px -2px rgba(20, 33, 61, 0.06);
  --shadow-focus: 0 0 0 3px rgba(45, 85, 148, 0.22);

  /* ---------- Espacements (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-7: 32px; --sp-8: 40px; --sp-9: 48px;
  --sp-10: 64px;

  /* ---------- Typographie ---------- */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs:   12px;   --lh-xs:   16px;
  --fs-sm:   13px;   --lh-sm:   18px;
  --fs-base: 14px;   --lh-base: 20px;
  --fs-md:   15px;   --lh-md:   22px;
  --fs-lg:   17px;   --lh-lg:   24px;
  --fs-xl:   20px;   --lh-xl:   28px;
  --fs-2xl:  24px;   --lh-2xl:  32px;
  --fs-3xl:  30px;   --lh-3xl:  38px;
  --fs-4xl:  36px;   --lh-4xl:  44px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* ---------- Layout ---------- */
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 64px;
  --header-h: 60px;
  --content-max: 1440px;

  /* ---------- Transitions ---------- */
  --tr-fast: 120ms cubic-bezier(.4,0,.2,1);
  --tr-base: 180ms cubic-bezier(.4,0,.2,1);
  --tr-slow: 280ms cubic-bezier(.4,0,.2,1);
}

/* =============================================================
   Dark mode
   ============================================================= */
[data-theme="dark"] {
  --bg-app:        var(--slate-950);
  --bg-surface:    #161c27;
  --bg-sunken:     #11161f;
  --bg-hover:      #1d2532;
  --bg-active:     #232c3b;
  --bg-overlay:    rgba(0,0,0,0.6);
  --bg-sidebar:    #0b1220;
  --bg-sidebar-hover:  rgba(255,255,255,0.05);
  --bg-sidebar-active: rgba(255,255,255,0.08);

  --text-primary:    #e6ecf5;
  --text-secondary:  #a3aebd;
  --text-tertiary:   #7e8a9b;
  --text-disabled:   #555f6e;
  --text-on-brand:   #ffffff;
  --text-on-sidebar: #c8d2e3;
  --text-on-sidebar-muted: #6e7c93;
  --text-link:       #79a4e3;

  --border-subtle:  #1f2733;
  --border-default: #29323f;
  --border-strong:  #3a4453;
  --border-focus:   #4f74b1;

  --shadow-xs: 0 1px 0 rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.55);
  --shadow-lg: 0 12px 28px -8px rgba(0,0,0,0.65);
  --shadow-focus: 0 0 0 3px rgba(79, 116, 177, 0.32);

  --ok-50:  #15281d;  --ok-100: #1d3a2a;
  --warn-50:#2b1f0c;  --warn-100:#3a2a10;
  --err-50: #2a1311;  --err-100:#3a1a17;
  --info-50:#0f1f33;  --info-100:#152b46;

  --ok-500: #5ab472;
  --warn-500: #d9962b;
  --err-500: #d96154;
  --info-500: #5b95d6;
}

/* Accent variations (Tweaks) */
[data-accent="amber"]  { --accent-500: var(--warn-500); --accent-50: var(--warn-50); }
[data-accent="green"]  { --accent-500: var(--ok-500);   --accent-50: var(--ok-50); }
[data-accent="teal"]   { --accent-500: #1f8c8c;          --accent-50: #e2f3f3; }