/*
 * Cascade layer order for the whole page, linked first in public/index.html
 * so it comes before any other CSS (see TAILWIND_V4_MIGRATION.md, Phase 2
 * step 2). Later layers win; unlayered CSS beats every layer.
 *
 * - properties: Tailwind's fallback --tw-* defaults for browsers without
 *   @property. Must stay first (lowest), or it overrides the utilities.
 * - base: the reset and the Material Icons font CSS below, plus element rules
 *   from src/styles/app-base.css.
 * - mui: Emotion/MUI (src/app/utils/createLayeredEmotionCache.js).
 * - components: the rest of app-base.css, app-components.css.
 * - utilities: Tailwind (src/styles/app-utilities.css).
 *
 * A static file rather than an inline <style>: CRA's HTML minifier
 * (clean-css) drops `@layer` statements and layered `@import`s.
 */
@layer properties, theme, base, mui, components, utilities;

@import url("./tailwind-base.css") layer(base);

/*
 * Material Icons font CSS (was <link>ed, unlayered, in index.html). Its
 * `.material-icons { font-size: 24px }` then beat every layer, so size classes
 * on <Icon> (`text-base`, `text-20`, ...) and MUI's fontSize prop had no
 * effect. In `base` it loses to MUI and Tailwind again, as before v4.
 */
@import url("https://fonts.googleapis.com/css2?family=Material+Icons")
layer(base);
@import url("https://fonts.googleapis.com/css2?family=Material+Icons+Outlined")
layer(base);
@import url("https://fonts.googleapis.com/css2?family=Material+Icons+Round")
layer(base);
@import url("https://fonts.googleapis.com/css2?family=Material+Icons+Sharp")
layer(base);
@import url("https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone")
layer(base);
@import url("./fonts/material-design-icons/MaterialIconsOutlined.css")
layer(base);