/* ─── A Guide To — Base Styles (Dark Theme) ─── */

/* Modern CSS Reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--agt-font-body);
  font-size: var(--agt-text-base);
  line-height: var(--agt-leading-normal);
  color: var(--agt-text);
  background-color: var(--agt-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Subtle grid texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* Corner radial accents */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 600px at 0% 0%, rgba(30,50,120,0.12), transparent),
    radial-gradient(ellipse 500px 500px at 100% 0%, rgba(60,30,100,0.10), transparent);
  pointer-events: none;
  z-index: 0;
}

/* Disable decorative overlays on mobile for performance */
@media (max-width: 768px) {
  body::before,
  body::after {
    display: none;
  }
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--agt-font-heading);
  line-height: var(--agt-leading-tight);
  color: var(--agt-text);
  font-weight: var(--agt-weight-bold);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--agt-text-4xl); margin-bottom: var(--agt-space-5); }
h2 { font-size: var(--agt-text-3xl); margin-bottom: var(--agt-space-4); }
h3 { font-size: var(--agt-text-2xl); margin-bottom: var(--agt-space-3); }
h4 { font-size: var(--agt-text-xl); margin-bottom: var(--agt-space-3); }
h5 { font-size: var(--agt-text-lg); margin-bottom: var(--agt-space-2); }
h6 { font-size: var(--agt-text-base); margin-bottom: var(--agt-space-2); }

@media (max-width: 768px) {
  h1 { font-size: var(--agt-text-3xl); }
  h2 { font-size: var(--agt-text-2xl); }
  h3 { font-size: var(--agt-text-xl); }
}

/* Body text */
p {
  margin-bottom: var(--agt-space-4);
}

/* Links */
a {
  color: var(--agt-accent-light);
  text-decoration: none;
  transition: color var(--agt-transition);
}

a:hover {
  color: var(--agt-accent);
  text-decoration: underline;
}

/* Responsive images */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Lists */
ul, ol {
  padding-left: var(--agt-space-5);
  margin-bottom: var(--agt-space-4);
}

li {
  margin-bottom: var(--agt-space-2);
}

/* Blockquote */
blockquote {
  border-left: 4px solid var(--agt-accent);
  padding: var(--agt-space-4) var(--agt-space-5);
  margin: var(--agt-space-5) 0;
  background: var(--agt-bg-warm);
  border-radius: 0 var(--agt-radius) var(--agt-radius) 0;
  font-style: italic;
  color: var(--agt-text-light);
}

/* Code */
code {
  font-family: var(--agt-font-mono);
  font-size: var(--agt-text-sm);
  background: var(--agt-bg-cool);
  padding: var(--agt-space-1) var(--agt-space-2);
  border-radius: var(--agt-radius-sm);
}

/* Horizontal rule */
hr {
  border: none;
  border-top: 1px solid var(--agt-border);
  margin: var(--agt-space-7) 0;
}

/* Table */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--agt-space-5);
}

th, td {
  padding: var(--agt-space-3) var(--agt-space-4);
  text-align: left;
  border-bottom: 1px solid var(--agt-border);
}

th {
  font-weight: var(--agt-weight-semibold);
  color: var(--agt-text);
  background: var(--agt-bg-cool);
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--agt-accent);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background: var(--agt-accent);
  color: var(--agt-bg);
}

/* Skip link (accessibility) */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--agt-space-4);
  background: var(--agt-accent);
  color: var(--agt-bg);
  padding: var(--agt-space-2) var(--agt-space-4);
  border-radius: var(--agt-radius);
  z-index: 1000;
  font-weight: var(--agt-weight-semibold);
}

.skip-link:focus {
  top: var(--agt-space-4);
}