/* Groupe TSH brand tokens. Status colors retain their semantic meaning. */
:root,
.light {
  --brand-accent: #d82291;
  --brand-50: #f7f3fc;
  --brand-100: #efe7f8;
  --brand-200: #dfcff0;
  --brand-300: #c1a4e1;
  --brand-400: #9a74ce;
  --brand-500: #6943b7;
  --brand-600: #543394;
  --brand-700: #482c80;
  --brand-800: #36205f;
  --brand-900: #25163f;
  --brand-soft: #f0e9f9;
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-muted: #f6f1fb;
  --surface-hover: #f0e9f9;
  --border: #eae7ef;
  --border-strong: #c1b6d0;
  --text: #24202c;
  --text-muted: #655e70;
  --text-subtle: #797581;
  --shell: #ffffff;
  --shell-raised: #f6f1fb;
  --shell-hover: #f0e9f9;
  --shell-border: #eae7ef;
  --shell-text: #24202c;
  --shell-muted: #797581;
  --success: #15803d;
  --success-soft: #dcfce7;
  --warning: #b45309;
  --warning-soft: #fef3c7;
  --danger: #be123c;
  --danger-soft: #ffe4e6;
  --radius: 0.625rem;
  color-scheme: light;
}
.dark {
  color-scheme: dark;
  --canvas: #15111c;
  --surface: #201a2a;
  --surface-muted: #282032;
  --surface-hover: #342940;
  --border: #3b3049;
  --border-strong: #635173;
  --text: #f8f5fc;
  --text-muted: #d8cde5;
  --text-subtle: #b3a4c4;
  --shell: #1b1524;
  --shell-raised: #282032;
  --shell-hover: #342940;
  --shell-border: #3b3049;
  --shell-text: #f8f5fc;
  --shell-muted: #b3a4c4;
  --brand-soft: color-mix(in oklab, var(--brand-400) 16%, var(--surface));
  --success: #4ade80;
  --success-soft: color-mix(in oklab, #4ade80 14%, var(--surface));
  --warning: #fbbf24;
  --warning-soft: color-mix(in oklab, #fbbf24 14%, var(--surface));
  --danger: #fb7185;
  --danger-soft: color-mix(in oklab, #fb7185 14%, var(--surface));
}
html, body, #app { height: 100%; margin: 0; }
body {
  background: var(--canvas);
  color: var(--text);
  font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.scrollbar-slim { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.scrollbar-slim::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollbar-slim::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
.animate-in-fade { animation: ce-fade 160ms ease-out; }
.ce-slide-over { animation: ce-slide-over 220ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes ce-fade { from { opacity: 0; } }
@keyframes ce-slide-over {
  from { opacity: 0.7; transform: translate3d(16px, 0, 0); }
  to { opacity: 1; transform: none; }
}
html[dir="rtl"] .ce-slide-over { animation-name: ce-slide-over-rtl; }
@keyframes ce-slide-over-rtl {
  from { opacity: 0.7; transform: translate3d(-16px, 0, 0); }
  to { opacity: 1; transform: none; }
}
.auth-stage {
  background:
    radial-gradient(circle at 16% 0%, color-mix(in oklab, #d82291 28%, transparent), transparent 52%),
    linear-gradient(155deg, var(--brand-700) 0%, var(--brand-500) 42%, var(--brand-900) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .ce-slide-over { animation: none; }
}