/* =========================================================
   VOYENESAS · main.css
   Aggregator + base/reset + layout helpers
   ========================================================= */

@import url("./tokens/colors.css");
@import url("./tokens/typography.css");
@import url("./tokens/spacing.css");
@import url("./components/buttons.css");
@import url("./components/forms.css");
@import url("./components/cards.css");
@import url("./components/badges.css");

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  background: var(--vy-surface);
  color: var(--vy-text);
  font-family: var(--vy-font-body);
  font-size: var(--vy-fs-body);
  line-height: var(--vy-lh-relaxed);
  transition: background-color var(--vy-dur-slow) var(--vy-ease-out),
              color var(--vy-dur-slow) var(--vy-ease-out);
}
img, svg, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; }

/* ---- Layout helpers ---- */
.vy-container {
  width: 100%;
  max-width: var(--vy-content-max);
  margin: 0 auto;
  padding-inline: var(--vy-gutter);
}
.vy-stack { display: flex; flex-direction: column; }
.vy-row   { display: flex; flex-direction: row; }
.vy-grid  { display: grid; }
.vy-divider { height: 1px; background: var(--vy-border); border: 0; margin: 0; }

/* ---- Icon helper (used with <svg><use href="..."/></svg>) ---- */
.vy-icon { width: 20px; height: 20px; display: inline-block; flex: none; }

/* ---- Selection ---- */
::selection { background: var(--vy-neutral-950); color: #FFFFFF; }
[data-theme="dark"] ::selection { background: #FFFFFF; color: var(--vy-neutral-950); }