/* ==========================================================================
   MAIN MANIFEST
   ========================================================================== */

/* 1. Settings / Tokens (Auto-generated) */
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import url("generated/tokens.css");

/* 2. Generic (Resets, Box Model, Fonts) */
@import url("generic/reset.css");
@import url("generic/fonts.css");

/* 3. Elements (Base HTML Styles) */
@import url("elements/base.css");

/* 4. Components */
@import url("components/buttons.css");
@import url("components/inputs.css");
@import url("components/cards.css");
@import url("components/icons.css");
@import url("components/header.css");
@import url("components/hero.css");
@import "components/stats.css";
@import "components/features.css";
@import "components/pricing.css";
@import "components/faq.css";
@import "components/cta.css";
@import "components/footer.css";
@import "components/legal.css";
@import "components/contact.css";
@import url("layouts/auth.css");
@import url("layouts/dashboard.css");

/* 6. Utilities (Helper Classes) */
@import url("utilities/typography.css");
@import url("utilities/utilities.css");

/* Global Body Styles (with Mesh Gradient) */
body {
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;

  /* Global Mesh Gradient */
  background-image: radial-gradient(
      circle at 0% 0%,
      var(--color-primary-container),
      transparent 60%
    ),
    radial-gradient(
      circle at 100% 0%,
      var(--color-secondary-container),
      transparent 60%
    );
  background-repeat: no-repeat;
  background-attachment: fixed;
}