Base layer

Element defaults in @layer porchlight.base — bare HTML gets a sensible, on-token appearance before any component class is applied. All rules are :where() (zero specificity), so they are trivially overridable. Color and type come from the token layers; theme/density/ forced-colors come from 03-themes.

What the base layer does

• html/body get the sans stack, the semantic bg/text tokens, --pl-text-md, and normal leading.
• Links use the accent color with readable underline geometry; hover shifts to --pl-color-accent-hover.
• :focus-visible draws a token-driven outline (size, color, offset) — keyboard focus is never removed without a replacement.
• Headings get tight leading and text-wrap: balance; block flow elements have their UA margins zeroed.
• code/kbd/samp/pre use the mono stack.
• ::selection tints with a translucent accent.

Type scale (fluid)

Each size uses clamp() with viewport-inline units — resize the window to see them flex.

--pl-text-xs

Porchlight xs

--pl-text-sm

Porchlight sm

--pl-text-md

Porchlight md

--pl-text-lg

Porchlight lg

--pl-text-xl

Porchlight xl

Elements