/*
* forge.base.css — Vellum Ink register chrome (ADR 025)
* ----------------------------------------------------------------------------
* The register-level base layer: the .vellum-ink opt-in wrapper (page
* gradient, body-wide contrast/saturate filter, font + box-sizing
* defaults). Extracted verbatim from forge.kit.css section 02 when the
* kit retired (ADR 025). Tokens live in forge.css — load forge.css
* before this file. Component styling is Tailwind utility strings over
* those tokens (compiled artifact: forge.preview.css for previews/docs).
*
* Hand-authored. Deliberately tiny: register chrome only, no component
* classes. If a rule you want to add here styles a *component*, it
* belongs in the shared utility strings instead.
*
* Usage:
*
*
* …
* ============================================================================ */
.vellum-ink *,
.vellum-ink *::before,
.vellum-ink *::after { box-sizing: border-box; }
.vellum-ink {
/* Reset the wrapper's own margin so when .vellum-ink sits on
the browser's default 8px doesn't leak through. Setting it on the
class itself (rather than a global `html, body { margin: 0 }`)
keeps the reset scoped to opt-in surfaces. */
margin: 0;
font-family: var(--vl-font-sans);
font-size: 15px;
line-height: 1.5;
color: var(--forge-text-primary);
background: var(--forge-surface-page);
min-height: 100vh;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "ss01", "kern" 1;
letter-spacing: var(--vl-letter-sans);
filter: contrast(1.02) saturate(1.04);
}
@supports (background: var(--vl-page-gradient)) {
.vellum-ink { background: var(--vl-page-gradient); background-attachment: fixed; }
}
@media (prefers-reduced-motion: reduce) {
.vellum-ink { filter: none; }
.vellum-ink *, .vellum-ink *::before, .vellum-ink *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/*
* Component keyframes (carried over from forge.kit.css when it retired).
* @keyframes can't be expressed as utility strings; Skeleton and Spinner
* reference these via animate-[forge-skeleton-shimmer_…] / animate-[forge-spin_…].
* They must ship in a stylesheet every consumer loads — previews get an
* identical copy compiled into forge.preview.css via forge.preview.src.css.
* prefers-reduced-motion suppression comes from the clamp above.
*/
@keyframes forge-spin {
to {
transform: rotate(360deg);
}
}
@keyframes forge-skeleton-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}