Global

The global layer is feo.css' baseline: a modern reset plus sensible defaults on bare HTML elements. It is what makes feo.css usable without a single class — write plain markup and it already looks reasonable. Everything here is styled with :where(), so every rule has zero specificity and is trivially overridden by your own tokens, layouts, components, and utilities further up the cascade.

@layer tokens, global, layout, components, utilities;
/*             ^^^^^^ reset.css + global.css live here */

Because it reads from the tokens layer below it, anything you define there (fonts, colors, sizing) flows into these defaults automatically.

Reset

A light, opinionated reset applied before any element styling.

RuleEffect
box-sizing: border-boxOn every element and pseudo-element.
margin: 0Removes default margins from all elements (except replaced media like img/svg).
ul, olList styles and inline padding removed.
img, picture, svgdisplay: block, fluid up to 100% of their container, with intrinsic height preserved.
input, button, textarea, selectInherit font-family and font-size instead of the UA defaults.
Focus handlingOutlines are removed for mouse users and restored as a 1px solid currentColor ring for :focus-visible (keyboard) users.
[hidden] / [tabindex="-1"][hidden] is forced to display: none; [tabindex="-1"] loses its outline.

Element defaults

The global.css baseline styles the elements you use on every page.

  • Document — color-scheme: light dark (so it respects the user's theme), horizontal overflow hidden, smooth scrolling on :focus-within, hanging-punctuation, and interpolate-size: allow-keywords (enabling animation to/from keyword sizes) when motion is allowed.
  • Body — min-block-size: 100dvh, a 20rem minimum width, system-ui font stack, font-size: 1rem, line-height: 1.5, and antialiased text rendering.
  • Headings — h1–h3 are bold and sized on a 1.25 modular scale via pow() (h1 = 1rem × 1.25³, h2 = ², h3 = ¹). Headings and interactive elements get a tighter 1.2 line-height, and h1–h4 use text-wrap: balance.
  • Links — unclassed links (a:not([class])) inherit their color, with a smart underline (text-underline-offset, ink-skipping, and a half-transparent decoration color).
  • Code — code uses a monospace stack; inline code stays on one line, while pre > code scrolls horizontally with a 0.75rem padding and tab-size: 2.
  • Cursors — :disabled/[disabled] show not-allowed; [aria-controls] shows pointer.
  • Dialogs — when a <dialog open> is present, background scrolling is locked.

Progressive & accessible defaults

  • View transitions — cross-document view transitions are enabled (@view-transition { navigation: auto }) where supported.
  • Reduced motion — under prefers-reduced-motion: reduce, animations and transitions are near-instant, smooth scrolling is disabled, and view transitions are turned off.

Overriding

Every rule uses :where() (specificity 0,0,0), so you never need !important or high-specificity selectors to change a default — a single class, or a rule in a higher layer, always wins. Set your own values through the tokens layer to reskin the baseline project-wide.