/* ============================================================ LinkFX Design System — global stylesheet entry point. Consumers link THIS one file. It only @imports token layers and declares the base document defaults. ============================================================ */ @import "./tokens/fonts.css"; @import "./tokens/colors.css"; @import "./tokens/typography.css"; @import "./tokens/spacing.css"; /* ---- Document defaults (mirrors the app's classes) ---- */ :root { color-scheme: light; } body { margin: 0; background: var(--surface-app); color: var(--text-body); font-family: var(--font-sans); font-weight: var(--fw-regular); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Headings default to the LinkFX medium weight + tight tracking */ h1, h2, h3, h4, h5, h6 { color: var(--text-heading); font-weight: var(--fw-medium); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); text-wrap: balance; } p { text-wrap: pretty; } /* Links: navy body links with a gold underline that appears on hover (matches the app's prose + .link styling). */ a { color: var(--base-content); text-decoration-color: var(--primary); text-underline-offset: 3px; transition: color var(--duration-base) var(--ease-standard); } a:hover { color: var(--primary); }