/* Thème Skolami : couleurs de l'interface en clair et en sombre (classe « dark » sur <html>, voir utils/theme.js).
   En sombre, la palette grise de Tailwind est inversée (variables --color-gray-*) : les écrans écrits en
   classes Tailwind (bg-gray-50, text-gray-800, border-gray-200…) passent en sombre sans classes dark:. */

:root
{
    --sk-brand: #3b5998;
    --sk-page: #f9fafb;
    --sk-card: #ffffff;

    /* Barre latérale (style Claude) */
    --sk-sb-bg: #f5f4f0;
    --sk-sb-border: #e6e4dd;
    --sk-sb-text: #3d3d3a;
    --sk-sb-muted: #73726c;
    --sk-sb-hover: rgba(31, 30, 29, .05);
    --sk-sb-active: rgba(31, 30, 29, .08);
    --sk-sb-active-text: #141413;
    --sk-field-bg: #ffffff;
    --sk-field-border: #dedcd4;
    --sk-field-border-hover: #c9c6bb;
    --sk-kbd-bg: #f5f4f0;
    --sk-popover-bg: #ffffff;
    --sk-popover-border: #e6e4dd;
    --sk-popover-shadow: 0 10px 30px -8px rgba(31, 30, 29, .18), 0 2px 6px rgba(31, 30, 29, .06);
    --sk-tip-bg: #1f1e1d;
    --sk-tip-text: #faf9f5;

    /* Fenêtres (ModalElement : utils/confirm.js) et notifications (ToastElement : utils/toast.js) */
    --sk-brand-solid: #3b5998;
    --sk-modal-overlay: rgba(20, 20, 19, .3);
    --sk-modal-bg: rgba(255, 255, 255, .92);
    --sk-modal-title: #3b5998;
    --sk-modal-text: #374151;
    --sk-toast-bg: linear-gradient(135deg, #ffffff 0%, #f3f4f6 55%, #e5e7eb 100%);
    --sk-toast-border: #e5e7eb;
    --sk-toast-close: #6b7280;
}

html.dark
{
    color-scheme: dark;
    --sk-brand: #93acea;
    --sk-page: #262624;
    --sk-card: #30302e;

    --sk-sb-bg: #1f1e1d;
    --sk-sb-border: #34332f;
    --sk-sb-text: #c9c7bf;
    --sk-sb-muted: #9a988f;
    --sk-sb-hover: rgba(255, 255, 255, .05);
    --sk-sb-active: rgba(255, 255, 255, .09);
    --sk-sb-active-text: #faf9f5;
    --sk-field-bg: #262624;
    --sk-field-border: #3a3935;
    --sk-field-border-hover: #4a4945;
    --sk-kbd-bg: #2b2a27;
    --sk-popover-bg: #2a2927;
    --sk-popover-border: #3a3935;
    --sk-popover-shadow: 0 12px 32px -8px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .3);
    --sk-tip-bg: #faf9f5;
    --sk-tip-text: #1f1e1d;

    --sk-brand-solid: #4a6bc0;
    --sk-modal-overlay: rgba(0, 0, 0, .55);
    --sk-modal-bg: rgba(42, 41, 39, .94);
    --sk-modal-title: #93acea;
    --sk-modal-text: #d0cec5;
    --sk-toast-bg: linear-gradient(135deg, #34332f 0%, #2d2c29 55%, #262624 100%);
    --sk-toast-border: #44433e;
    --sk-toast-close: #9c9a92;

    /* Gris inversés (fonds, bordures, textes) */
    --color-gray-50:  #262624;  --color-slate-50:  #262624;
    --color-gray-100: #2d2c2a;  --color-slate-100: #2d2c2a;
    --color-gray-200: #3a3935;  --color-slate-200: #3a3935;
    --color-gray-300: #4a4945;  --color-slate-300: #4a4945;
    --color-gray-400: #75736c;  --color-slate-400: #75736c;
    --color-gray-500: #9c9a92;  --color-slate-500: #9c9a92;
    --color-gray-600: #b8b5ac;  --color-slate-600: #b8b5ac;
    --color-gray-700: #d0cec5;  --color-slate-700: #d0cec5;
    --color-gray-800: #e8e6dd;  --color-slate-800: #e8e6dd;
    --color-gray-900: #faf9f5;  --color-slate-900: #faf9f5;

    /* Teintes claires (pastilles, icônes) : transparentes sur fond sombre ; textes foncés : éclaircis */
    --color-amber-50:   rgb(245 158 11 / .14);  --color-amber-700:   #fcd34d;  --color-amber-200: rgb(245 158 11 / .3);  --color-amber-800: #fde68a;
    --color-sky-50:     rgb(14 165 233 / .14);  --color-sky-700:     #7dd3fc;  --color-sky-200:   rgb(14 165 233 / .3);
    --color-violet-50:  rgb(139 92 246 / .16);  --color-violet-700:  #c4b5fd;
    --color-emerald-50: rgb(16 185 129 / .14);  --color-emerald-700: #6ee7b7;  --color-emerald-200: rgb(16 185 129 / .3);  --color-emerald-800: #a7f3d0;
    --color-rose-50:    rgb(244 63 94 / .14);   --color-rose-700:    #fda4af;  --color-rose-200:  rgb(244 63 94 / .3);
    --color-pink-50:    rgb(236 72 153 / .16);  --color-pink-600:    #f9a8d4;
    --color-orange-50:  rgb(249 115 22 / .14);  --color-orange-700:  #fdba74;
    --color-teal-50:    rgb(20 184 166 / .14);  --color-teal-700:    #5eead4;
    --color-blue-50:    rgb(59 130 246 / .14);  --color-blue-700:    #93c5fd;
}

/* Cartes blanches (hors couche Tailwind : l'emporte sur bg-white) */
html.dark .bg-white { background-color: var(--sk-card); }
html.dark body { background-color: var(--sk-page); }

/* Étapes lx-steps-nav (mode onglets) : couleurs fixes du composant remplacées par celles du thème */
html.dark .lux-snav-tabs-header,
html.dark .lux-snav-tabs-body          { background: var(--sk-card); border-color: var(--sk-popover-border); }
html.dark .lux-snav-tabs-sidebar       { background: var(--sk-sb-bg); border-color: var(--sk-popover-border); }
html.dark .lux-snav-tabs-item          { border-color: var(--sk-popover-border); }
html.dark .lux-snav-tabs-item:hover    { background: var(--sk-sb-hover); }
html.dark .lux-snav-tabs-item.is-active { background: var(--sk-card); }
html.dark .lux-snav-tabs-hbtn          { background: var(--sk-kbd-bg); border-color: var(--sk-popover-border); color: var(--sk-sb-muted); }
html.dark .lux-snav-title              { color: var(--sk-sb-text); }
html.dark .lux-snav-subtitle,
html.dark .lux-snav-tabs-hsubtitle     { color: var(--sk-sb-muted); }

/* Traduction (utils/i18n.js) : textes du HTML masqués jusqu'à leur traduction quand la langue n'est pas le français */
.i18n-pending [data-i18n], .i18n-pending [data-i18n-html] { visibility: hidden; }