/* =========================================================================
   base.css — element defaults built on tokens.css
   Sets the readable, accessible baseline for raw HTML so that even
   unstyled content in the academy is legible and conformant.
   ========================================================================= */

html {
  font-family: var(--font-sans);
  font-size: 100%;            /* honor user's browser font-size */
  color: var(--text);
  background-color: var(--bg);
}

body {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--text);
  background-color: var(--bg);
  text-align: start;          /* logical — flips for RTL */
}

/* ---- Headings: clear hierarchy, never rely on size alone for meaning ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em; /* tighter display tracking, EqualWeb style */
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); font-weight: 800; margin-block: 0 var(--space-5); }
h2 { font-size: var(--text-2xl); font-weight: 800; margin-block: var(--space-8) var(--space-4); }
h3 { font-size: var(--text-xl);  margin-block: var(--space-6) var(--space-3); }
h4 { font-size: var(--text-lg);  margin-block: var(--space-5) var(--space-2); }
h5 { font-size: var(--text-md);  margin-block: var(--space-4) var(--space-2); }
h6 { font-size: var(--text-base);font-weight: var(--weight-semibold);
     text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }

/* ---- Prose ---- */
p, ul, ol, dl, blockquote, pre, table, figure {
  margin-block: 0 var(--space-4);
}
p, li { max-width: var(--measure); } /* readable measure for body text */
li { margin-block: var(--space-1); }
ul, ol { padding-inline-start: var(--space-5); }

small { font-size: var(--text-sm); }
strong, b { font-weight: var(--weight-bold); }

blockquote {
  border-inline-start: var(--border-2) solid var(--color-brand);
  padding-inline-start: var(--space-4);
  color: var(--text-muted);
}

hr {
  border: 0;
  border-block-start: var(--border-1) solid var(--border);
  margin-block: var(--space-6);
}

/* ---- Links ---- */
a {
  color: var(--link);
  text-decoration-line: underline;       /* never color alone — 1.4.1 */
  text-decoration-thickness: max(1px, 0.06em);
  text-underline-offset: 0.15em;
}
a:hover { color: var(--link-hover); }
/* No `a:visited` rule on purpose: the base `a` colour already applies to visited
   links (author styles beat the UA purple), and omitting it lets :hover work on
   visited links too. Links stay underlined regardless (1.4.1). */

/* ---- Inline code & pre ---- */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
:not(pre) > code {
  background: var(--surface-sunken);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  border: var(--border-1) solid var(--border);
}
pre {
  font-family: var(--font-mono);
  background: var(--surface-sunken);
  color: var(--text);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-1) solid var(--border);
  overflow-x: auto;                       /* horizontal scroll only on code */
}
pre code { background: none; border: 0; padding: 0; }

kbd {
  background: var(--bg-elevated);
  border: var(--border-1) solid var(--border-strong);
  border-block-end-width: 2px;
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
}

/* ---- Tables (base; the component layer adds the .table treatment) ---- */
table { border-collapse: collapse; width: 100%; }
caption { text-align: start; color: var(--text-muted); padding-block-end: var(--space-2); }
th, td { text-align: start; padding: var(--space-2) var(--space-3); border-block-end: var(--border-1) solid var(--border); }
th { font-weight: var(--weight-semibold); }

/* ---- Forms baseline ---- */
label { font-weight: var(--weight-medium); }
input, textarea, select {
  background: var(--bg-elevated);
  color: var(--text);
  border: var(--border-1) solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
::placeholder { color: var(--text-muted); opacity: 1; }

/* =========================================================================
   FOCUS — the single most important a11y detail.
   Use :focus-visible so pointer users don't see rings but keyboard users do.
   The transparent outline becomes a REAL outline under Windows High Contrast
   / forced-colors (where box-shadow is dropped). 2.4.7 + 2.4.11/2.4.13.
   ========================================================================= */
:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}
/* Fallback for engines without :focus-visible — keep a visible ring */
:focus:not(:focus-visible) { outline: none; }
@supports not selector(:focus-visible) {
  :focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
}

/* Selection */
::selection { background: var(--teal-200); color: var(--gray-900); }

/* HC theme: force underlines on all links regardless of state */
[data-theme="hc"] a { text-decoration-thickness: 2px; }

/* Forced colors: make sure focus + borders are honored by the OS palette */
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
  a { color: LinkText; }
}