/**
 * ASTRYX CORE - RESET, TYPOGRAPHY & ATOMIC UTILITIES
 */

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

html {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--astryx-bg-canvas);
  overflow-x: hidden;
}

body {
  font-family: var(--astryx-font-sans);
  background-color: var(--astryx-bg-canvas);
  color: var(--astryx-text-primary);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  background-image:
    radial-gradient(circle at 8% -10%, rgba(72, 209, 160, 0.12), transparent 28rem),
    radial-gradient(circle at 100% 0%, rgba(19, 19, 74, 0.07), transparent 32rem);
  background-attachment: fixed;
}

img, svg, canvas, video { max-width: 100%; }
button, input, select, textarea { font: inherit; min-width: 0; }
main, section, article, aside, div { min-width: 0; }
p, li, td, th, label, strong, span { overflow-wrap: anywhere; }
code { overflow-wrap: anywhere; white-space: normal; }

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--astryx-font-display);
  font-weight: 700;
  color: var(--astryx-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

h1 { font-size: 1.85rem; font-weight: 800; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }

p {
  color: var(--astryx-text-secondary);
}

a {
  color: var(--astryx-aealcee-navy);
  text-decoration: none;
  transition: var(--astryx-transition);
}

a:hover {
  color: var(--astryx-aealcee-navy-light);
}

::selection { background: rgba(72, 209, 160, 0.35); color: var(--astryx-aealcee-navy); }

:focus-visible {
  outline: 3px solid rgba(72, 209, 160, 0.48);
  outline-offset: 2px;
}

/* Layout Utilities */
.astryx-container {
  width: min(100%, 1248px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.astryx-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.astryx-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.astryx-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.astryx-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.astryx-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 900px) {
  .astryx-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .astryx-grid-3, .astryx-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  html { font-size: 14px; }
  .astryx-container { padding-left: 16px; padding-right: 16px; }
  .astryx-grid-4 { grid-template-columns: 1fr; }
  h1 { font-size: clamp(1.45rem, 7vw, 1.8rem); }
  h2 { font-size: clamp(1.25rem, 6vw, 1.45rem); }
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--astryx-bg-canvas);
}
::-webkit-scrollbar-thumb {
  background: var(--astryx-border-strong);
  border-radius: var(--astryx-radius-full);
}