/* ===== AuthKit Base Styles ===== */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-y: scroll;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.5;
  letter-spacing: -0.16px;
  color: var(--color-moon-mist);
  background-color: var(--color-midnight-canvas);
  min-height: 100vh;
  overflow-x: hidden;
}

/* --- Background Grid Layer --- */
.bg-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(186,215,247,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(186,215,247,0.06) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% -5%, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% -5%, black 30%, transparent 70%);
}

.bg-grid::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: conic-gradient(at 50% -5%, transparent 45%, rgba(124,145,182,0.3) 49%, rgba(124,145,182,0.5) 50%, rgba(124,145,182,0.3) 51%, transparent 55%);
  pointer-events: none;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-frost-glow);
  line-height: 1.2;
}

h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-heading-lg); }
h3 { font-size: var(--text-heading); }
h4 { font-size: var(--text-heading-sm); }

.gradient-headline {
  background: var(--gradient-ice-highlight);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 100%;
}

/* --- Links --- */
a {
  color: var(--color-frost-glow);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
a:hover {
  opacity: 0.8;
}

/* --- Lists --- */
ul, ol {
  list-style: none;
}

/* --- Images --- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Selection --- */
::selection {
  background: var(--color-void-violet);
  color: var(--color-pure-white);
}

/* --- Container --- */
.container {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-24);
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--spacing-16);
  }
}