/* ==========================================================================
   BASE.CSS — Reset, Root Defaults, Typography Baseline
   ==========================================================================
/* --------------------------------------------------------------------------
   1. BOX MODEL RESET
   --------------------------------------------------------------------------
   border-box sizing means padding and border are included in element width.
   This prevents the classic "why is my layout broken" confusion.
   -------------------------------------------------------------------------- */

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


/* --------------------------------------------------------------------------
   2. ROOT & BODY
   -------------------------------------------------------------------------- */

html {
  /* Smooth scrolling for anchor navigation (sidebar links on subject pages) */
  scroll-behavior: smooth;

  /* Prevent layout shift when scrollbar appears/disappears */
  overflow-y: scroll;

  /* Slightly larger base on large screens for readability */
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);

  /* Prevent horizontal scroll from overflow bugs */
  overflow-x: hidden;

  /* Improve text rendering on Mac/iOS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Improve text rendering on Windows */
  text-rendering: optimizeLegibility;
}


/* --------------------------------------------------------------------------
   3. TYPOGRAPHY — HEADINGS
   --------------------------------------------------------------------------
   Headings use tight line-height because large text needs less leading.
   Colour is slightly off-white to reduce harsh contrast against dark bg.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);

  /* Prevent headings from creating awkward orphans */
  text-wrap: balance;
}

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

h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

h5 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

h6 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   4. TYPOGRAPHY — BODY ELEMENTS
   -------------------------------------------------------------------------- */

p {
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);

  /* Max reading width — long lines are hard to read */
  max-width: 68ch;
}

/* When a paragraph is inside a reading-width container, remove the ch limit */
.container--narrow p,
.prose p {
  max-width: none;
}

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

em, i {
  font-style: italic;
}

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

/* Inline code — used for spec codes, keyboard shortcuts */
code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background-color: var(--color-bg-surface-alt);
  color: var(--color-accent-primary);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

/* Block-level separator */
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

/* Blockquote — used in tip sections */
blockquote {
  border-left: 3px solid var(--color-accent-primary);
  padding-left: var(--space-6);
  margin: var(--space-6) 0;
  color: var(--color-text-secondary);
  font-style: italic;
}


/* --------------------------------------------------------------------------
   5. LINKS
   --------------------------------------------------------------------------
   Base link style is minimal — most links are inside components that
   override this. The base style handles any unstyled anchor fallback.
   -------------------------------------------------------------------------- */

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

a:hover {
  color: var(--color-accent-primary-dim);
}

/* Visited state — subtle, doesn't break the design */
a:visited {
  color: var(--color-accent-secondary);
}


/* --------------------------------------------------------------------------
   6. LISTS
   --------------------------------------------------------------------------
   Reset list defaults. Components that need styled lists add their own.
   -------------------------------------------------------------------------- */

ul, ol {
  list-style: none;
}

/* When lists are inside reading content (prose), restore bullets */
.prose ul {
  list-style: disc;
  padding-left: var(--space-6);
}

.prose ol {
  list-style: decimal;
  padding-left: var(--space-6);
}

.prose li {
  margin-bottom: var(--space-2);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}


/* --------------------------------------------------------------------------
   7. MEDIA
   -------------------------------------------------------------------------- */

img, video {
  /* Images never overflow their container */
  max-width: 100%;
  height: auto;

  /* Remove gap below inline images */
  display: block;
}

/* SVG icons inherit current text colour */
svg {
  display: block;
  fill: currentColor;
}


/* --------------------------------------------------------------------------
   8. FORMS (MINIMAL)
   --------------------------------------------------------------------------
   The site has minimal form elements — mainly the mobile search if added.
   Full form styling deferred until needed.
   -------------------------------------------------------------------------- */

button {
  /* Remove default browser button styles */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}


/* --------------------------------------------------------------------------
   9. ACCESSIBILITY
   -------------------------------------------------------------------------- */

/* Focus ring — visible for keyboard users, invisible for mouse users */
:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Remove focus ring when using mouse (browser handles this with :focus-visible) */
:focus:not(:focus-visible) {
  outline: none;
}

/* Screen-reader-only utility class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip to main content link — appears on tab for keyboard users */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-accent-primary);
  color: var(--color-bg-page);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-md);
  transition: top var(--transition-fast);
}

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

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


/* --------------------------------------------------------------------------
   10. REDUCED MOTION
   --------------------------------------------------------------------------
   Respect user system preference. Disables all transitions and animations
   for users who have requested reduced motion (vestibular disorders, etc.)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}