:root {
  /* ═══════════════════════════════════════
     LIGHT THEME – Blue Slate
     Palette sources : sky/slate/white
     ═══════════════════════════════════════ */

  /* — Core surfaces — */
  --bg: #daeaf5;
  --panel: #f5f7fa;
  --panel-strong: #ffffff;

  /* — Typography — */
  --ink: #1e293b;
  --muted: #2f60a5;

  /* — Borders — */
  --border: #bdd8ec;
  --border-strong: #8dc2e0;

  /* — Accent — */
  --accent: #0ea5e9;
  --accent-strong: #0369a1;
  --accent-soft: rgba(14, 165, 233, 0.10);

  /* — Semantic states — */
  --success-soft: #f0fdf4;
  --danger-soft: #fef2f2;

  /* — Shadows — */
  --shadow-soft: 0 10px 24px rgba(30, 41, 59, 0.08);
  --focus-ring: 0 0 0 2.5px rgba(14, 165, 233, 0.40);

  /* ═══ RGB tokens (for Tailwind / alpha helpers) ═══ */
  --primary-rgb: 14 165 233;
  --primary-400-rgb: 56 189 248;
  --accent-rgb: 14 165 233;
  --accent-strong-rgb: 3 105 161;
  --tag-ecaa-rgb: 126 150 96;
  --tag-rpls-rgb: 200 152 106;
  --state-success-rgb: 22 163 74;
  --state-warning-rgb: 234 179 8;
  --state-danger-rgb: 239 68 68;
  --state-error-rgb: 220 38 38;
  --state-unsaved-rgb: 225 29 72;
  --state-danger-strong-rgb: 185 28 28;
  --state-success-soft-rgb: 240 253 244;
  --state-danger-soft-rgb: 254 242 242;
  --surface-bg-rgb: 218 234 245;
  --surface-panel-rgb: 245 247 250;
  --surface-panel-strong-rgb: 255 255 255;
  --surface-dark-bg-rgb: 15 23 42;
  --surface-dark-panel-rgb: 30 41 59;
  --surface-dark-panel-strong-rgb: 51 65 85;
  --primary: rgb(var(--primary-rgb));

  /* ═══ Gradients & brand ═══ */
  --gradient-shell-bg:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,0.7) 0%, transparent 42%),
    radial-gradient(circle at 80% 0%, rgba(255,255,255,0.5) 0%, transparent 40%),
    linear-gradient(180deg, #daeaf5 0%, #edf4fa 46%, #c5dfef 100%);
  --gradient-brand-mark: linear-gradient(135deg, #f0f9ff, #7dd3fc);
  --brand-mark-border: #7dd3fc;
  --brand-mark-ink: #0369a1;

  /* ═══ Alerts ═══ */
  --alert-danger-border: #fca5a5;
  --alert-danger-bg: #fef2f2;
  --alert-danger-border-strong: #f87171;
  --alert-danger-ink-soft: #fca5a5;
  --state-cancelled: #ea580c;
  --state-danger: #dc2626;
  --state-success: #16a34a;
  --state-unsaved: #e11d48;
  --state-error: #dc2626;
  --state-error-bg: #fef2f2;
  --state-error-border: #fecaca;
  --state-danger-muted: #ef4444;

  /* ═══ Shadows (depth hierarchy) ═══ */
  --shadow-popover-deep: 0 16px 26px rgba(15, 23, 42, 0.22);
  --shadow-popover: 0 10px 24px rgba(15, 23, 42, 0.10);
  --shadow-elevated: 0 8px 18px rgba(15, 23, 42, 0.08);
  --shadow-dialog: 0 24px 60px rgba(15, 23, 42, 0.18);
  --shadow-nav-menu: 0 12px 28px rgba(15, 23, 42, 0.10);
  --shadow-paper: 0 12px 30px rgba(0, 0, 0, 0.10);

  /* ═══ Glass / surfaces ═══ */
  --surface-glass-strong: rgba(255, 255, 255, 0.88);
  --surface-glass-border: rgba(141, 194, 224, 0.45);
  --surface-glass-border-strong: rgba(14, 165, 233, 0.30);
  --surface-chip: rgba(241, 245, 249, 0.92);
  --surface-overlay: rgba(15, 23, 42, 0.45);
  --surface-overlay-subtle: rgba(15, 23, 42, 0.04);
  --surface-overlay-soft: rgba(218, 234, 245, 0.72);

  /* ═══ Accent opacity scale ═══ */
  --accent-08: rgba(14, 165, 233, 0.08);
  --accent-12: rgba(14, 165, 233, 0.12);
  --accent-15: rgba(14, 165, 233, 0.15);
  --accent-16: rgba(14, 165, 233, 0.16);
  --accent-22: rgba(14, 165, 233, 0.22);
  --accent-28: rgba(14, 165, 233, 0.28);
  --accent-45: rgba(14, 165, 233, 0.45);
  --accent-50: rgba(14, 165, 233, 0.50);
  --accent-55: rgba(14, 165, 233, 0.55);

  /* ═══ Neutral opacity scale ═══ */
  --neutral-18: rgba(71, 85, 105, 0.18);
  --neutral-35: rgba(71, 85, 105, 0.35);
  --info-hover: rgba(14, 165, 233, 0.12);
  --focus-ring-alt: rgba(56, 189, 248, 0.35);

  /* ═══ Specific UI tokens ═══ */
  --general-search-bg: #0ea5e9;
  --toggle-knob: #ffffff;
  --preview-table-head: #f1f5f9;
  --paper-white: #ffffff;
  --home-service-eyebrow: #0369a1;
  --observatoire-title: #0369a1;
  --observatoire-active: #075985;
  --observatoire-graph-end: #e0f2fe;

  --chart-1: #0ea5e9;
  --chart-2: #f59e0b;
  --chart-3: #10b981;
  --chart-4: #f43f5e;

  --score-high: #16a34a;
  --score-medium: #ea580c;
  --score-low: #64748b;
  --score-bg: rgba(30, 41, 59, 0.05);
  --epci-badge-bg: rgba(14, 165, 233, 0.12);
  --epci-badge-ink: #075985;

  /* ═══ Webix / widget tokens ═══ */
  --wx-background-alt-token: #f8fafc;
  --wx-font-disabled-token: #94a3b8;
  --wx-icon-token: #64748b;
  --wx-secondary-token: #f8fafc;
  --wx-secondary-hover-token: #f0f9ff;
  --wx-popup-shadow-token: 0 12px 24px rgba(15, 23, 42, 0.10);
  --wx-shadow-light-token: 0 10px 20px rgba(15, 23, 42, 0.07);
  --wx-input-bg-token: #ffffff;
  --wx-input-disabled-bg-token: #f1f5f9;

  /* ═══ Tailwind color families ═══ */
  --twc-slate-50: 248 250 252;
  --twc-slate-100: 241 245 249;
  --twc-slate-200: 226 232 240;
  --twc-slate-300: 203 213 225;
  --twc-slate-400: 148 163 184;
  --twc-slate-500: 100 116 139;
  --twc-slate-600: 71 85 105;
  --twc-slate-700: 51 65 85;
  --twc-slate-800: 30 41 59;
  --twc-slate-900: 15 23 42;
  --twc-slate-950: 2 6 23;

  /* — Red (standard Tailwind) — */
  --twc-red-50: 254 242 242;
  --twc-red-200: 254 202 202;
  --twc-red-300: 252 165 165;
  --twc-red-400: 248 113 113;
  --twc-red-500: 239 68 68;
  --twc-red-600: 220 38 38;
  --twc-red-700: 185 28 28;
  --twc-red-800: 153 27 27;
  --twc-red-950: 69 10 10;

  /* — Sky (standard Tailwind) — */
  --twc-sky-50: 240 249 255;
  --twc-sky-200: 186 230 253;
  --twc-sky-300: 125 211 252;
  --twc-sky-700: 3 105 161;
  --twc-sky-800: 7 89 133;
  --twc-sky-950: 8 47 73;

  /* — Emerald (standard Tailwind) — */
  --twc-emerald-50: 236 253 245;
  --twc-emerald-100: 209 250 229;
  --twc-emerald-200: 167 243 208;
  --twc-emerald-300: 110 231 183;
  --twc-emerald-400: 52 211 153;
  --twc-emerald-500: 16 185 129;
  --twc-emerald-600: 5 150 105;
  --twc-emerald-700: 4 120 87;
  --twc-emerald-800: 6 95 70;
  --twc-emerald-900: 6 78 59;
  --twc-emerald-950: 2 44 34;

  /* — Amber (standard Tailwind) — */
  --twc-amber-100: 254 243 199;
  --twc-amber-200: 253 230 138;
  --twc-amber-300: 252 211 77;
  --twc-amber-500: 245 158 11;
  --twc-amber-700: 180 83 9;
  --twc-amber-800: 146 64 14;
  --twc-amber-900: 120 53 15;

  /* — Rose (standard Tailwind) — */
  --twc-rose-50: 255 241 242;
  --twc-rose-100: 255 228 230;
  --twc-rose-300: 253 164 175;
  --twc-rose-400: 251 113 133;
  --twc-rose-600: 225 29 72;
  --twc-rose-700: 190 18 60;
  --twc-rose-800: 159 18 57;
  --twc-rose-900: 136 19 55;
  --twc-rose-950: 76 5 25;

  /* — Green (standard Tailwind) — */
  --twc-green-400: 74 222 128;
  --twc-green-600: 22 163 74;
}


/* ═══════════════════════════════════════════
   DARK THEME – Slate Profond
   Sources : slate-950 · slate-900 · slate-800 · slate-50 · sky-400
   ═══════════════════════════════════════════ */
:root[data-app-theme="dark"] {

  /* — Core surfaces (3-tier depth) — */
  --bg: #020617;
  --panel: #0f172a;
  --panel-strong: #1e293b;

  /* — Typography — */
  --ink: #f8fafc;
  --muted: #94a3b8;

  /* — Borders — */
  --border: #293548;
  --border-strong: #334155;

  /* — Accent — */
  --accent: #38bdf8;
  --accent-strong: #7dd3fc;
  --accent-soft: rgba(56, 189, 248, 0.14);

  /* — Semantic states — */
  --success-soft: rgba(34, 197, 94, 0.12);
  --danger-soft: rgba(239, 68, 68, 0.12);
  --focus-ring: 0 0 0 2.5px rgba(56, 189, 248, 0.45);

  /* — RGB tokens — */
  --primary-rgb: 56 189 248;
  --primary-400-rgb: 125 211 252;
  --accent-rgb: 56 189 248;
  --accent-strong-rgb: 125 211 252;
  --tag-ecaa-rgb: 142 170 110;
  --tag-rpls-rgb: 210 168 120;
  --state-success-rgb: 74 222 128;
  --state-warning-rgb: 250 204 21;
  --state-danger-rgb: 248 113 113;
  --state-error-rgb: 248 113 113;
  --state-unsaved-rgb: 251 113 133;
  --state-danger-strong-rgb: 239 68 68;
  --state-success-soft-rgb: 34 197 94;
  --state-danger-soft-rgb: 239 68 68;
  --surface-bg-rgb: 2 6 23;
  --surface-panel-rgb: 15 23 42;
  --surface-panel-strong-rgb: 30 41 59;
  --surface-dark-bg-rgb: 2 6 23;
  --surface-dark-panel-rgb: 15 23 42;
  --surface-dark-panel-strong-rgb: 30 41 59;
  --primary: rgb(var(--primary-rgb));

  /* — Gradients & brand — */
  --gradient-shell-bg:
    radial-gradient(circle at 20% 20%, rgba(30, 41, 59, 0.6) 0%, transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(56, 189, 248, 0.06) 0%, transparent 36%),
    linear-gradient(180deg, #020617 0%, #0b1120 62%, #0f172a 100%);
  --gradient-brand-mark: linear-gradient(135deg, #1e293b, #38bdf8);
  --brand-mark-border: #334155;
  --brand-mark-ink: #f8fafc;

  /* — Alerts — */
  --alert-danger-border: rgba(248, 113, 113, 0.4);
  --alert-danger-bg: rgba(239, 68, 68, 0.08);
  --alert-danger-border-strong: #f87171;
  --alert-danger-ink-soft: #fca5a5;
  --state-cancelled: #fb923c;
  --state-danger: #ef4444;
  --state-success: #4ade80;
  --state-unsaved: #fb7185;
  --state-error: #f87171;
  --state-error-bg: rgba(239, 68, 68, 0.08);
  --state-error-border: rgba(248, 113, 113, 0.3);
  --state-danger-muted: rgba(248, 113, 113, 0.7);

  /* — Shadows (plus prononcées en sombre) — */
  --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.35);
  --shadow-popover-deep: 0 16px 26px rgba(0, 0, 0, 0.55);
  --shadow-popover: 0 10px 24px rgba(0, 0, 0, 0.40);
  --shadow-elevated: 0 8px 18px rgba(0, 0, 0, 0.35);
  --shadow-dialog: 0 24px 60px rgba(0, 0, 0, 0.50);
  --shadow-nav-menu: 0 12px 28px rgba(0, 0, 0, 0.40);
  --shadow-paper: 0 12px 30px rgba(0, 0, 0, 0.45);

  /* — Glass / surfaces — */
  --surface-glass-strong: rgba(15, 23, 42, 0.92);
  --surface-glass-border: rgba(51, 65, 85, 0.40);
  --surface-glass-border-strong: rgba(56, 189, 248, 0.35);
  --surface-chip: rgba(30, 41, 59, 0.80);
  --surface-overlay: rgba(0, 0, 0, 0.55);
  --surface-overlay-subtle: rgba(0, 0, 0, 0.12);
  --surface-overlay-soft: rgba(2, 6, 23, 0.75);

  /* — Accent opacity scale — */
  --accent-08: rgba(56, 189, 248, 0.08);
  --accent-12: rgba(56, 189, 248, 0.12);
  --accent-15: rgba(56, 189, 248, 0.15);
  --accent-16: rgba(56, 189, 248, 0.16);
  --accent-22: rgba(56, 189, 248, 0.22);
  --accent-28: rgba(56, 189, 248, 0.28);
  --accent-45: rgba(56, 189, 248, 0.45);
  --accent-50: rgba(56, 189, 248, 0.50);
  --accent-55: rgba(56, 189, 248, 0.55);

  /* — Neutral opacity scale — */
  --neutral-18: rgba(148, 163, 184, 0.18);
  --neutral-35: rgba(148, 163, 184, 0.35);
  --info-hover: rgba(56, 189, 248, 0.14);
  --focus-ring-alt: rgba(125, 211, 252, 0.35);

  /* — Specific UI tokens — */
  --general-search-bg: #1e293b;
  --toggle-knob: #f8fafc;
  --preview-table-head: #1e293b;
  --paper-white: #0f172a;
  --home-service-eyebrow: #38bdf8;
  --observatoire-title: #38bdf8;
  --observatoire-active: #7dd3fc;
  --observatoire-graph-end: #1e293b;

  --score-high: #4ade80;
  --score-medium: #fb923c;
  --score-low: #94a3b8;
  --score-bg: rgba(255, 255, 255, 0.06);
  --epci-badge-bg: rgba(56, 189, 248, 0.16);
  --epci-badge-ink: #7dd3fc;

  /* — Webix / widget tokens — */
  --wx-background-alt-token: #0f172a;
  --wx-font-disabled-token: #475569;
  --wx-icon-token: #64748b;
  --wx-secondary-token: #2d3f55;
  --wx-secondary-hover-token: #293548;
  --wx-popup-shadow-token: 0 12px 24px rgba(0, 0, 0, 0.45);
  --wx-shadow-light-token: 0 10px 20px rgba(0, 0, 0, 0.35);
  --wx-input-bg-token: #0f172a;
  --wx-input-disabled-bg-token: #0b1120;

  /* — Tailwind slate (échelle standard Tailwind) — */
  --twc-slate-50: 248 250 252;
  --twc-slate-100: 241 245 249;
  --twc-slate-200: 226 232 240;
  --twc-slate-300: 203 213 225;
  --twc-slate-400: 148 163 184;
  --twc-slate-500: 100 116 139;
  --twc-slate-600: 71 85 105;
  --twc-slate-700: 51 65 85;
  --twc-slate-800: 30 41 59;
  --twc-slate-900: 15 23 42;
  --twc-slate-950: 2 6 23;
}