clampography 2.0.0-beta.8 → 2.0.0

package/LICENSE

@@ -1,20 +1,20 @@
-MIT License
-
-Copyright (c) 2025 Dawid Wąsowski
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Dawid Wąsowski
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,41 +1,26 @@
 # 🙌 Clampography
 
-**Clampography** is a pure CSS typography system that uses the
-[clamp()](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/clamp)
-function for fluid, responsive text scaling. It's designed as an alternative to
-[@tailwindcss/typography](https://github.com/tailwindlabs/tailwindcss-typography),
-but works with or without [Tailwind CSS](https://tailwindcss.com/). With
-[94% global browser support](https://caniuse.com/css-math-functions), it works
-on nearly all modern devices.
-
-- **No default styling:** No colors, borders, transforms, or decorations.
-- **Structure only:** Manages size, spacing, weight, and font-family.
-- **Smart scaling:** Contextual elements use `em` (relative), blocks use
-  `clamp()` (fluid).
-
-## The purpose
-
-[CSS resets](https://en.wikipedia.org/wiki/Reset_style_sheet) like
-[Tailwind's Preflight](https://tailwindcss.com/docs/preflight) remove all
-browser typography defaults, leaving you with unstyled text. **Clampography**
-delivers production-ready text scaling that responds to viewport changes
-automatically, while leaving all aesthetic choices to you.
-
-Visit the temporary [demo page](https://next.dav.one/clampography/) to see how
-it looks.
-
-## Requirements
-
-Use [Vite](https://vitejs.dev/), [Webpack](https://webpack.js.org/), or similar
-build tool for CSS bundling. Popular frameworks like
-[Astro](https://astro.build/), [Next.js](https://nextjs.org/),
-[Remix](https://remix.run/), and
-[SvelteKit](https://svelte.dev/docs/kit/introduction) include CSS bundling by
-default and work seamlessly with **Clampography**. Without a build tool, native
-CSS `@import` combined with `@layer` has about 91% browser coverage and only
-works in browsers released since early 2022.
-
-## Installation
+**Clampography** is a typography and theming plugin for [Tailwind CSS v4](https://tailwindcss.com/). 
+
+When you use Tailwind CSS, the [Preflight](https://tailwindcss.com/docs/preflight) reset removes all browser defaults. You get a completely blank slate, which is great for UI, but terrible for blog articles or documentation pages because all your `<h1>`, `<p>`, `<ul>`, and other tags lose their styling.
+
+**Clampography solves this.** It restores typography defaults and makes them mathematically perfect. It automatically generates a fluid type scale using [CSS clamp() functions](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/clamp). Your text and spacing will scale smoothly between mobile and 4K displays - without writing a single media query.
+
+> [!NOTE]
+> Clampography is designed for projects using a build tool like [Vite](https://vitejs.dev/) or [Webpack](https://webpack.js.org/), or a framework with CSS bundling like [Astro](https://astro.build/), [Next.js](https://nextjs.org/), [Remix](https://remix.run/), or [SvelteKit](https://svelte.dev/docs/kit/introduction). With a build tool, unused modules are automatically removed, keeping your CSS bundle small.
+> A build tool is not required - CDN files are also available. However, CDN files cannot be tree-shaken, resulting in a significantly larger CSS file.
+
+## ✨ Features
+- 🧮 **Fluid Typography & Spacing:** Smooth scaling from mobile to desktop.
+- 🎨 **Built-in Themes:** `light` and `dark` included. More themes coming soon.
+- 🧩 **Modular:** Enable only what you need.
+- 🎯 **Zero Specificity:** All styles use `:where()` - your own CSS always wins, no `!important` needed.
+- 💬 **TypeScript Ready:** Auto-generated [TypeScript](https://www.typescriptlang.org/) types for all CSS variables.
+- 🌍 **RTL Ready:** Works correctly in right-to-left languages out of the box.
+- 🎨 **Figma Design Tokens:** Theme values exported as `figma-tokens.json` (W3C Design Tokens).
+- 🖨️ **Print & A11y Optimization:** Removes decorations and forces readable black text.
+
+## 📦 Install
 
 ```bash
 # Install with NPM
@@ -51,21 +36,65 @@ bun install clampography
 deno install npm:clampography
 ```
 
-## Usage
+## 🛠️ Quick Start
+
+### 1. Basic (Fluid Typography Only)
+This restores typography but keeps it clean. No colors are injected.
 
 ```css
-/* First import Tailwind CSS */
 @import "tailwindcss";
+@plugin "clampography";
+```
 
-/* Then import Clampography */
-@import "clampography";
+### 2. Optimal Experience (Themes + Extra Styles)
+This adds colors, styled forms, and extra decorations.
 
-/* Then you can override Clampography's base styles */
-@layer base {
-  h1 {
-    font-size: clamp(2.35rem, 1.95rem + 1.5vw, 4rem);
-    font-weight: 400;
-    line-height: 1.15;
-  }
+```css
+@import "tailwindcss";
+@plugin "clampography" {
+  themes: all;
+  forms: true;
+  extra: true;
 }
 ```
+
+```html
+<body data-theme="dark" class="bg-clampography-background text-clampography-text">
+  <h1>Fluid Heading</h1>
+  <button class="bg-clampography-primary">Action</button>
+</body>
+```
+
+## ⚙️ Configuration
+
+Clampography is highly modular. You can configure it directly in your CSS:
+
+```css
+@plugin "clampography" {
+  /* Feature Modules */
+  themes: "light, dark" | "all" | false;  /* (default: false) */
+  base: true | false;                     /* (default: true) */
+  extra: true | false;                    /* (default: false) */
+  forms: true | false;                    /* (default: false) */
+  kbd: true | false;                      /* (default: false) */
+  print: true | false;                    /* (default: false) */
+
+  /* Advanced Settings */
+  typography: "global" | ".your-class";   /* Scope isolation */
+  fluid-min: "320px";                     /* Mobile breakpoint */
+  fluid-max: "1280px";                    /* Desktop breakpoint */
+}
+```
+
+## 📚 Documentation
+- 📖 **[Complete Usage Guide](docs/usage.md)**
+- 🔄 **[Configuration Flow Diagram](docs/configuration-flow.md)**
+- 🤝 **[Contributing](docs/contributing.md)**
+
+## 🙏 Inspirations
+- [daisyUI](https://daisyui.com/) created by [Pouya Saadeghi](https://saadeghi.com/)
+- The official **Typography** plugin for Tailwind CSS: [tailwindcss-typography](https://github.com/tailwindlabs/tailwindcss-typography)
+
+---
+
+**License:** [MIT](LICENSE)

package/css/base.css

@@ -0,0 +1,501 @@
+@layer base {
+
+  :where(:root) {
+    --clampography-spacing-xs: clamp(0.25rem, 0.0833rem + 0.8333vw, 0.75rem);
+    --clampography-spacing-sm: clamp(0.375rem, 0.0833rem + 1.4583vw, 1.25rem);
+    --clampography-spacing-md: clamp(0.5rem, 0.1667rem + 1.6667vw, 1.5rem);
+    --clampography-spacing-lg: clamp(0.75rem, 0.1667rem + 2.9167vw, 2.5rem);
+    --clampography-spacing-xl: clamp(1rem, 0.3333rem + 3.3333vw, 3rem);
+    --clampography-list-indent: clamp(1.5rem, 1.3333rem + 0.8333vw, 2rem);
+    --clampography-scroll-offset: 5rem;
+    --clampography-font-base: Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+    --clampography-font-mono: ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+    --clampography-fluid-min: 20;
+    --clampography-fluid-max: 80;
+    --clampography-h1-min: 1.875;
+    --clampography-h1-max: 4;
+    --clampography-h1-slope: calc((var(--clampography-h1-max) - var(--clampography-h1-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));
+    --clampography-h1-base: calc(var(--clampography-h1-min) - var(--clampography-h1-slope) * var(--clampography-fluid-min));
+    --clampography-h1-size: clamp(calc(var(--clampography-h1-min) * 1rem), calc(var(--clampography-h1-base) * 1rem + var(--clampography-h1-slope) * 100vw), calc(var(--clampography-h1-max) * 1rem));
+    --clampography-h2-min: 1.25;
+    --clampography-h2-max: 3;
+    --clampography-h2-slope: calc((var(--clampography-h2-max) - var(--clampography-h2-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));
+    --clampography-h2-base: calc(var(--clampography-h2-min) - var(--clampography-h2-slope) * var(--clampography-fluid-min));
+    --clampography-h2-size: clamp(calc(var(--clampography-h2-min) * 1rem), calc(var(--clampography-h2-base) * 1rem + var(--clampography-h2-slope) * 100vw), calc(var(--clampography-h2-max) * 1rem));
+    --clampography-h3-min: 1.125;
+    --clampography-h3-max: 2.25;
+    --clampography-h3-slope: calc((var(--clampography-h3-max) - var(--clampography-h3-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));
+    --clampography-h3-base: calc(var(--clampography-h3-min) - var(--clampography-h3-slope) * var(--clampography-fluid-min));
+    --clampography-h3-size: clamp(calc(var(--clampography-h3-min) * 1rem), calc(var(--clampography-h3-base) * 1rem + var(--clampography-h3-slope) * 100vw), calc(var(--clampography-h3-max) * 1rem));
+    --clampography-h4-min: 1;
+    --clampography-h4-max: 1.5;
+    --clampography-h4-slope: calc((var(--clampography-h4-max) - var(--clampography-h4-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));
+    --clampography-h4-base: calc(var(--clampography-h4-min) - var(--clampography-h4-slope) * var(--clampography-fluid-min));
+    --clampography-h4-size: clamp(calc(var(--clampography-h4-min) * 1rem), calc(var(--clampography-h4-base) * 1rem + var(--clampography-h4-slope) * 100vw), calc(var(--clampography-h4-max) * 1rem));
+    --clampography-h5-min: 1;
+    --clampography-h5-max: 1;
+    --clampography-h5-slope: calc((var(--clampography-h5-max) - var(--clampography-h5-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));
+    --clampography-h5-base: calc(var(--clampography-h5-min) - var(--clampography-h5-slope) * var(--clampography-fluid-min));
+    --clampography-h5-size: clamp(calc(var(--clampography-h5-min) * 1rem), calc(var(--clampography-h5-base) * 1rem + var(--clampography-h5-slope) * 100vw), calc(var(--clampography-h5-max) * 1rem));
+    --clampography-h6-min: 0.875;
+    --clampography-h6-max: 0.875;
+    --clampography-h6-slope: calc((var(--clampography-h6-max) - var(--clampography-h6-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));
+    --clampography-h6-base: calc(var(--clampography-h6-min) - var(--clampography-h6-slope) * var(--clampography-fluid-min));
+    --clampography-h6-size: clamp(calc(var(--clampography-h6-min) * 1rem), calc(var(--clampography-h6-base) * 1rem + var(--clampography-h6-slope) * 100vw), calc(var(--clampography-h6-max) * 1rem));
+    --clampography-heading-scale: 1;
+    --clampography-h1-scale: var(--clampography-heading-scale);
+    --clampography-h2-scale: var(--clampography-heading-scale);
+    --clampography-h3-scale: var(--clampography-heading-scale);
+    --clampography-h4-scale: var(--clampography-heading-scale);
+    --clampography-h5-scale: var(--clampography-heading-scale);
+    --clampography-h6-scale: var(--clampography-heading-scale);
+  }
+
+  body {
+    font-size: clamp(0.875rem, 0.7917rem + 0.4167vw, 1.125rem);
+    line-height: 1.75;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-wrap: pretty;
+  }
+
+  :root :where(h1, h2, h3, h4, h5, h6) {
+    font-weight: 600;
+    scroll-margin-top: var(--clampography-scroll-offset);
+  }
+
+  :root h1 {
+    font-size: calc(var(--clampography-h1-size) * var(--clampography-h1-scale));
+    line-height: 1.1111;
+    font-weight: 800;
+    margin-top: 0;
+    margin-bottom: var(--clampography-spacing-xl);
+  }
+
+  :root h2 {
+    font-size: calc(var(--clampography-h2-size) * var(--clampography-h2-scale));
+    line-height: 1.3333;
+    font-weight: 700;
+    margin-top: var(--clampography-spacing-xl);
+    margin-bottom: var(--clampography-spacing-md);
+  }
+
+  :root h3 {
+    font-size: calc(var(--clampography-h3-size) * var(--clampography-h3-scale));
+    line-height: 1.5;
+    margin-top: var(--clampography-spacing-lg);
+    margin-bottom: var(--clampography-spacing-sm);
+  }
+
+  :root h4 {
+    font-size: calc(var(--clampography-h4-size) * var(--clampography-h4-scale));
+    line-height: 1.5;
+    margin-top: var(--clampography-spacing-lg);
+    margin-bottom: var(--clampography-spacing-sm);
+  }
+
+  :root h5 {
+    font-size: calc(var(--clampography-h5-size) * var(--clampography-h5-scale));
+    line-height: 1.5;
+    margin-top: var(--clampography-spacing-md);
+    margin-bottom: var(--clampography-spacing-xs);
+  }
+
+  :root h6 {
+    font-size: calc(var(--clampography-h6-size) * var(--clampography-h6-scale));
+    line-height: 1.5;
+    margin-top: var(--clampography-spacing-md);
+    margin-bottom: var(--clampography-spacing-xs);
+  }
+
+  :root :is(h1, h2, h3, h4, h5, h6):first-child {
+    margin-top: 0;
+  }
+
+  :root a {
+    text-decoration-line: underline;
+    cursor: pointer;
+  }
+
+  :root :where(h1, h2, h3, h4, h5, h6) a {
+    text-decoration: none;
+  }
+
+  :root menu {
+    list-style: none;
+    margin-bottom: var(--clampography-spacing-md);
+    padding-inline-start: 0;
+  }
+
+  :root menu > li::before {
+    display: none;
+  }
+
+  :root hgroup {
+    margin-bottom: var(--clampography-spacing-lg);
+  }
+
+  :root hgroup :where(h1, h2, h3, h4, h5, h6) {
+    margin-bottom: var(--clampography-spacing-xs);
+  }
+
+  :root hgroup :where(p) {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-size: 0.875em;
+    font-weight: 400;
+    line-height: 1.5;
+  }
+
+  :root p {
+    line-height: 1.75;
+    margin-bottom: var(--clampography-spacing-md);
+  }
+
+  :root :where(strong, b) {
+    font-weight: 700;
+  }
+
+  :root :where(em, i, cite, var) {
+    font-style: italic;
+  }
+
+  :root dfn {
+    font-style: italic;
+    font-weight: 600;
+  }
+
+  :root small {
+    font-size: 0.875em;
+    line-height: 1.5;
+  }
+
+  :root :where(code, kbd, samp) {
+    font-family: var(--clampography-font-mono);
+    font-size: 0.875em;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+  }
+
+  :root kbd {
+    font-weight: 600;
+  }
+
+  :root data {
+    font-variant-numeric: tabular-nums;
+  }
+
+  :root :where(sub, sup) {
+    font-size: 0.75em;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  :root sup {
+    top: -0.5em;
+  }
+
+  :root sub {
+    bottom: -0.25em;
+  }
+
+  :root abbr[title] {
+    text-decoration: underline dotted;
+    text-underline-offset: 4px;
+    cursor: help;
+  }
+
+  :root del {
+    text-decoration: line-through;
+  }
+
+  :root ins {
+    text-decoration: underline;
+  }
+
+  :root s {
+    text-decoration: line-through;
+  }
+
+  :root u {
+    text-decoration: underline;
+  }
+
+  :root mark {
+    font-style: normal;
+    font-weight: inherit;
+  }
+
+  :root address {
+    font-style: italic;
+    margin-top: var(--clampography-spacing-md);
+    margin-bottom: var(--clampography-spacing-md);
+  }
+
+  :root time {
+    font-style: normal;
+    font-variant-numeric: tabular-nums;
+  }
+
+  :root blockquote {
+    margin-top: var(--clampography-spacing-lg);
+    margin-bottom: var(--clampography-spacing-lg);
+    padding-inline-start: var(--clampography-spacing-md);
+  }
+
+  :root blockquote blockquote {
+    margin-top: var(--clampography-spacing-sm);
+    margin-bottom: var(--clampography-spacing-sm);
+    padding-inline-start: var(--clampography-spacing-sm);
+  }
+
+  :root q {
+    font-style: inherit;
+  }
+
+  :root :where(ul, ol) {
+    list-style: none;
+    margin-bottom: var(--clampography-spacing-md);
+    padding-inline-start: var(--clampography-list-indent);
+  }
+
+  :root li {
+    position: relative;
+  }
+
+  :root li + li {
+    margin-top: var(--clampography-spacing-xs);
+  }
+
+  :root li > :where(p, dl, figure, table, pre) {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  :root li > blockquote {
+    margin-top: var(--clampography-spacing-sm);
+    margin-bottom: var(--clampography-spacing-sm);
+  }
+
+  :root li > :where(ul, ol) {
+    margin-top: var(--clampography-spacing-xs);
+    margin-bottom: 0;
+  }
+
+  :root ul > li::before {
+    content: '';
+    position: absolute;
+    inset-inline-end: 100%;
+    margin-inline-end: 0.75em;
+    top: 0.65em;
+    width: 0.375em;
+    height: 0.375em;
+    background-color: currentColor;
+    border-radius: 50%;
+  }
+
+  :root ol {
+    counter-reset: list-counter;
+  }
+
+  :root ol > li {
+    counter-increment: list-counter;
+  }
+
+  :root ol > li::before {
+    content: counter(list-counter) '.';
+    position: absolute;
+    inset-inline-end: 100%;
+    margin-inline-end: 0.5em;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+    color: currentColor;
+  }
+
+  :root dl {
+    margin-top: var(--clampography-spacing-md);
+    margin-bottom: var(--clampography-spacing-md);
+  }
+
+  :root dt {
+    font-weight: 600;
+    margin-top: var(--clampography-spacing-sm);
+  }
+
+  :root dt:first-child {
+    margin-top: 0;
+  }
+
+  :root dd {
+    margin-inline-start: var(--clampography-spacing-md);
+  }
+
+  :root dt + dd {
+    margin-top: var(--clampography-spacing-xs);
+  }
+
+  :root dd + dd {
+    margin-top: var(--clampography-spacing-xs);
+  }
+
+  :root dd:last-child {
+    margin-bottom: 0;
+  }
+
+  :root pre {
+    margin-top: var(--clampography-spacing-md);
+    margin-bottom: var(--clampography-spacing-md);
+    font-family: var(--clampography-font-mono);
+    line-height: 1.6;
+    overflow-x: auto;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+  }
+
+  :root pre code {
+    font-size: inherit;
+    padding: 0;
+    background: none;
+    border-radius: 0;
+  }
+
+  :root input, :root button, :root textarea, :root select, :root optgroup {
+    font-family: inherit;
+    font-size: 100%;
+    line-height: inherit;
+  }
+
+  :root textarea {
+    line-height: 1.5;
+  }
+
+  :root button, :root [type='button'], :root [type='reset'], :root [type='submit'] {
+    cursor: pointer;
+  }
+
+  :root fieldset {
+    margin-top: var(--clampography-spacing-md);
+    margin-bottom: var(--clampography-spacing-md);
+    padding: var(--clampography-spacing-sm);
+  }
+
+  :root legend {
+    font-weight: 600;
+    padding: 0 var(--clampography-spacing-xs);
+  }
+
+  :root label {
+    display: inline-block;
+    font-weight: 600;
+    margin-bottom: var(--clampography-spacing-xs);
+  }
+
+  :root output {
+    display: inline-block;
+    font-variant-numeric: tabular-nums;
+  }
+
+  :root :where(meter, progress) {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  :root :where(img, video, canvas, audio, iframe, svg) {
+    max-width: 100%;
+    height: auto;
+    vertical-align: middle;
+  }
+
+  :root figure {
+    margin-top: var(--clampography-spacing-lg);
+    margin-bottom: var(--clampography-spacing-lg);
+  }
+
+  :root figcaption {
+    margin-top: 0.375rem;
+    font-size: 0.875em;
+    line-height: 1.5;
+  }
+
+  :root table {
+    width: 100%;
+    margin-top: var(--clampography-spacing-md);
+    margin-bottom: var(--clampography-spacing-md);
+    border-collapse: collapse;
+    font-size: 1em;
+    line-height: 1.6;
+  }
+
+  :root caption {
+    margin-bottom: var(--clampography-spacing-xs);
+    font-size: 0.875em;
+    font-weight: 600;
+    text-align: start;
+  }
+
+  :root th, :root td {
+    padding: var(--clampography-spacing-xs) var(--clampography-spacing-sm);
+    text-align: start;
+  }
+
+  :root th {
+    font-weight: 600;
+  }
+
+  :root thead th {
+    vertical-align: bottom;
+  }
+
+  :root tbody th, :root tbody td {
+    vertical-align: top;
+  }
+
+  :root tfoot th, :root tfoot td {
+    vertical-align: top;
+  }
+
+  :root tbody + tbody {
+    border-top-width: 2px;
+  }
+
+  :root hr {
+    margin-top: var(--clampography-spacing-xl);
+    margin-bottom: var(--clampography-spacing-xl);
+    border: 0;
+    border-top: 1px solid;
+  }
+
+  :root :where(:focus, :focus-visible) {
+    outline-offset: 2px;
+  }
+
+  :root details {
+    margin-top: var(--clampography-spacing-md);
+    margin-bottom: var(--clampography-spacing-md);
+  }
+
+  :root summary {
+    cursor: pointer;
+    font-weight: 600;
+  }
+
+  :root details[open] > summary {
+    margin-bottom: var(--clampography-spacing-xs);
+  }
+
+  :root dialog {
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  :root :where(h1, h2, h3, h4, h5, h6, p, ul:not(li > ul, li > ol), ol:not(li > ul, li > ol), dl, blockquote, figure, table, pre):first-child {
+    margin-top: 0;
+  }
+
+  :root :where(p, ul, ol, dl, blockquote, figure, table, pre):last-child {
+    margin-bottom: 0;
+  }
+}