/* Design tokens — light/dark aware. Bootstrap 5.3's data-bs-theme handles
   component-level theming; these custom properties back our own layout. */
:root,
[data-bs-theme="light"] {
  --als-bg: #f4f6f9;
  --als-surface: #ffffff;
  --als-surface-2: #f8f9fb;
  --als-border: #e3e7ed;
  --als-text: #1c2536;
  --als-text-muted: #6b7688;
  --als-primary: #16425b;
  --als-primary-contrast: #ffffff;
  --als-accent: #2a9d8f;
  --als-sidebar-bg: #16425b;
  --als-sidebar-text: #cfe3ec;
  --als-sidebar-text-active: #ffffff;
  --als-sidebar-active-bg: rgba(255, 255, 255, 0.12);
  --als-skeleton-base: #e9ecef;
  --als-skeleton-shine: #f8f9fa;
}

[data-bs-theme="dark"] {
  --als-bg: #10151d;
  --als-surface: #171e29;
  --als-surface-2: #1d2531;
  --als-border: #2a3444;
  --als-text: #e7ebf3;
  --als-text-muted: #9aa5b8;
  --als-primary: #2f7ba3;
  --als-primary-contrast: #ffffff;
  --als-accent: #35b3a3;
  --als-sidebar-bg: #0d1520;
  --als-sidebar-text: #a8bdcc;
  --als-sidebar-text-active: #ffffff;
  --als-sidebar-active-bg: rgba(255, 255, 255, 0.08);
  --als-skeleton-base: #232c3a;
  --als-skeleton-shine: #2b3648;
}

/* Avoid a flash of unstyled/unauthenticated content while guard.js checks
   the session; shell.js/guard.js add .auth-ready once it's safe to show. */
html:not(.auth-ready):not(.auth-page) {
  visibility: hidden;
}

body {
  background-color: var(--als-bg);
  color: var(--als-text);
}