/* ============================================================
   AIxcel Labs — Modern CSS Reset  (css/reset.css)
   ============================================================
   Approach: Andy Bell's Modern Reset + modern additions for
   focus-visible, prefers-reduced-motion, dvh, logical
   properties, and HTML5 semantic defaults.
   ============================================================ */

/* ── BOX SIZING ─────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ── DOCUMENT ───────────────────────────────────────────────── */
html {
  /* Prevent font size inflation on iOS Safari */
  text-size-adjust: 100%;

  /* Enable smooth scrolling (disabled for reduced-motion below) */
  scroll-behavior: smooth;

  /* Consistent tab size for code blocks */
  tab-size: 4;

  /* Match browser chrome (scrollbars, inputs) to color scheme */
  color-scheme: light dark;
  font-size: 16px;
}

/* ── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
}

/* ── BODY ───────────────────────────────────────────────────── */
body {
  margin: 0;

  /* dvh: accounts for mobile browser chrome resizing */
  min-height: 100dvh;
  font-family:    var(--font-sans);
  font-size:      var(--text-base);
  line-height:    var(--leading-relaxed);
  color:          var(--text-primary);
  background-color: var(--bg-page);

  /* Improve text rendering */
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  text-rendering: optimizelegibility;
}

/* ── HEADINGS ───────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight:     var(--font-bold);
  line-height:     var(--leading-tight);
  letter-spacing:  var(--tracking-tight);
  color:           var(--text-primary);
  overflow-wrap:   break-word;

  /* Variable font optical sizing hint */
  font-optical-sizing: auto;
}

h1 {
  font-size: var(--text-5xl);
  font-weight: var(--font-extrabold);
  letter-spacing: var(--tracking-tighter);
}

h2 { font-size: var(--text-4xl); }

h3 { font-size: var(--text-3xl); }

h4 { font-size: var(--text-2xl); }

h5 { font-size: var(--text-xl); }

h6 { font-size: var(--text-lg); }

/* ── PARAGRAPHS & INLINE ────────────────────────────────────── */
p {
  margin: 0;
  color:        var(--text-secondary);
  line-height:  var(--leading-relaxed);
  overflow-wrap: break-word;
}

strong, b { font-weight: var(--font-bold); }

em,
i {
  font-style: italic;
}

small {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* ── LINKS ──────────────────────────────────────────────────── */
a {
  color: inherit;
  text-decoration: none;
}

/* ── MEDIA ──────────────────────────────────────────────────── */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;       /* Preserve aspect ratio */
}

/* Display alt text attractively when image fails */
img {
  font-style: italic;
}

/* ── FORMS ──────────────────────────────────────────────────── */
input,
button,
textarea,
select {
  font: inherit;     /* Prevent browser from defaulting to system font */
  margin: 0;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  line-height: inherit;
}

fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

/* ── LISTS ──────────────────────────────────────────────────── */
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── TABLES ─────────────────────────────────────────────────── */
table {
  border-collapse: collapse;
}

/* ── CODE ───────────────────────────────────────────────────── */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ── HR ─────────────────────────────────────────────────────── */
hr {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: 0;
}

/* ── DETAILS / SUMMARY ──────────────────────────────────────── */
details > summary {
  cursor: pointer;
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

/* ── SVG ────────────────────────────────────────────────────── */
svg {
  /* Allow SVGs to inherit color from parent */
  fill: currentcolor;
}

/* ── FOCUS MANAGEMENT ───────────────────────────────────────── */

/* Remove outline for pointer/touch; show it only for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline:        2px solid var(--border-focus);
  outline-offset: 3px;
  border-radius:  var(--radius-sm);
}

/* ── TEXT SELECTION ─────────────────────────────────────────── */
::selection {
  background-color: var(--cyan-200);
  color: var(--cyan-900);
}