/* ============================================================
   MathGyro — Base Reset, Typography, Global Styles
   ============================================================ */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main { flex: 1; }

/* --- Selection --- */
::selection {
  background: var(--selection-bg);
  color: var(--text-primary);
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* --- Focus --- */
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) { outline: none; }

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  font-weight: 700;
}

h1 { font-size: var(--text-4xl); margin-bottom: var(--space-6); }
h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); margin-top: var(--space-12); }
h3 { font-size: var(--text-xl);  margin-bottom: var(--space-3); margin-top: var(--space-8); }
h4 { font-size: var(--text-lg);  margin-bottom: var(--space-2); margin-top: var(--space-6); }

p  { margin-bottom: var(--space-4); color: var(--text-secondary); line-height: var(--leading-relaxed); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; color: var(--text-primary); }

a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}
a:hover { color: var(--accent-hover); }

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

ul, ol { padding-left: var(--space-6); margin-bottom: var(--space-4); color: var(--text-secondary); }
li { margin-bottom: var(--space-2); }
li::marker { color: var(--accent-primary); }

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-tertiary);
  color: var(--accent-primary);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}

pre {
  font-family: var(--font-mono);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}
pre code { background: none; padding: 0; }

hr {
  border: none;
  border-top: 1px solid var(--border-primary);
  margin: var(--space-8) 0;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-4);
}
th, td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border-primary);
}
th { font-weight: 600; color: var(--text-primary); font-size: var(--text-sm); }
td { color: var(--text-secondary); }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

/* --- Print --- */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .nav-toggle, .theme-toggle,
  .lang-switcher, .scroll-top-btn, .toast, .no-print { display: none; }
  a { color: #000; text-decoration: underline; }
  .card, .tool-card { box-shadow: none; border: 1px solid #ccc; }
}