/*
 * Global styles for portal-shell.
 *
 * Tailwind CSS 4 (CSS-first config). The brand palette lives in
 * `libs/shared/tokens/src/brand-tokens.css` so every app in the
 * workspace (`portal-shell`, `portal-admin`) reads the same source.
 */

@import 'tailwindcss';

/*
 * Class-based dark mode. Tailwind v4 default is media-query-driven
 * (`prefers-color-scheme`); we override it so a `.dark` class on
 * <html> (set by `LayoutStateService` from the user's explicit
 * preference, or computed from the system preference in `auto` mode)
 * is the single switch. `&:where(.dark, .dark *)` keeps specificity
 * neutral so utility ordering doesn't shift.
 */
@custom-variant dark (&:where(.dark, .dark *));

/* Brand palette tokens — shared with `portal-admin` once it ships. */
@import '../../../libs/shared/tokens/src/brand-tokens.css';

/*
 * The shell is a "fills the viewport, never scrolls the body" layout:
 * <app-root> is locked at height: 100vh, and <main> owns its own
 * overflow-y. If anything inside the shell ever pushes content past
 * the viewport (a wide chart, a flex sizing bug, a third-party
 * iframe), we'd rather clip than show a phantom body scrollbar plus
 * the empty space below the footer that comes with it. The element-
 * level overflow on <main> still produces a real, scrollable region
 * for content that overflows by design. Same shield as portal-admin.
 */
html,
body {
  overflow-y: hidden;
}
