/* Front-end element resets and global chrome.
   NOT loaded into the editor: `html, body` here paints the site's dark surface,
   and inside the editor the canvas IS body, which turned the writing area black.
   Editor-side styling lives in editor.css. Tokens stay in tokens.css. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--color-bg); color: var(--color-text-on-dark); }
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
/* Global safety net: an image never overflows its container. base.css only set
   `display: block` before, so a wide content image rendered at its intrinsic width
   and overflowed its column (it was sliding under the sticky Table of Contents on
   single posts). Components that need a fixed image size (logos, mocks) set their
   own width and override this. */
img { max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ==============================================================
   Focus: kill the coral box on mouse-click, keep it for keyboard.
   :focus-visible only paints when the user is navigating via keyboard
   or assistive tech — accessible AND clean for mouse users.
   ============================================================== */
a:focus,
button:focus,
[role="button"]:focus,
summary:focus {
  outline: none;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-coral);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Clicking a link should never leave a flash of the link's background color
   (Twenty Twenty-Five sometimes inherits a -webkit-tap-highlight). */
a, button { -webkit-tap-highlight-color: transparent; }