/*
 * intechive shared Vaadin theme — root stylesheet.
 *
 * Cascade order (deliberate):
 *   1. Aura base (loaded by Vaadin's theme merger before this file — theme.json:parent).
 *   2. Tokens — CSS custom properties only, no selectors that touch DOM shape.
 *   3. Components — Vaadin element ::part() overrides scoped to Vaadin selectors.
 *
 * Palette swap: to move the whole app off gold, edit tokens/colors.css only.
 * See README.md at the module root for the worked gold → mid-blue swap.
 */

/* Tokens — foundation layer. Order matters within this block only for tokens
   that reference other tokens (typography depends on font-family being set;
   appearance-dark redefines light-mode vars from colors.css). */
@import "./tokens/colors.css";
@import "./tokens/typography.css";
@import "./tokens/spacing.css";
@import "./tokens/motion.css";
@import "./tokens/gradients.css";
@import "./tokens/appearance-dark.css";

/* The bridge -- maps --iv-* onto the Aura seeds and the --vaadin-* leaves that
   Vaadin components actually read. LAST on purpose: it repeats the
   html[data-appearance="dark"] selector that appearance-dark.css uses, equal
   specificity, so it must come after to win. Without this file the token set
   below is a naming convention rather than a design system. */
@import "./tokens/bridge.css";

/* Density -- the three Aura seed numbers the whole size/radius/type ladder is
   derived from. Independent of the bridge (it sets seeds the bridge does not
   touch), but kept adjacent because the two files are the reason the token set
   reaches a component at all. */
@import "./tokens/density.css";

/* Components — Vaadin element overrides. No cross-dependencies between these;
   listed alphabetically. */
@import "./components/app-shell.css";
@import "./components/button.css";
@import "./components/form.css";
@import "./components/grid.css";
@import "./components/card-row.css";
@import "./components/loader.css";

/* Global body reset — keeps the html + body layout clean. Vaadin's outlet
   sizing lives here rather than in index.html so consumers don't have to
   duplicate it. */
html,
body,
#outlet {
  height: 100%;
  margin: 0;
}

body {
  background: hsl(var(--iv-background));
  color: hsl(var(--iv-foreground));
  font-family: var(--iv-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}