/* Cascade Layers - Ordered from lowest to highest priority */ /* `themes` slots between base and components per ADR-0003 so aesthetic presets can re-skin base elements without outranking component contracts. */ @layer base, themes, components, utilities, layouts; @layer base { /* Non-inheriting custom properties */ @property --layout-gap { syntax: "*"; inherits: false; initial-value: 1rem; } /* --gap is the per-component spacing knob (stack, cluster, card, etc.). Inheritance leaks a parent stack's --gap into nested children that also read var(--gap, …), producing surprising spacing. Reset at each box so each component falls back to its own designed default. */ @property --gap { syntax: "*"; inherits: false; initial-value: 1rem; } /* Reduced-motion opt-in: components set this to a reduced-variant animation; default `none` disables the animation entirely under `prefers-reduced-motion: reduce`. See docs/adr/0001. */ @property --animation-reduced { syntax: "*"; inherits: false; initial-value: none; } /* Typography */ :root { /* Enable interpolation of keyword sizes (e.g. block-size: auto ↔ 0) so the authored details::details-content height transition actually animates. Inherits document-wide from :root. Guarded for reduced-motion below so keyword interpolation is only enabled when motion is allowed; the global prefers-reduced-motion duration guard further short-circuits the transition. See docs/adr/0001. */ @media (prefers-reduced-motion: no-preference) { interpolate-size: allow-keywords; } /* ===================================================================== * Tier 1: Literal tokens — concrete primitives * Colors, lengths, durations, raw scales. These are what consumers * override at the root to retheme. * ===================================================================== */ /* Typography primitives */ /** * @token --font-sans * @category typography * @role Default sans-serif font stack used by body copy and UI; overridden at :root to retheme typography */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /** * @token-group fluid-viewport-bounds * @matches --min-vw, --max-vw * @category layout * @role Inclusive viewport range (in raw px) that bounds fluid type and spacing calculations */ --min-vw: 360; --max-vw: 800; /* Fluid Type */ /** * @token-group fluid-type-config * @matches --font-size-min, --font-size-max, --font-ratio-min, --font-ratio-max, --font-width-min, --font-width-max * @category typography * @role Anchor values for the fluid type scale; `--fl` levels interpolate between these min/max ratios across the viewport range */ --font-size-min: 16; --font-size-max: 18; --font-ratio-min: 1.2; --font-ratio-max: 1.25; --font-width-min: 320; --font-width-max: 1500; /* Vertical Spacing */ /** * @token-group vertical-spacing * @matches --vs-* * @category spacing * @role Vertical rhythm scale; use for `gap` on stacks and for `margin-block` between content blocks * @scale xs, s, base, m, l, xl, xxl, xxxl */ --vs-xs: 0.25rem; --vs-s: 0.5rem; --vs-base: 1rem; --vs-m: 1.5rem; --vs-l: 2rem; --vs-xl: 4rem; --vs-xxl: 6rem; --vs-xxxl: 8rem; /* Padding */ /** * @token-group padding * @matches --pad-* * @category spacing * @role Inset spacing scale; use for component `padding` and inside-edge gaps * @scale xs, s, m, l, xl, xxl, xxxl */ --pad-xs: 0.25rem; --pad-s: 0.5rem; --pad-m: 0.75rem; --pad-l: 1rem; --pad-xl: 1.5rem; --pad-xxl: 2rem; --pad-xxxl: 4rem; /* Border Radius */ /** * @token-group border-radius * @matches --br-* * @category radius * @role Border radius scale; pick by component size, not personal preference * @scale xs, s, m, l, xl, xxl */ --br-xs: 2px; --br-s: 4px; --br-m: 8px; --br-l: 16px; --br-xl: 24px; --br-xxl: 32px; /* Line Height */ /** * @token-group line-height * @matches --lh, --lh-* * @category typography * @role Line-height scale; `--lh` is body default, smaller for dense UI, larger for long-form reading * @scale xs, s, (base = `--lh`), l, xl */ --lh-xs: 1; --lh-s: 1.2; --lh: 1.5; --lh-l: 1.8; --lh-xl: 2; /* Font Weight */ /** * @token-group font-weight * @matches --fw-* * @category typography * @role Type weight tokens; align with the variable-font axis points the project ships * @scale medium, semibold, bold */ --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Heading Letter Spacing */ /** * @token-group heading-letter-spacing * @matches --ls-h* * @category typography * @role Negative tracking for large headings (H1–H3) so big type doesn't visually drift apart */ --ls-h1: -0.02em; --ls-h2: -0.015em; --ls-h3: -0.01em; /* Color System - OKLCH with 1-9 scales */ /* Base colors (scale 5) */ /** * @token-group base-colors * @matches --yellow, --amber, --orange, --red, --pink, --purple, --indigo, --blue, --teal, --green, --lime, --highlighter, --brown * @category color * @role Canonical hue anchors in OKLCH; every per-color scale (`---1..9`, `---opaque-*`) derives from these */ --yellow: oklch(0.88 0.15 95); --amber: oklch(0.78 0.16 80); --orange: oklch(0.75 0.18 65); --red: oklch(0.62 0.22 35); --pink: oklch(0.62 0.25 350); --purple: oklch(0.65 0.24 310); --indigo: oklch(0.55 0.25 275); --blue: oklch(0.5 0.28 270); --teal: oklch(0.82 0.08 185); --green: oklch(0.72 0.18 165); --lime: oklch(0.8 0.16 130); --highlighter: oklch(0.88 0.22 115); --brown: oklch(0.55 0.12 60); /* Yellow scale */ /** * @token-group color-yellow * @matches --yellow-* * @category color * @role Yellow scale (alpha-derived steps 1–9) plus opaque variants pre-mixed against `--bg`/`--fg`; pick a scale step by needed contrast, not by mood */ --yellow-1: oklch(from var(--yellow) l c h / 0.1); --yellow-2: oklch(from var(--yellow) l c h / 0.2); --yellow-3: oklch(from var(--yellow) l c h / 0.3); --yellow-4: oklch(from var(--yellow) l c h / 0.4); --yellow-5: oklch(from var(--yellow) l c h / 0.5); --yellow-6: oklch(from var(--yellow) l c h / 0.6); --yellow-7: oklch(from var(--yellow) l c h / 0.75); --yellow-8: oklch(from var(--yellow) l c h / 0.9); --yellow-9: var(--yellow); /* Yellow opaque scale */ /* derive:source */ --yellow-opaque-1: color-mix(in oklab, var(--yellow), var(--bg) 90%); --yellow-opaque-2: color-mix(in oklab, var(--yellow), var(--bg) 80%); --yellow-opaque-3: color-mix(in oklab, var(--yellow), var(--bg) 65%); --yellow-opaque-4: color-mix(in oklab, var(--yellow), var(--bg) 40%); --yellow-opaque-5: var(--yellow); --yellow-opaque-6: color-mix(in oklab, var(--yellow), var(--fg) 30%); --yellow-opaque-7: color-mix(in oklab, var(--yellow), var(--fg) 50%); --yellow-opaque-8: color-mix(in oklab, var(--yellow), var(--fg) 70%); --yellow-opaque-9: color-mix(in oklab, var(--yellow), var(--fg) 90%); /* /derive:source */ /* Amber scale */ /** * @token-group color-amber * @matches --amber-* * @category color * @role Amber scale (alpha steps 1–9) plus opaque variants pre-mixed against `--bg`/`--fg` */ --amber-1: oklch(from var(--amber) l c h / 0.1); --amber-2: oklch(from var(--amber) l c h / 0.2); --amber-3: oklch(from var(--amber) l c h / 0.3); --amber-4: oklch(from var(--amber) l c h / 0.4); --amber-5: oklch(from var(--amber) l c h / 0.5); --amber-6: oklch(from var(--amber) l c h / 0.6); --amber-7: oklch(from var(--amber) l c h / 0.75); --amber-8: oklch(from var(--amber) l c h / 0.9); --amber-9: var(--amber); /* Amber opaque scale */ /* derive:source */ --amber-opaque-1: color-mix(in oklab, var(--amber), var(--bg) 90%); --amber-opaque-2: color-mix(in oklab, var(--amber), var(--bg) 80%); --amber-opaque-3: color-mix(in oklab, var(--amber), var(--bg) 65%); --amber-opaque-4: color-mix(in oklab, var(--amber), var(--bg) 40%); --amber-opaque-5: var(--amber); --amber-opaque-6: color-mix(in oklab, var(--amber), var(--fg) 30%); --amber-opaque-7: color-mix(in oklab, var(--amber), var(--fg) 50%); --amber-opaque-8: color-mix(in oklab, var(--amber), var(--fg) 70%); --amber-opaque-9: color-mix(in oklab, var(--amber), var(--fg) 90%); /* /derive:source */ /* Orange scale */ /** * @token-group color-orange * @matches --orange-* * @category color * @role Orange scale (alpha steps 1–9) plus opaque variants pre-mixed against `--bg`/`--fg` */ --orange-1: oklch(from var(--orange) l c h / 0.1); --orange-2: oklch(from var(--orange) l c h / 0.2); --orange-3: oklch(from var(--orange) l c h / 0.3); --orange-4: oklch(from var(--orange) l c h / 0.4); --orange-5: oklch(from var(--orange) l c h / 0.5); --orange-6: oklch(from var(--orange) l c h / 0.6); --orange-7: oklch(from var(--orange) l c h / 0.75); --orange-8: oklch(from var(--orange) l c h / 0.9); --orange-9: var(--orange); /* Orange opaque scale */ /* derive:source */ --orange-opaque-1: color-mix(in oklab, var(--orange), var(--bg) 90%); --orange-opaque-2: color-mix(in oklab, var(--orange), var(--bg) 80%); --orange-opaque-3: color-mix(in oklab, var(--orange), var(--bg) 65%); --orange-opaque-4: color-mix(in oklab, var(--orange), var(--bg) 40%); --orange-opaque-5: var(--orange); --orange-opaque-6: color-mix(in oklab, var(--orange), var(--fg) 30%); --orange-opaque-7: color-mix(in oklab, var(--orange), var(--fg) 50%); --orange-opaque-8: color-mix(in oklab, var(--orange), var(--fg) 70%); --orange-opaque-9: color-mix(in oklab, var(--orange), var(--fg) 90%); /* /derive:source */ /* Red scale */ /** * @token-group color-red * @matches --red-* * @category color * @role Red scale (alpha steps 1–9) plus opaque variants; used for `--error` and destructive surfaces */ --red-1: oklch(from var(--red) l c h / 0.1); --red-2: oklch(from var(--red) l c h / 0.2); --red-3: oklch(from var(--red) l c h / 0.3); --red-4: oklch(from var(--red) l c h / 0.4); --red-5: oklch(from var(--red) l c h / 0.5); --red-6: oklch(from var(--red) l c h / 0.6); --red-7: oklch(from var(--red) l c h / 0.75); --red-8: oklch(from var(--red) l c h / 0.9); --red-9: var(--red); /* Red opaque scale */ /* derive:source */ --red-opaque-1: color-mix(in oklab, var(--red), var(--bg) 90%); --red-opaque-2: color-mix(in oklab, var(--red), var(--bg) 80%); --red-opaque-3: color-mix(in oklab, var(--red), var(--bg) 65%); --red-opaque-4: color-mix(in oklab, var(--red), var(--bg) 40%); --red-opaque-5: var(--red); --red-opaque-6: color-mix(in oklab, var(--red), var(--fg) 30%); --red-opaque-7: color-mix(in oklab, var(--red), var(--fg) 50%); --red-opaque-8: color-mix(in oklab, var(--red), var(--fg) 70%); --red-opaque-9: color-mix(in oklab, var(--red), var(--fg) 90%); /* /derive:source */ /* Pink scale */ /** * @token-group color-pink * @matches --pink-* * @category color * @role Pink scale (alpha steps 1–9) plus opaque variants pre-mixed against `--bg`/`--fg` */ --pink-1: oklch(from var(--pink) l c h / 0.1); --pink-2: oklch(from var(--pink) l c h / 0.2); --pink-3: oklch(from var(--pink) l c h / 0.3); --pink-4: oklch(from var(--pink) l c h / 0.4); --pink-5: oklch(from var(--pink) l c h / 0.5); --pink-6: oklch(from var(--pink) l c h / 0.6); --pink-7: oklch(from var(--pink) l c h / 0.75); --pink-8: oklch(from var(--pink) l c h / 0.9); --pink-9: var(--pink); /* Pink opaque scale */ /* derive:source */ --pink-opaque-1: color-mix(in oklab, var(--pink), var(--bg) 90%); --pink-opaque-2: color-mix(in oklab, var(--pink), var(--bg) 80%); --pink-opaque-3: color-mix(in oklab, var(--pink), var(--bg) 65%); --pink-opaque-4: color-mix(in oklab, var(--pink), var(--bg) 40%); --pink-opaque-5: var(--pink); --pink-opaque-6: color-mix(in oklab, var(--pink), var(--fg) 30%); --pink-opaque-7: color-mix(in oklab, var(--pink), var(--fg) 50%); --pink-opaque-8: color-mix(in oklab, var(--pink), var(--fg) 70%); --pink-opaque-9: color-mix(in oklab, var(--pink), var(--fg) 90%); /* /derive:source */ /* Purple scale */ /** * @token-group color-purple * @matches --purple-1, --purple-2, --purple-3, --purple-4, --purple-5, --purple-6, --purple-7, --purple-8, --purple-9, --purple-opaque-* * @category color * @role Purple scale (alpha steps 1–9) plus opaque variants; distinct from `--purple-deep-*` */ --purple-1: oklch(from var(--purple) l c h / 0.1); --purple-2: oklch(from var(--purple) l c h / 0.2); --purple-3: oklch(from var(--purple) l c h / 0.3); --purple-4: oklch(from var(--purple) l c h / 0.4); --purple-5: oklch(from var(--purple) l c h / 0.5); --purple-6: oklch(from var(--purple) l c h / 0.6); --purple-7: oklch(from var(--purple) l c h / 0.75); --purple-8: oklch(from var(--purple) l c h / 0.9); --purple-9: var(--purple); /* Purple opaque scale */ /* derive:source */ --purple-opaque-1: color-mix(in oklab, var(--purple), var(--bg) 90%); --purple-opaque-2: color-mix(in oklab, var(--purple), var(--bg) 80%); --purple-opaque-3: color-mix(in oklab, var(--purple), var(--bg) 65%); --purple-opaque-4: color-mix(in oklab, var(--purple), var(--bg) 40%); --purple-opaque-5: var(--purple); --purple-opaque-6: color-mix(in oklab, var(--purple), var(--fg) 30%); --purple-opaque-7: color-mix(in oklab, var(--purple), var(--fg) 50%); --purple-opaque-8: color-mix(in oklab, var(--purple), var(--fg) 70%); --purple-opaque-9: color-mix(in oklab, var(--purple), var(--fg) 90%); /* /derive:source */ /* Purple deep scale */ /** * @token-group color-purple-deep * @matches --purple-deep, --purple-deep-* * @category color * @role Deeper purple than `--purple` for high-contrast UI; includes base hue plus alpha + opaque scales */ --purple-deep: #1b1525; --purple-deep-1: oklch(from var(--purple-deep) l c h / 0.1); --purple-deep-2: oklch(from var(--purple-deep) l c h / 0.2); --purple-deep-3: oklch(from var(--purple-deep) l c h / 0.3); --purple-deep-4: oklch(from var(--purple-deep) l c h / 0.4); --purple-deep-5: oklch(from var(--purple-deep) l c h / 0.5); --purple-deep-6: oklch(from var(--purple-deep) l c h / 0.6); --purple-deep-7: oklch(from var(--purple-deep) l c h / 0.75); --purple-deep-8: oklch(from var(--purple-deep) l c h / 0.9); --purple-deep-9: var(--purple-deep); /* Purple Deep opaque scale */ /* derive:source */ --purple-deep-opaque-1: color-mix( in oklab, var(--purple-deep), var(--bg) 90% ); --purple-deep-opaque-2: color-mix( in oklab, var(--purple-deep), var(--bg) 80% ); --purple-deep-opaque-3: color-mix( in oklab, var(--purple-deep), var(--bg) 65% ); --purple-deep-opaque-4: color-mix( in oklab, var(--purple-deep), var(--bg) 40% ); --purple-deep-opaque-5: var(--purple-deep); --purple-deep-opaque-6: color-mix( in oklab, var(--purple-deep), var(--fg) 30% ); --purple-deep-opaque-7: color-mix( in oklab, var(--purple-deep), var(--fg) 50% ); --purple-deep-opaque-8: color-mix( in oklab, var(--purple-deep), var(--fg) 70% ); --purple-deep-opaque-9: color-mix( in oklab, var(--purple-deep), var(--fg) 90% ); /* /derive:source */ /* Indigo scale */ /** * @token-group color-indigo * @matches --indigo-* * @category color * @role Indigo scale (alpha steps 1–9) plus opaque variants pre-mixed against `--bg`/`--fg` */ --indigo-1: oklch(from var(--indigo) l c h / 0.1); --indigo-2: oklch(from var(--indigo) l c h / 0.2); --indigo-3: oklch(from var(--indigo) l c h / 0.3); --indigo-4: oklch(from var(--indigo) l c h / 0.4); --indigo-5: oklch(from var(--indigo) l c h / 0.5); --indigo-6: oklch(from var(--indigo) l c h / 0.6); --indigo-7: oklch(from var(--indigo) l c h / 0.75); --indigo-8: oklch(from var(--indigo) l c h / 0.9); --indigo-9: var(--indigo); /* Indigo opaque scale */ /* derive:source */ --indigo-opaque-1: color-mix(in oklab, var(--indigo), var(--bg) 90%); --indigo-opaque-2: color-mix(in oklab, var(--indigo), var(--bg) 80%); --indigo-opaque-3: color-mix(in oklab, var(--indigo), var(--bg) 65%); --indigo-opaque-4: color-mix(in oklab, var(--indigo), var(--bg) 40%); --indigo-opaque-5: var(--indigo); --indigo-opaque-6: color-mix(in oklab, var(--indigo), var(--fg) 30%); --indigo-opaque-7: color-mix(in oklab, var(--indigo), var(--fg) 50%); --indigo-opaque-8: color-mix(in oklab, var(--indigo), var(--fg) 70%); --indigo-opaque-9: color-mix(in oklab, var(--indigo), var(--fg) 90%); /* /derive:source */ /* Green scale */ /** * @token-group color-green * @matches --green-* * @category color * @role Green scale (alpha steps 1–9) plus opaque variants; used for `--success` and confirmation surfaces */ --green-1: oklch(from var(--green) l c h / 0.1); --green-2: oklch(from var(--green) l c h / 0.2); --green-3: oklch(from var(--green) l c h / 0.3); --green-4: oklch(from var(--green) l c h / 0.4); --green-5: oklch(from var(--green) l c h / 0.5); --green-6: oklch(from var(--green) l c h / 0.6); --green-7: oklch(from var(--green) l c h / 0.75); --green-8: oklch(from var(--green) l c h / 0.9); --green-9: var(--green); /* Green opaque scale */ /* derive:source */ --green-opaque-1: color-mix(in oklab, var(--green), var(--bg) 90%); --green-opaque-2: color-mix(in oklab, var(--green), var(--bg) 80%); --green-opaque-3: color-mix(in oklab, var(--green), var(--bg) 65%); --green-opaque-4: color-mix(in oklab, var(--green), var(--bg) 40%); --green-opaque-5: var(--green); --green-opaque-6: color-mix(in oklab, var(--green), var(--fg) 30%); --green-opaque-7: color-mix(in oklab, var(--green), var(--fg) 50%); --green-opaque-8: color-mix(in oklab, var(--green), var(--fg) 70%); --green-opaque-9: color-mix(in oklab, var(--green), var(--fg) 90%); /* /derive:source */ /* Lime scale */ /** * @token-group color-lime * @matches --lime-* * @category color * @role Lime scale (alpha steps 1–9) plus opaque variants pre-mixed against `--bg`/`--fg` */ --lime-1: oklch(from var(--lime) l c h / 0.1); --lime-2: oklch(from var(--lime) l c h / 0.2); --lime-3: oklch(from var(--lime) l c h / 0.3); --lime-4: oklch(from var(--lime) l c h / 0.4); --lime-5: oklch(from var(--lime) l c h / 0.5); --lime-6: oklch(from var(--lime) l c h / 0.6); --lime-7: oklch(from var(--lime) l c h / 0.75); --lime-8: oklch(from var(--lime) l c h / 0.9); --lime-9: var(--lime); /* Lime opaque scale */ /* derive:source */ --lime-opaque-1: color-mix(in oklab, var(--lime), var(--bg) 90%); --lime-opaque-2: color-mix(in oklab, var(--lime), var(--bg) 80%); --lime-opaque-3: color-mix(in oklab, var(--lime), var(--bg) 65%); --lime-opaque-4: color-mix(in oklab, var(--lime), var(--bg) 40%); --lime-opaque-5: var(--lime); --lime-opaque-6: color-mix(in oklab, var(--lime), var(--fg) 30%); --lime-opaque-7: color-mix(in oklab, var(--lime), var(--fg) 50%); --lime-opaque-8: color-mix(in oklab, var(--lime), var(--fg) 70%); --lime-opaque-9: color-mix(in oklab, var(--lime), var(--fg) 90%); /* /derive:source */ /* Highlighter scale */ /** * @token-group color-highlighter * @matches --highlighter-* * @category color * @role Highlighter scale (alpha steps 1–9) plus opaque variants; loud yellow-green for emphasis and selection */ --highlighter-1: oklch(from var(--highlighter) l c h / 0.1); --highlighter-2: oklch(from var(--highlighter) l c h / 0.2); --highlighter-3: oklch(from var(--highlighter) l c h / 0.3); --highlighter-4: oklch(from var(--highlighter) l c h / 0.4); --highlighter-5: oklch(from var(--highlighter) l c h / 0.5); --highlighter-6: oklch(from var(--highlighter) l c h / 0.6); --highlighter-7: oklch(from var(--highlighter) l c h / 0.75); --highlighter-8: oklch(from var(--highlighter) l c h / 0.9); --highlighter-9: var(--highlighter); /* Highlighter opaque scale */ /* derive:source */ --highlighter-opaque-1: color-mix( in oklab, var(--highlighter), var(--bg) 90% ); --highlighter-opaque-2: color-mix( in oklab, var(--highlighter), var(--bg) 80% ); --highlighter-opaque-3: color-mix( in oklab, var(--highlighter), var(--bg) 65% ); --highlighter-opaque-4: color-mix( in oklab, var(--highlighter), var(--bg) 40% ); --highlighter-opaque-5: var(--highlighter); --highlighter-opaque-6: color-mix( in oklab, var(--highlighter), var(--fg) 30% ); --highlighter-opaque-7: color-mix( in oklab, var(--highlighter), var(--fg) 50% ); --highlighter-opaque-8: color-mix( in oklab, var(--highlighter), var(--fg) 70% ); --highlighter-opaque-9: color-mix( in oklab, var(--highlighter), var(--fg) 90% ); /* /derive:source */ /* Brown scale */ /** * @token-group color-brown * @matches --brown-* * @category color * @role Brown scale (alpha steps 1–9) plus opaque variants pre-mixed against `--bg`/`--fg` */ --brown-1: oklch(from var(--brown) l c h / 0.1); --brown-2: oklch(from var(--brown) l c h / 0.2); --brown-3: oklch(from var(--brown) l c h / 0.3); --brown-4: oklch(from var(--brown) l c h / 0.4); --brown-5: oklch(from var(--brown) l c h / 0.5); --brown-6: oklch(from var(--brown) l c h / 0.6); --brown-7: oklch(from var(--brown) l c h / 0.75); --brown-8: oklch(from var(--brown) l c h / 0.9); --brown-9: var(--brown); /* Brown opaque scale */ /* derive:source */ --brown-opaque-1: color-mix(in oklab, var(--brown), var(--bg) 90%); --brown-opaque-2: color-mix(in oklab, var(--brown), var(--bg) 80%); --brown-opaque-3: color-mix(in oklab, var(--brown), var(--bg) 65%); --brown-opaque-4: color-mix(in oklab, var(--brown), var(--bg) 40%); --brown-opaque-5: var(--brown); --brown-opaque-6: color-mix(in oklab, var(--brown), var(--fg) 30%); --brown-opaque-7: color-mix(in oklab, var(--brown), var(--fg) 50%); --brown-opaque-8: color-mix(in oklab, var(--brown), var(--fg) 70%); --brown-opaque-9: color-mix(in oklab, var(--brown), var(--fg) 90%); /* /derive:source */ /* Teal scale */ /** * @token-group color-teal * @matches --teal-* * @category color * @role Teal scale (alpha steps 1–9) plus opaque variants pre-mixed against `--bg`/`--fg` */ --teal-1: oklch(from var(--teal) l c h / 0.1); --teal-2: oklch(from var(--teal) l c h / 0.2); --teal-3: oklch(from var(--teal) l c h / 0.3); --teal-4: oklch(from var(--teal) l c h / 0.4); --teal-5: oklch(from var(--teal) l c h / 0.5); --teal-6: oklch(from var(--teal) l c h / 0.6); --teal-7: oklch(from var(--teal) l c h / 0.75); --teal-8: oklch(from var(--teal) l c h / 0.9); --teal-9: var(--teal); /* Teal opaque scale */ /* derive:source */ --teal-opaque-1: color-mix(in oklab, var(--teal), var(--bg) 90%); --teal-opaque-2: color-mix(in oklab, var(--teal), var(--bg) 80%); --teal-opaque-3: color-mix(in oklab, var(--teal), var(--bg) 65%); --teal-opaque-4: color-mix(in oklab, var(--teal), var(--bg) 40%); --teal-opaque-5: var(--teal); --teal-opaque-6: color-mix(in oklab, var(--teal), var(--fg) 30%); --teal-opaque-7: color-mix(in oklab, var(--teal), var(--fg) 50%); --teal-opaque-8: color-mix(in oklab, var(--teal), var(--fg) 70%); --teal-opaque-9: color-mix(in oklab, var(--teal), var(--fg) 90%); /* /derive:source */ /* Blue scale */ /** * @token-group color-blue * @matches --blue-* * @category color * @role Blue scale (alpha steps 1–9) plus opaque variants; default source for `--primary` */ --blue-1: oklch(from var(--blue) l c h / 0.1); --blue-2: oklch(from var(--blue) l c h / 0.2); --blue-3: oklch(from var(--blue) l c h / 0.3); --blue-4: oklch(from var(--blue) l c h / 0.4); --blue-5: oklch(from var(--blue) l c h / 0.5); --blue-6: oklch(from var(--blue) l c h / 0.6); --blue-7: oklch(from var(--blue) l c h / 0.75); --blue-8: oklch(from var(--blue) l c h / 0.9); --blue-9: var(--blue); /* Blue opaque scale */ /* derive:source */ --blue-opaque-1: color-mix(in oklab, var(--blue), var(--bg) 90%); --blue-opaque-2: color-mix(in oklab, var(--blue), var(--bg) 80%); --blue-opaque-3: color-mix(in oklab, var(--blue), var(--bg) 65%); --blue-opaque-4: color-mix(in oklab, var(--blue), var(--bg) 40%); --blue-opaque-5: var(--blue); --blue-opaque-6: color-mix(in oklab, var(--blue), var(--fg) 30%); --blue-opaque-7: color-mix(in oklab, var(--blue), var(--fg) 50%); --blue-opaque-8: color-mix(in oklab, var(--blue), var(--fg) 70%); --blue-opaque-9: color-mix(in oklab, var(--blue), var(--fg) 90%); /* /derive:source */ /* Neutral gray scale */ /** * @token-group color-gray * @matches --gray, --slate, --gray-* * @category color * @role Neutral gray scale plus the `--gray` and `--slate` hue anchors; backbone for UI chrome and disabled states */ --gray: oklch(0.5 0.02 270); --slate: oklch(0.52 0.04 255); --gray-1: oklch(from var(--gray) l c h / 0.1); --gray-2: oklch(from var(--gray) l c h / 0.2); --gray-3: oklch(from var(--gray) l c h / 0.3); --gray-4: oklch(from var(--gray) l c h / 0.4); --gray-5: oklch(from var(--gray) l c h / 0.5); --gray-6: oklch(from var(--gray) l c h / 0.6); --gray-7: oklch(from var(--gray) l c h / 0.75); --gray-8: oklch(from var(--gray) l c h / 0.9); --gray-9: var(--gray); /* Gray opaque scale */ /* derive:source */ --gray-opaque-1: color-mix(in oklab, var(--gray), var(--bg) 90%); --gray-opaque-2: color-mix(in oklab, var(--gray), var(--bg) 80%); --gray-opaque-3: color-mix(in oklab, var(--gray), var(--bg) 65%); --gray-opaque-4: color-mix(in oklab, var(--gray), var(--bg) 40%); --gray-opaque-5: var(--gray); --gray-opaque-6: color-mix(in oklab, var(--gray), var(--fg) 30%); --gray-opaque-7: color-mix(in oklab, var(--gray), var(--fg) 50%); --gray-opaque-8: color-mix(in oklab, var(--gray), var(--fg) 70%); --gray-opaque-9: color-mix(in oklab, var(--gray), var(--fg) 90%); /* /derive:source */ /* Slate scale */ /** * @token-group color-slate * @matches --slate-* * @category color * @role Slate scale (alpha steps 1–9) plus opaque variants; cooler neutral alternative to `--gray-*` */ --slate-1: oklch(from var(--slate) l c h / 0.1); --slate-2: oklch(from var(--slate) l c h / 0.2); --slate-3: oklch(from var(--slate) l c h / 0.3); --slate-4: oklch(from var(--slate) l c h / 0.4); --slate-5: oklch(from var(--slate) l c h / 0.5); --slate-6: oklch(from var(--slate) l c h / 0.6); --slate-7: oklch(from var(--slate) l c h / 0.75); --slate-8: oklch(from var(--slate) l c h / 0.9); --slate-9: var(--slate); /* Slate opaque scale */ /* derive:source */ --slate-opaque-1: color-mix(in oklab, var(--slate), var(--bg) 90%); --slate-opaque-2: color-mix(in oklab, var(--slate), var(--bg) 80%); --slate-opaque-3: color-mix(in oklab, var(--slate), var(--bg) 65%); --slate-opaque-4: color-mix(in oklab, var(--slate), var(--bg) 40%); --slate-opaque-5: var(--slate); --slate-opaque-6: color-mix(in oklab, var(--slate), var(--fg) 30%); --slate-opaque-7: color-mix(in oklab, var(--slate), var(--fg) 50%); --slate-opaque-8: color-mix(in oklab, var(--slate), var(--fg) 70%); --slate-opaque-9: color-mix(in oklab, var(--slate), var(--fg) 90%); /* /derive:source */ /* White - Static color (does not change with light/dark mode) */ /** * @token-group color-white * @matches --white, --white-* * @category color * @role Pure white anchor plus alpha + opaque scales; static across light/dark theme (does NOT swap) */ --white: oklch(1 0 0); --white-05: oklch(from var(--white) l c h / 0.05); --white-1: oklch(from var(--white) l c h / 0.1); --white-2: oklch(from var(--white) l c h / 0.2); --white-3: oklch(from var(--white) l c h / 0.3); --white-4: oklch(from var(--white) l c h / 0.4); --white-5: oklch(from var(--white) l c h / 0.5); --white-6: oklch(from var(--white) l c h / 0.6); --white-7: oklch(from var(--white) l c h / 0.75); --white-8: oklch(from var(--white) l c h / 0.9); --white-9: var(--white); /* White opaque scale */ /* derive:source */ --white-opaque-1: color-mix(in oklab, var(--white), var(--bg) 90%); --white-opaque-2: color-mix(in oklab, var(--white), var(--bg) 80%); --white-opaque-3: color-mix(in oklab, var(--white), var(--bg) 65%); --white-opaque-4: color-mix(in oklab, var(--white), var(--bg) 40%); --white-opaque-5: var(--white); --white-opaque-6: color-mix(in oklab, var(--white), var(--fg) 30%); --white-opaque-7: color-mix(in oklab, var(--white), var(--fg) 50%); --white-opaque-8: color-mix(in oklab, var(--white), var(--fg) 70%); --white-opaque-9: color-mix(in oklab, var(--white), var(--fg) 90%); /* /derive:source */ /* Black - Static color (does not change with light/dark mode) */ /** * @token-group color-black * @matches --black, --black-* * @category color * @role Pure black anchor plus alpha + opaque scales; static across light/dark theme (does NOT swap) */ --black: oklch(0 0 0); --black-05: oklch(from var(--black) l c h / 0.05); --black-1: oklch(from var(--black) l c h / 0.1); --black-2: oklch(from var(--black) l c h / 0.2); --black-3: oklch(from var(--black) l c h / 0.3); --black-4: oklch(from var(--black) l c h / 0.4); --black-5: oklch(from var(--black) l c h / 0.5); --black-6: oklch(from var(--black) l c h / 0.6); --black-7: oklch(from var(--black) l c h / 0.75); --black-8: oklch(from var(--black) l c h / 0.9); --black-9: var(--black); /* Black opaque scale */ /* derive:source */ --black-opaque-1: color-mix(in oklab, var(--black), var(--bg) 90%); --black-opaque-2: color-mix(in oklab, var(--black), var(--bg) 80%); --black-opaque-3: color-mix(in oklab, var(--black), var(--bg) 65%); --black-opaque-4: color-mix(in oklab, var(--black), var(--bg) 40%); --black-opaque-5: var(--black); --black-opaque-6: color-mix(in oklab, var(--black), var(--fg) 30%); --black-opaque-7: color-mix(in oklab, var(--black), var(--fg) 50%); --black-opaque-8: color-mix(in oklab, var(--black), var(--fg) 70%); --black-opaque-9: color-mix(in oklab, var(--black), var(--fg) 90%); /* /derive:source */ /* Foreground / background literals */ /** * @token-group fg-bg-literals * @matches --fg-light, --fg-dark, --bg-light, --bg-dark * @category color * @role Literal light/dark text and surface anchors used by `light-dark()` to compute `--fg` and `--bg` */ --fg-light: #050505; --fg-dark: #fff; --bg-light: #fff; --bg-dark: #050505; /* Easing Tokens - Using linear() for modern, natural motion */ /** * @token-group easing * @matches --ease-* * @category motion * @role Easing curves expressed with `linear()` for natural motion; choose smooth for UI, bounce for affordances, emphasized for hero transitions */ --ease-smooth: linear( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%, 0.1407, 0.25, 0.3908, 0.5625, 0.7654, 1 ); --ease-bounce: linear( 0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141, 0.191, 0.25, 0.316, 0.391 36.36%, 0.563, 0.766, 1 54.55%, 0.946, 0.908 72.73%, 0.953, 1, 0.994, 0.998, 1 ); --ease-emphasized: linear( 0, 0.0038, 0.0155, 0.0352, 0.0625 9%, 0.1407, 0.25 18%, 0.5625 36%, 0.7655 45%, 1 ); /* Duration Tokens - Semantic motion scale, see docs/adr/0008 */ /** * @token-group duration * @matches --d-* * @category motion * @role Semantic motion duration scale; reach for these instead of raw seconds so motion feels consistent across components. See docs/adr/0008. * @scale instant, fast, base, slow, emphatic */ --d-instant: 0.1s; --d-fast: 0.15s; --d-base: 0.2s; --d-slow: 0.3s; --d-emphatic: 0.4s; /* Z-Index Tokens - Stacking tier vocabulary, see docs/adr/0008 */ /** * @token-group z-index * @matches --z-* * @category z-index * @role Stacking-context vocabulary; pick by purpose (overlay, sticky, modal, toast), not by raw number. See docs/adr/0008. * @scale base, raised, overlay, sticky, modal, toast */ --z-base: 0; --z-raised: 1; --z-overlay: 10; --z-sticky: 100; --z-modal: 200; --z-toast: 300; /* ===================================================================== * Tier 2: Semantic tokens — purpose-bound, consume tier 1 * What components should reference. Override these to change UI semantics * without touching color literals. * ===================================================================== */ /* Theme-resolved fg/bg */ /** * @token-group color-fg * @matches --fg, --fg-05, --fg-1, --fg-2, --fg-3, --fg-4, --fg-5, --fg-6, --fg-7, --fg-8, --fg-9, --fg-opaque-* * @category color * @role Foreground (text + icon) semantic color; resolves to light or dark via `light-dark()`. Use `--fg-N` for muted/secondary text and borders, `--fg-opaque-N` when transparency would composite poorly. */ --fg: light-dark(var(--fg-light), var(--fg-dark)); /* derive:source */ --fg-05: oklch(from var(--fg) l c h / 0.05); --fg-1: oklch(from var(--fg) l c h / 0.1); --fg-2: oklch(from var(--fg) l c h / 0.2); --fg-3: oklch(from var(--fg) l c h / 0.3); --fg-4: oklch(from var(--fg) l c h / 0.4); --fg-5: oklch(from var(--fg) l c h / 0.5); --fg-6: oklch(from var(--fg) l c h / 0.6); --fg-7: oklch(from var(--fg) l c h / 0.75); --fg-8: oklch(from var(--fg) l c h / 0.9); --fg-9: var(--fg); /* /derive:source */ /* Fg opaque scale */ /* derive:source */ --fg-opaque-1: color-mix(in oklab, var(--fg), var(--bg) 90%); --fg-opaque-2: color-mix(in oklab, var(--fg), var(--bg) 80%); --fg-opaque-3: color-mix(in oklab, var(--fg), var(--bg) 65%); --fg-opaque-4: color-mix(in oklab, var(--fg), var(--bg) 40%); --fg-opaque-5: var(--fg); --fg-opaque-6: color-mix(in oklab, var(--fg), var(--fg) 30%); --fg-opaque-7: color-mix(in oklab, var(--fg), var(--fg) 50%); --fg-opaque-8: color-mix(in oklab, var(--fg), var(--fg) 70%); --fg-opaque-9: color-mix(in oklab, var(--fg), var(--fg) 90%); /* /derive:source */ /** * @token-group color-bg * @matches --bg, --bg-05, --bg-1, --bg-2, --bg-3, --bg-4, --bg-5, --bg-6, --bg-7, --bg-8, --bg-9, --bg-opaque-* * @category color * @role Background (surface) semantic color; resolves to light or dark via `light-dark()`. Use `--bg-N` for layered surface depth, `--bg-opaque-N` when stacking against transparency-sensitive content. */ --bg: light-dark(var(--bg-light), var(--bg-dark)); /* derive:source */ --bg-05: oklch(from var(--bg) l c h / 0.05); --bg-1: oklch(from var(--bg) l c h / 0.1); --bg-2: oklch(from var(--bg) l c h / 0.2); --bg-3: oklch(from var(--bg) l c h / 0.3); --bg-4: oklch(from var(--bg) l c h / 0.4); --bg-5: oklch(from var(--bg) l c h / 0.5); --bg-6: oklch(from var(--bg) l c h / 0.6); --bg-7: oklch(from var(--bg) l c h / 0.75); --bg-8: oklch(from var(--bg) l c h / 0.9); --bg-9: var(--bg); /* /derive:source */ /* Bg opaque scale */ /* derive:source */ --bg-opaque-1: color-mix(in oklab, var(--bg), var(--bg) 90%); --bg-opaque-2: color-mix(in oklab, var(--bg), var(--bg) 80%); --bg-opaque-3: color-mix(in oklab, var(--bg), var(--bg) 65%); --bg-opaque-4: color-mix(in oklab, var(--bg), var(--bg) 40%); --bg-opaque-5: var(--bg); --bg-opaque-6: color-mix(in oklab, var(--bg), var(--fg) 30%); --bg-opaque-7: color-mix(in oklab, var(--bg), var(--fg) 50%); --bg-opaque-8: color-mix(in oklab, var(--bg), var(--fg) 70%); --bg-opaque-9: color-mix(in oklab, var(--bg), var(--fg) 90%); /* /derive:source */ /* Status colors */ /** * @token-group status-colors * @matches --primary, --accent, --error, --warning, --success * @category color * @role Semantic role colors that derive scales (`--primary-*`, `--error-*`, etc.); rethemes follow when you reassign these */ --primary: var(--blue); --accent: var(--primary); --error: var(--red); --warning: var(--yellow); --success: var(--green); /* Primary scale */ /** * @token-group color-primary * @matches --primary-* * @category color * @role Alpha (1–9) and opaque scales derived from `--primary`; reach for these on accent surfaces and CTAs */ /* derive:source */ --primary-1: oklch(from var(--primary) l c h / 0.1); --primary-2: oklch(from var(--primary) l c h / 0.2); --primary-3: oklch(from var(--primary) l c h / 0.3); --primary-4: oklch(from var(--primary) l c h / 0.4); --primary-5: oklch(from var(--primary) l c h / 0.5); --primary-6: oklch(from var(--primary) l c h / 0.6); --primary-7: oklch(from var(--primary) l c h / 0.75); --primary-8: oklch(from var(--primary) l c h / 0.9); --primary-9: var(--primary); /* /derive:source */ /* Primary opaque scale */ /* derive:source */ --primary-opaque-1: color-mix(in oklab, var(--primary), var(--bg) 90%); --primary-opaque-2: color-mix(in oklab, var(--primary), var(--bg) 80%); --primary-opaque-3: color-mix(in oklab, var(--primary), var(--bg) 65%); --primary-opaque-4: color-mix(in oklab, var(--primary), var(--bg) 40%); --primary-opaque-5: var(--primary); --primary-opaque-6: color-mix(in oklab, var(--primary), var(--fg) 30%); --primary-opaque-7: color-mix(in oklab, var(--primary), var(--fg) 50%); --primary-opaque-8: color-mix(in oklab, var(--primary), var(--fg) 70%); --primary-opaque-9: color-mix(in oklab, var(--primary), var(--fg) 90%); /* /derive:source */ /* Error scale */ /** * @token-group color-error * @matches --error-* * @category color * @role Alpha (1–9) and opaque scales derived from `--error`; use for destructive actions and validation surfaces */ /* derive:source */ --error-1: oklch(from var(--error) l c h / 0.1); --error-2: oklch(from var(--error) l c h / 0.2); --error-3: oklch(from var(--error) l c h / 0.3); --error-4: oklch(from var(--error) l c h / 0.4); --error-5: oklch(from var(--error) l c h / 0.5); --error-6: oklch(from var(--error) l c h / 0.6); --error-7: oklch(from var(--error) l c h / 0.75); --error-8: oklch(from var(--error) l c h / 0.9); --error-9: var(--error); /* /derive:source */ /* Error opaque scale */ /* derive:source */ --error-opaque-1: color-mix(in oklab, var(--error), var(--bg) 90%); --error-opaque-2: color-mix(in oklab, var(--error), var(--bg) 80%); --error-opaque-3: color-mix(in oklab, var(--error), var(--bg) 65%); --error-opaque-4: color-mix(in oklab, var(--error), var(--bg) 40%); --error-opaque-5: var(--error); --error-opaque-6: color-mix(in oklab, var(--error), var(--fg) 30%); --error-opaque-7: color-mix(in oklab, var(--error), var(--fg) 50%); --error-opaque-8: color-mix(in oklab, var(--error), var(--fg) 70%); --error-opaque-9: color-mix(in oklab, var(--error), var(--fg) 90%); /* /derive:source */ /* Warning scale */ /** * @token-group color-warning * @matches --warning-* * @category color * @role Alpha (1–9) and opaque scales derived from `--warning`; use for caution states that aren't destructive */ /* derive:source */ --warning-1: oklch(from var(--warning) l c h / 0.1); --warning-2: oklch(from var(--warning) l c h / 0.2); --warning-3: oklch(from var(--warning) l c h / 0.3); --warning-4: oklch(from var(--warning) l c h / 0.4); --warning-5: oklch(from var(--warning) l c h / 0.5); --warning-6: oklch(from var(--warning) l c h / 0.6); --warning-7: oklch(from var(--warning) l c h / 0.75); --warning-8: oklch(from var(--warning) l c h / 0.9); --warning-9: var(--warning); /* /derive:source */ /* Warning opaque scale */ /* derive:source */ --warning-opaque-1: color-mix(in oklab, var(--warning), var(--bg) 90%); --warning-opaque-2: color-mix(in oklab, var(--warning), var(--bg) 80%); --warning-opaque-3: color-mix(in oklab, var(--warning), var(--bg) 65%); --warning-opaque-4: color-mix(in oklab, var(--warning), var(--bg) 40%); --warning-opaque-5: var(--warning); --warning-opaque-6: color-mix(in oklab, var(--warning), var(--fg) 30%); --warning-opaque-7: color-mix(in oklab, var(--warning), var(--fg) 50%); --warning-opaque-8: color-mix(in oklab, var(--warning), var(--fg) 70%); --warning-opaque-9: color-mix(in oklab, var(--warning), var(--fg) 90%); /* /derive:source */ /* Success scale */ /** * @token-group color-success * @matches --success-* * @category color * @role Alpha (1–9) and opaque scales derived from `--success`; use for confirmation and positive feedback surfaces */ /* derive:source */ --success-1: oklch(from var(--success) l c h / 0.1); --success-2: oklch(from var(--success) l c h / 0.2); --success-3: oklch(from var(--success) l c h / 0.3); --success-4: oklch(from var(--success) l c h / 0.4); --success-5: oklch(from var(--success) l c h / 0.5); --success-6: oklch(from var(--success) l c h / 0.6); --success-7: oklch(from var(--success) l c h / 0.75); --success-8: oklch(from var(--success) l c h / 0.9); --success-9: var(--success); /* /derive:source */ /* Success opaque scale */ /* derive:source */ --success-opaque-1: color-mix(in oklab, var(--success), var(--bg) 90%); --success-opaque-2: color-mix(in oklab, var(--success), var(--bg) 80%); --success-opaque-3: color-mix(in oklab, var(--success), var(--bg) 65%); --success-opaque-4: color-mix(in oklab, var(--success), var(--bg) 40%); --success-opaque-5: var(--success); --success-opaque-6: color-mix(in oklab, var(--success), var(--fg) 30%); --success-opaque-7: color-mix(in oklab, var(--success), var(--fg) 50%); --success-opaque-8: color-mix(in oklab, var(--success), var(--fg) 70%); --success-opaque-9: color-mix(in oklab, var(--success), var(--fg) 90%); /* /derive:source */ /* UI primitives */ /* Shadows */ /** * @token-group shadows * @matches --shadow-* * @category shadow * @role Elevation shadow ramp; pick by stacking order (`1` = subtle inline, `6` = drawn-up overlay), each step uses `light-dark()` so the shadow stays visible in dark mode */ --shadow-1: 0 0 1px 0.5px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.5)), 0 2px 2px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.3)); --shadow-2: 0 1px 1px 2px light-dark(rgb(0 0 0 / 0.03), rgb(0 0 0 / 0.6)), 0 4px 4px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); --shadow-3: 0 2px 4px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.65)), 0 4px 8px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.45)); --shadow-4: 0 4px 8px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.7)), 0 8px 16px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.5)); --shadow-5: 0 8px 16px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.75)), 0 12px 24px light-dark(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.55)); --shadow-6: 0 12px 24px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.8)), 0 16px 32px light-dark(rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.6)), 0 24px 48px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.5)); /** * @token --box * @category shadow * @role Composite shadow for the `.box` pattern; soft inset highlight + tiny drop, designed to read as paper rather than elevated surface */ --box: 0 1px 2px rgb(0 0 0 / 0.04), inset -1px 1px 2px rgb(255 255 255 / 0.1), inset 1px 1px 2px rgb(255 255 255 / 0.1); /* Border Tokens */ /** * @token-group borders * @matches --border-* * @category border * @role Pre-composed `border` shorthand tokens (style + width + `--fg`-derived color); set `border: var(--border-2)` instead of stacking width and color manually */ --border-05: solid 1px var(--fg-05); --border-1: solid 1px var(--fg-2); --border-2: solid 2px var(--fg-2); --border-3: solid 3px var(--fg-2); --border-4: solid 4px var(--fg-2); --border-5: solid 5px var(--fg-2); /* Focus ring tokens — consumed by base, components, and utilities */ /** * @token-group focus-ring * @matches --focus-ring, --focus-ring-offset, --focus-ring-offset-inset * @category border * @role Outline + offset values for `:focus-visible`; consumed by every interactive surface so the focus indicator stays consistent (use `--focus-ring-offset-inset` when the element clips its outline) */ --focus-ring: 2px solid var(--fg); --focus-ring-offset: 2px; --focus-ring-offset-inset: -2px; /** * @token --l * @category color * @role Auto-contrast lightness helper used by `auto-color` to flip text between dark and light against `currentColor`; do not set directly */ /* Automatic contrast helper */ --l: clamp(0, (l / var(--l-threshold, 0.623) - 1) * -infinity, 1); color-scheme: light dark; @media (forced-colors: active) { --fg: CanvasText; --bg: Canvas; --primary: LinkText; --accent: LinkText; --error: Mark; --warning: Mark; --success: LinkText; --focus-ring: 2px solid CanvasText; --border-1: solid 1px CanvasText; --border-2: solid 2px CanvasText; --border-3: solid 3px CanvasText; --border-4: solid 4px CanvasText; --border-5: solid 5px CanvasText; --border-05: solid 1px GrayText; /* Shadows can't survive forced-colors anyway (background-image stripped), so override to none so components don't rely on them */ --shadow-1: none; --shadow-2: none; --shadow-3: none; --shadow-4: none; --shadow-5: none; --shadow-6: none; --box: none; } } /* Re-derive alpha scales for theme-scoped containers (ADR-0006). `oklch(from var(--X) ...)` resolves where it is declared; without restating the derivations here, overriding `--primary` (etc.) on a descendant would inherit the stale `:root` scale. Matching `theme-*` as a class fragment makes every preset (current or future) implicitly a theme scope without an allowlist to keep in sync. `:where()` keeps specificity at 0 so consumer overrides still win. */ :where([class*="theme-"]) { --fg: light-dark(var(--fg-light), var(--fg-dark)); --bg: light-dark(var(--bg-light), var(--bg-dark)); /* derive:mirror */ --yellow-opaque-1: color-mix(in oklab, var(--yellow), var(--bg) 90%); --yellow-opaque-2: color-mix(in oklab, var(--yellow), var(--bg) 80%); --yellow-opaque-3: color-mix(in oklab, var(--yellow), var(--bg) 65%); --yellow-opaque-4: color-mix(in oklab, var(--yellow), var(--bg) 40%); --yellow-opaque-5: var(--yellow); --yellow-opaque-6: color-mix(in oklab, var(--yellow), var(--fg) 30%); --yellow-opaque-7: color-mix(in oklab, var(--yellow), var(--fg) 50%); --yellow-opaque-8: color-mix(in oklab, var(--yellow), var(--fg) 70%); --yellow-opaque-9: color-mix(in oklab, var(--yellow), var(--fg) 90%); --amber-opaque-1: color-mix(in oklab, var(--amber), var(--bg) 90%); --amber-opaque-2: color-mix(in oklab, var(--amber), var(--bg) 80%); --amber-opaque-3: color-mix(in oklab, var(--amber), var(--bg) 65%); --amber-opaque-4: color-mix(in oklab, var(--amber), var(--bg) 40%); --amber-opaque-5: var(--amber); --amber-opaque-6: color-mix(in oklab, var(--amber), var(--fg) 30%); --amber-opaque-7: color-mix(in oklab, var(--amber), var(--fg) 50%); --amber-opaque-8: color-mix(in oklab, var(--amber), var(--fg) 70%); --amber-opaque-9: color-mix(in oklab, var(--amber), var(--fg) 90%); --orange-opaque-1: color-mix(in oklab, var(--orange), var(--bg) 90%); --orange-opaque-2: color-mix(in oklab, var(--orange), var(--bg) 80%); --orange-opaque-3: color-mix(in oklab, var(--orange), var(--bg) 65%); --orange-opaque-4: color-mix(in oklab, var(--orange), var(--bg) 40%); --orange-opaque-5: var(--orange); --orange-opaque-6: color-mix(in oklab, var(--orange), var(--fg) 30%); --orange-opaque-7: color-mix(in oklab, var(--orange), var(--fg) 50%); --orange-opaque-8: color-mix(in oklab, var(--orange), var(--fg) 70%); --orange-opaque-9: color-mix(in oklab, var(--orange), var(--fg) 90%); --red-opaque-1: color-mix(in oklab, var(--red), var(--bg) 90%); --red-opaque-2: color-mix(in oklab, var(--red), var(--bg) 80%); --red-opaque-3: color-mix(in oklab, var(--red), var(--bg) 65%); --red-opaque-4: color-mix(in oklab, var(--red), var(--bg) 40%); --red-opaque-5: var(--red); --red-opaque-6: color-mix(in oklab, var(--red), var(--fg) 30%); --red-opaque-7: color-mix(in oklab, var(--red), var(--fg) 50%); --red-opaque-8: color-mix(in oklab, var(--red), var(--fg) 70%); --red-opaque-9: color-mix(in oklab, var(--red), var(--fg) 90%); --pink-opaque-1: color-mix(in oklab, var(--pink), var(--bg) 90%); --pink-opaque-2: color-mix(in oklab, var(--pink), var(--bg) 80%); --pink-opaque-3: color-mix(in oklab, var(--pink), var(--bg) 65%); --pink-opaque-4: color-mix(in oklab, var(--pink), var(--bg) 40%); --pink-opaque-5: var(--pink); --pink-opaque-6: color-mix(in oklab, var(--pink), var(--fg) 30%); --pink-opaque-7: color-mix(in oklab, var(--pink), var(--fg) 50%); --pink-opaque-8: color-mix(in oklab, var(--pink), var(--fg) 70%); --pink-opaque-9: color-mix(in oklab, var(--pink), var(--fg) 90%); --purple-opaque-1: color-mix(in oklab, var(--purple), var(--bg) 90%); --purple-opaque-2: color-mix(in oklab, var(--purple), var(--bg) 80%); --purple-opaque-3: color-mix(in oklab, var(--purple), var(--bg) 65%); --purple-opaque-4: color-mix(in oklab, var(--purple), var(--bg) 40%); --purple-opaque-5: var(--purple); --purple-opaque-6: color-mix(in oklab, var(--purple), var(--fg) 30%); --purple-opaque-7: color-mix(in oklab, var(--purple), var(--fg) 50%); --purple-opaque-8: color-mix(in oklab, var(--purple), var(--fg) 70%); --purple-opaque-9: color-mix(in oklab, var(--purple), var(--fg) 90%); --purple-deep-opaque-1: color-mix( in oklab, var(--purple-deep), var(--bg) 90% ); --purple-deep-opaque-2: color-mix( in oklab, var(--purple-deep), var(--bg) 80% ); --purple-deep-opaque-3: color-mix( in oklab, var(--purple-deep), var(--bg) 65% ); --purple-deep-opaque-4: color-mix( in oklab, var(--purple-deep), var(--bg) 40% ); --purple-deep-opaque-5: var(--purple-deep); --purple-deep-opaque-6: color-mix( in oklab, var(--purple-deep), var(--fg) 30% ); --purple-deep-opaque-7: color-mix( in oklab, var(--purple-deep), var(--fg) 50% ); --purple-deep-opaque-8: color-mix( in oklab, var(--purple-deep), var(--fg) 70% ); --purple-deep-opaque-9: color-mix( in oklab, var(--purple-deep), var(--fg) 90% ); --indigo-opaque-1: color-mix(in oklab, var(--indigo), var(--bg) 90%); --indigo-opaque-2: color-mix(in oklab, var(--indigo), var(--bg) 80%); --indigo-opaque-3: color-mix(in oklab, var(--indigo), var(--bg) 65%); --indigo-opaque-4: color-mix(in oklab, var(--indigo), var(--bg) 40%); --indigo-opaque-5: var(--indigo); --indigo-opaque-6: color-mix(in oklab, var(--indigo), var(--fg) 30%); --indigo-opaque-7: color-mix(in oklab, var(--indigo), var(--fg) 50%); --indigo-opaque-8: color-mix(in oklab, var(--indigo), var(--fg) 70%); --indigo-opaque-9: color-mix(in oklab, var(--indigo), var(--fg) 90%); --green-opaque-1: color-mix(in oklab, var(--green), var(--bg) 90%); --green-opaque-2: color-mix(in oklab, var(--green), var(--bg) 80%); --green-opaque-3: color-mix(in oklab, var(--green), var(--bg) 65%); --green-opaque-4: color-mix(in oklab, var(--green), var(--bg) 40%); --green-opaque-5: var(--green); --green-opaque-6: color-mix(in oklab, var(--green), var(--fg) 30%); --green-opaque-7: color-mix(in oklab, var(--green), var(--fg) 50%); --green-opaque-8: color-mix(in oklab, var(--green), var(--fg) 70%); --green-opaque-9: color-mix(in oklab, var(--green), var(--fg) 90%); --lime-opaque-1: color-mix(in oklab, var(--lime), var(--bg) 90%); --lime-opaque-2: color-mix(in oklab, var(--lime), var(--bg) 80%); --lime-opaque-3: color-mix(in oklab, var(--lime), var(--bg) 65%); --lime-opaque-4: color-mix(in oklab, var(--lime), var(--bg) 40%); --lime-opaque-5: var(--lime); --lime-opaque-6: color-mix(in oklab, var(--lime), var(--fg) 30%); --lime-opaque-7: color-mix(in oklab, var(--lime), var(--fg) 50%); --lime-opaque-8: color-mix(in oklab, var(--lime), var(--fg) 70%); --lime-opaque-9: color-mix(in oklab, var(--lime), var(--fg) 90%); --highlighter-opaque-1: color-mix( in oklab, var(--highlighter), var(--bg) 90% ); --highlighter-opaque-2: color-mix( in oklab, var(--highlighter), var(--bg) 80% ); --highlighter-opaque-3: color-mix( in oklab, var(--highlighter), var(--bg) 65% ); --highlighter-opaque-4: color-mix( in oklab, var(--highlighter), var(--bg) 40% ); --highlighter-opaque-5: var(--highlighter); --highlighter-opaque-6: color-mix( in oklab, var(--highlighter), var(--fg) 30% ); --highlighter-opaque-7: color-mix( in oklab, var(--highlighter), var(--fg) 50% ); --highlighter-opaque-8: color-mix( in oklab, var(--highlighter), var(--fg) 70% ); --highlighter-opaque-9: color-mix( in oklab, var(--highlighter), var(--fg) 90% ); --brown-opaque-1: color-mix(in oklab, var(--brown), var(--bg) 90%); --brown-opaque-2: color-mix(in oklab, var(--brown), var(--bg) 80%); --brown-opaque-3: color-mix(in oklab, var(--brown), var(--bg) 65%); --brown-opaque-4: color-mix(in oklab, var(--brown), var(--bg) 40%); --brown-opaque-5: var(--brown); --brown-opaque-6: color-mix(in oklab, var(--brown), var(--fg) 30%); --brown-opaque-7: color-mix(in oklab, var(--brown), var(--fg) 50%); --brown-opaque-8: color-mix(in oklab, var(--brown), var(--fg) 70%); --brown-opaque-9: color-mix(in oklab, var(--brown), var(--fg) 90%); --teal-opaque-1: color-mix(in oklab, var(--teal), var(--bg) 90%); --teal-opaque-2: color-mix(in oklab, var(--teal), var(--bg) 80%); --teal-opaque-3: color-mix(in oklab, var(--teal), var(--bg) 65%); --teal-opaque-4: color-mix(in oklab, var(--teal), var(--bg) 40%); --teal-opaque-5: var(--teal); --teal-opaque-6: color-mix(in oklab, var(--teal), var(--fg) 30%); --teal-opaque-7: color-mix(in oklab, var(--teal), var(--fg) 50%); --teal-opaque-8: color-mix(in oklab, var(--teal), var(--fg) 70%); --teal-opaque-9: color-mix(in oklab, var(--teal), var(--fg) 90%); --blue-opaque-1: color-mix(in oklab, var(--blue), var(--bg) 90%); --blue-opaque-2: color-mix(in oklab, var(--blue), var(--bg) 80%); --blue-opaque-3: color-mix(in oklab, var(--blue), var(--bg) 65%); --blue-opaque-4: color-mix(in oklab, var(--blue), var(--bg) 40%); --blue-opaque-5: var(--blue); --blue-opaque-6: color-mix(in oklab, var(--blue), var(--fg) 30%); --blue-opaque-7: color-mix(in oklab, var(--blue), var(--fg) 50%); --blue-opaque-8: color-mix(in oklab, var(--blue), var(--fg) 70%); --blue-opaque-9: color-mix(in oklab, var(--blue), var(--fg) 90%); --gray-opaque-1: color-mix(in oklab, var(--gray), var(--bg) 90%); --gray-opaque-2: color-mix(in oklab, var(--gray), var(--bg) 80%); --gray-opaque-3: color-mix(in oklab, var(--gray), var(--bg) 65%); --gray-opaque-4: color-mix(in oklab, var(--gray), var(--bg) 40%); --gray-opaque-5: var(--gray); --gray-opaque-6: color-mix(in oklab, var(--gray), var(--fg) 30%); --gray-opaque-7: color-mix(in oklab, var(--gray), var(--fg) 50%); --gray-opaque-8: color-mix(in oklab, var(--gray), var(--fg) 70%); --gray-opaque-9: color-mix(in oklab, var(--gray), var(--fg) 90%); --slate-opaque-1: color-mix(in oklab, var(--slate), var(--bg) 90%); --slate-opaque-2: color-mix(in oklab, var(--slate), var(--bg) 80%); --slate-opaque-3: color-mix(in oklab, var(--slate), var(--bg) 65%); --slate-opaque-4: color-mix(in oklab, var(--slate), var(--bg) 40%); --slate-opaque-5: var(--slate); --slate-opaque-6: color-mix(in oklab, var(--slate), var(--fg) 30%); --slate-opaque-7: color-mix(in oklab, var(--slate), var(--fg) 50%); --slate-opaque-8: color-mix(in oklab, var(--slate), var(--fg) 70%); --slate-opaque-9: color-mix(in oklab, var(--slate), var(--fg) 90%); --white-opaque-1: color-mix(in oklab, var(--white), var(--bg) 90%); --white-opaque-2: color-mix(in oklab, var(--white), var(--bg) 80%); --white-opaque-3: color-mix(in oklab, var(--white), var(--bg) 65%); --white-opaque-4: color-mix(in oklab, var(--white), var(--bg) 40%); --white-opaque-5: var(--white); --white-opaque-6: color-mix(in oklab, var(--white), var(--fg) 30%); --white-opaque-7: color-mix(in oklab, var(--white), var(--fg) 50%); --white-opaque-8: color-mix(in oklab, var(--white), var(--fg) 70%); --white-opaque-9: color-mix(in oklab, var(--white), var(--fg) 90%); --black-opaque-1: color-mix(in oklab, var(--black), var(--bg) 90%); --black-opaque-2: color-mix(in oklab, var(--black), var(--bg) 80%); --black-opaque-3: color-mix(in oklab, var(--black), var(--bg) 65%); --black-opaque-4: color-mix(in oklab, var(--black), var(--bg) 40%); --black-opaque-5: var(--black); --black-opaque-6: color-mix(in oklab, var(--black), var(--fg) 30%); --black-opaque-7: color-mix(in oklab, var(--black), var(--fg) 50%); --black-opaque-8: color-mix(in oklab, var(--black), var(--fg) 70%); --black-opaque-9: color-mix(in oklab, var(--black), var(--fg) 90%); --fg-05: oklch(from var(--fg) l c h / 0.05); --fg-1: oklch(from var(--fg) l c h / 0.1); --fg-2: oklch(from var(--fg) l c h / 0.2); --fg-3: oklch(from var(--fg) l c h / 0.3); --fg-4: oklch(from var(--fg) l c h / 0.4); --fg-5: oklch(from var(--fg) l c h / 0.5); --fg-6: oklch(from var(--fg) l c h / 0.6); --fg-7: oklch(from var(--fg) l c h / 0.75); --fg-8: oklch(from var(--fg) l c h / 0.9); --fg-9: var(--fg); --fg-opaque-1: color-mix(in oklab, var(--fg), var(--bg) 90%); --fg-opaque-2: color-mix(in oklab, var(--fg), var(--bg) 80%); --fg-opaque-3: color-mix(in oklab, var(--fg), var(--bg) 65%); --fg-opaque-4: color-mix(in oklab, var(--fg), var(--bg) 40%); --fg-opaque-5: var(--fg); --fg-opaque-6: color-mix(in oklab, var(--fg), var(--fg) 30%); --fg-opaque-7: color-mix(in oklab, var(--fg), var(--fg) 50%); --fg-opaque-8: color-mix(in oklab, var(--fg), var(--fg) 70%); --fg-opaque-9: color-mix(in oklab, var(--fg), var(--fg) 90%); --bg-05: oklch(from var(--bg) l c h / 0.05); --bg-1: oklch(from var(--bg) l c h / 0.1); --bg-2: oklch(from var(--bg) l c h / 0.2); --bg-3: oklch(from var(--bg) l c h / 0.3); --bg-4: oklch(from var(--bg) l c h / 0.4); --bg-5: oklch(from var(--bg) l c h / 0.5); --bg-6: oklch(from var(--bg) l c h / 0.6); --bg-7: oklch(from var(--bg) l c h / 0.75); --bg-8: oklch(from var(--bg) l c h / 0.9); --bg-9: var(--bg); --bg-opaque-1: color-mix(in oklab, var(--bg), var(--bg) 90%); --bg-opaque-2: color-mix(in oklab, var(--bg), var(--bg) 80%); --bg-opaque-3: color-mix(in oklab, var(--bg), var(--bg) 65%); --bg-opaque-4: color-mix(in oklab, var(--bg), var(--bg) 40%); --bg-opaque-5: var(--bg); --bg-opaque-6: color-mix(in oklab, var(--bg), var(--fg) 30%); --bg-opaque-7: color-mix(in oklab, var(--bg), var(--fg) 50%); --bg-opaque-8: color-mix(in oklab, var(--bg), var(--fg) 70%); --bg-opaque-9: color-mix(in oklab, var(--bg), var(--fg) 90%); --primary-1: oklch(from var(--primary) l c h / 0.1); --primary-2: oklch(from var(--primary) l c h / 0.2); --primary-3: oklch(from var(--primary) l c h / 0.3); --primary-4: oklch(from var(--primary) l c h / 0.4); --primary-5: oklch(from var(--primary) l c h / 0.5); --primary-6: oklch(from var(--primary) l c h / 0.6); --primary-7: oklch(from var(--primary) l c h / 0.75); --primary-8: oklch(from var(--primary) l c h / 0.9); --primary-9: var(--primary); --primary-opaque-1: color-mix(in oklab, var(--primary), var(--bg) 90%); --primary-opaque-2: color-mix(in oklab, var(--primary), var(--bg) 80%); --primary-opaque-3: color-mix(in oklab, var(--primary), var(--bg) 65%); --primary-opaque-4: color-mix(in oklab, var(--primary), var(--bg) 40%); --primary-opaque-5: var(--primary); --primary-opaque-6: color-mix(in oklab, var(--primary), var(--fg) 30%); --primary-opaque-7: color-mix(in oklab, var(--primary), var(--fg) 50%); --primary-opaque-8: color-mix(in oklab, var(--primary), var(--fg) 70%); --primary-opaque-9: color-mix(in oklab, var(--primary), var(--fg) 90%); --error-1: oklch(from var(--error) l c h / 0.1); --error-2: oklch(from var(--error) l c h / 0.2); --error-3: oklch(from var(--error) l c h / 0.3); --error-4: oklch(from var(--error) l c h / 0.4); --error-5: oklch(from var(--error) l c h / 0.5); --error-6: oklch(from var(--error) l c h / 0.6); --error-7: oklch(from var(--error) l c h / 0.75); --error-8: oklch(from var(--error) l c h / 0.9); --error-9: var(--error); --error-opaque-1: color-mix(in oklab, var(--error), var(--bg) 90%); --error-opaque-2: color-mix(in oklab, var(--error), var(--bg) 80%); --error-opaque-3: color-mix(in oklab, var(--error), var(--bg) 65%); --error-opaque-4: color-mix(in oklab, var(--error), var(--bg) 40%); --error-opaque-5: var(--error); --error-opaque-6: color-mix(in oklab, var(--error), var(--fg) 30%); --error-opaque-7: color-mix(in oklab, var(--error), var(--fg) 50%); --error-opaque-8: color-mix(in oklab, var(--error), var(--fg) 70%); --error-opaque-9: color-mix(in oklab, var(--error), var(--fg) 90%); --warning-1: oklch(from var(--warning) l c h / 0.1); --warning-2: oklch(from var(--warning) l c h / 0.2); --warning-3: oklch(from var(--warning) l c h / 0.3); --warning-4: oklch(from var(--warning) l c h / 0.4); --warning-5: oklch(from var(--warning) l c h / 0.5); --warning-6: oklch(from var(--warning) l c h / 0.6); --warning-7: oklch(from var(--warning) l c h / 0.75); --warning-8: oklch(from var(--warning) l c h / 0.9); --warning-9: var(--warning); --warning-opaque-1: color-mix(in oklab, var(--warning), var(--bg) 90%); --warning-opaque-2: color-mix(in oklab, var(--warning), var(--bg) 80%); --warning-opaque-3: color-mix(in oklab, var(--warning), var(--bg) 65%); --warning-opaque-4: color-mix(in oklab, var(--warning), var(--bg) 40%); --warning-opaque-5: var(--warning); --warning-opaque-6: color-mix(in oklab, var(--warning), var(--fg) 30%); --warning-opaque-7: color-mix(in oklab, var(--warning), var(--fg) 50%); --warning-opaque-8: color-mix(in oklab, var(--warning), var(--fg) 70%); --warning-opaque-9: color-mix(in oklab, var(--warning), var(--fg) 90%); --success-1: oklch(from var(--success) l c h / 0.1); --success-2: oklch(from var(--success) l c h / 0.2); --success-3: oklch(from var(--success) l c h / 0.3); --success-4: oklch(from var(--success) l c h / 0.4); --success-5: oklch(from var(--success) l c h / 0.5); --success-6: oklch(from var(--success) l c h / 0.6); --success-7: oklch(from var(--success) l c h / 0.75); --success-8: oklch(from var(--success) l c h / 0.9); --success-9: var(--success); --success-opaque-1: color-mix(in oklab, var(--success), var(--bg) 90%); --success-opaque-2: color-mix(in oklab, var(--success), var(--bg) 80%); --success-opaque-3: color-mix(in oklab, var(--success), var(--bg) 65%); --success-opaque-4: color-mix(in oklab, var(--success), var(--bg) 40%); --success-opaque-5: var(--success); --success-opaque-6: color-mix(in oklab, var(--success), var(--fg) 30%); --success-opaque-7: color-mix(in oklab, var(--success), var(--fg) 50%); --success-opaque-8: color-mix(in oklab, var(--success), var(--fg) 70%); --success-opaque-9: color-mix(in oklab, var(--success), var(--fg) 90%); /* /derive:mirror */ /* Re-apply inherited properties so a preset's --fg/--bg/--font-sans overrides actually reach descendants. Without this, body's resolved color/background/font-family is inherited into the scope unchanged, and the preset's tokens render nowhere. */ color: var(--fg); background: var(--bg); font-family: var(--font-sans); line-height: var(--lh); } html { box-sizing: border-box; scroll-padding-block-start: 60px; min-height: 100dvh; margin: 0; } body > .body-fill { min-height: 100dvh; margin: 0; display: flex; flex-direction: column; } main { flex: 1; } header, main, footer { inline-size: 100%; } *, *::before, *::after { box-sizing: inherit; } body { font-family: var(--font-sans); line-height: var(--lh); margin: 0; min-height: 100dvh; color: var(--fg); background: var(--bg); height: stretch; } h1, h2, h3, h4, h5, h6, p, li, .fluid, .tag, textarea, input, select, button, a, th, td, label { /* Fluid Typography System * * This system creates responsive font sizes that scale smoothly between viewport sizes. * Set --fl (fluid level) on any element to control its size (-1 to 6). * * How it works: * 1. Calculate min/max font sizes using pow() with modular scale ratios * 2. Find the rate of change (slope) between min and max * 3. Use clamp() to create a fluid value that scales with viewport/container width * * Formula breakdown: * - --fluid-min: Minimum font size = base * ratio^level * - --fluid-max: Maximum font size = base * ratio^level * - --fluid-preferred: Slope of linear interpolation * - --fluid-type: clamp(min, min + slope * viewport, max) */ --fluid-min: calc( var(--font-size-min) * pow(var(--font-ratio-min), var(--fl, 0)) ); --fluid-max: calc( var(--font-size-max) * pow(var(--font-ratio-max), var(--fl, 0)) ); --fluid-preferred: calc( (var(--fluid-max) - var(--fluid-min)) / (var(--font-width-max) - var(--font-width-min)) ); --fluid-type: clamp( (var(--fluid-min) / 16) * 1rem, ((var(--fluid-min) / 16) * 1rem) - (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) + (var(--fluid-preferred) * var(--variable-unit, 100vi)), (var(--fluid-max) / 16) * 1rem ); font-size: var(--fluid-type); line-height: var(--lh); } /* This makes containers, with container queries use a cqi unit instead of vi */ /* FC Fluid Container */ .fluid-text-container, .fc { container-type: inline-size; --variable-unit: 100cqi; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { line-height: var(--lh-s); } h1, .h1 { margin-block: 0 var(--vs-base); --fl: 5; letter-spacing: var(--ls-h1); } h2, .h2 { --fl: 4; letter-spacing: var(--ls-h2); } h3, .h3 { --fl: 3; letter-spacing: var(--ls-h3); } h4, .h4 { --fl: 2; } h5, .h5 { --fl: 1; } h6, .h6 { --fl: 0; } p, li, body, input, textarea, button, select { --fl: 0; line-height: var(--lh); } /* Form elements don't inherit font-family by default — restore inheritance so theme presets that swap --font-sans flow into buttons/inputs too. */ input, textarea, button, select { font-family: inherit; } /** * @pattern-group font-size * @members fs-xs, fs-base, fs-s, fs-m, fs-l, fs-xl, fs-xxl, fs-xxxl * @role Fluid type-size utilities; each class sets `--fl` to a level on the modular scale (-1 = caption, 0 = body, 6 = display) * @example

A heading-sized paragraph

*/ .fs-xs { --fl: -1; } .fs-base { --fl: 0; } .fs-s { --fl: 1; } .fs-m { --fl: 2; } .fs-l { --fl: 3; } .fs-xl { --fl: 4; } .fs-xxl { --fl: 5; } .fs-xxxl { --fl: 6; } img, picture, video, canvas, svg { display: block; max-inline-size: 100%; } hr { block-size: 0; margin-block: var(--vs-l); margin-inline: 0; border: none; border-block-start: var(--border-1); } mark { background: var(--highlighter-9); color: var(--black); padding-inline: 0.15em; border-radius: var(--br-xs); @media (forced-colors: active) { background: Mark; color: MarkText; } } figure { margin-block: var(--vs-l); margin-inline: 0; } figure > :is(img, picture, video, canvas, svg) { display: block; inline-size: 100%; block-size: auto; border-radius: var(--br-m); } figcaption { --fl: -1; margin-block-start: var(--vs-s); line-height: var(--lh-s); color: var(--fg-5); max-inline-size: 65ch; text-wrap: pretty; } button, .button { --button-color: var(--gray-5); --button-text: var(--fg); /* Two-stop gradient via color-mix(). Avoids oklch(from ... l c h) gamut clipping on saturated tokens like --primary. */ --button-bg-top: light-dark( color-mix(in oklab, var(--button-color) 18%, white), color-mix(in oklab, var(--button-color) 35%, black) ); --button-bg-bottom: light-dark( color-mix(in oklab, var(--button-color) 28%, white), color-mix(in oklab, var(--button-color) 45%, black) ); --button-border: light-dark( color-mix(in oklab, var(--button-color) 60%, transparent), color-mix(in oklab, var(--button-color) 50%, transparent) ); --button-shadow: light-dark( color-mix(in oklab, var(--button-color) 18%, transparent), color-mix(in oklab, var(--button-color) 35%, black) ); appearance: none; margin: 0; cursor: pointer; background: linear-gradient( 180deg, var(--button-bg-top) 0%, var(--button-bg-bottom) 100% ); color: var(--button-text); font-weight: 560; display: inline-flex; justify-content: center; gap: 0.45em; align-items: center; line-height: var(--lh-s); border: 1px solid var(--button-border); border-radius: var(--br-m); padding: 6px var(--pad-l); text-decoration: none; box-shadow: inset 0 1px 0 light-dark(var(--white-5), var(--white-1)), 0 1px 2px var(--button-shadow); transition: background var(--d-fast) var(--ease-smooth), border-color var(--d-fast) var(--ease-smooth), color var(--d-fast) var(--ease-smooth), box-shadow var(--d-fast) var(--ease-smooth), translate var(--d-fast) var(--ease-smooth); &:hover { --button-bg-top: light-dark( color-mix(in oklab, var(--button-color) 12%, white), color-mix(in oklab, var(--button-color) 42%, black) ); --button-bg-bottom: light-dark( color-mix(in oklab, var(--button-color) 22%, white), color-mix(in oklab, var(--button-color) 52%, black) ); border-color: light-dark( color-mix(in oklab, var(--button-color) 70%, transparent), color-mix(in oklab, var(--button-color) 60%, transparent) ); box-shadow: inset 0 1px 0 light-dark(var(--white-6), var(--white-2)), 0 2px 4px var(--button-shadow); translate: 0 -1px; } &:active { --button-bg-top: light-dark( color-mix(in oklab, var(--button-color) 45%, white), color-mix(in oklab, var(--button-color) 30%, black) ); --button-bg-bottom: light-dark( color-mix(in oklab, var(--button-color) 55%, white), color-mix(in oklab, var(--button-color) 38%, black) ); box-shadow: inset 0 1px 0 light-dark(var(--white-2), var(--white-1)), 0 1px 2px var(--button-shadow); translate: 0; } &:disabled { opacity: 0.65; cursor: not-allowed; } &:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); } @media (forced-colors: active) { /* In forced-colors mode, the gradient background and inset gloss disappear. Add an explicit border so the button has a visible edge. */ background: ButtonFace; color: ButtonText; border: 1px solid ButtonBorder; &:hover { background: Highlight; color: HighlightText; } &:disabled { color: GrayText; border-color: GrayText; } } &.mini { --fl: -1; min-block-size: 24px; padding: 3px var(--pad-m); gap: 0.35em; border-radius: var(--br-s); } &.primary { --button-color: var(--primary); --button-text: var(--white); /* Vivid solid surface — high color percentage preserves chroma */ --button-bg-top: light-dark( color-mix(in oklab, var(--button-color) 92%, white), color-mix(in oklab, var(--button-color) 88%, black) ); --button-bg-bottom: light-dark( color-mix(in oklab, var(--button-color) 98%, white), color-mix(in oklab, var(--button-color) 80%, black) ); --button-border: light-dark( color-mix(in oklab, var(--button-color) 75%, black), color-mix(in oklab, var(--button-color) 70%, white) ); &:hover { --button-bg-top: light-dark( color-mix(in oklab, var(--button-color) 85%, white), color-mix(in oklab, var(--button-color) 95%, black) ); --button-bg-bottom: light-dark( color-mix(in oklab, var(--button-color) 92%, white), var(--button-color) ); } &:active { --button-bg-top: light-dark( color-mix(in oklab, var(--button-color) 88%, black), color-mix(in oklab, var(--button-color) 75%, black) ); --button-bg-bottom: light-dark( color-mix(in oklab, var(--button-color) 80%, black), color-mix(in oklab, var(--button-color) 70%, black) ); } } &.error { --button-color: var(--error); --button-text: var(--white); --button-bg-top: light-dark( color-mix(in oklab, var(--button-color) 92%, white), color-mix(in oklab, var(--button-color) 88%, black) ); --button-bg-bottom: light-dark( color-mix(in oklab, var(--button-color) 98%, white), color-mix(in oklab, var(--button-color) 80%, black) ); --button-border: light-dark( color-mix(in oklab, var(--button-color) 75%, black), color-mix(in oklab, var(--button-color) 70%, white) ); &:hover { --button-bg-top: light-dark( color-mix(in oklab, var(--button-color) 85%, white), color-mix(in oklab, var(--button-color) 95%, black) ); --button-bg-bottom: light-dark( color-mix(in oklab, var(--button-color) 92%, white), var(--button-color) ); } &:active { --button-bg-top: light-dark( color-mix(in oklab, var(--button-color) 88%, black), color-mix(in oklab, var(--button-color) 75%, black) ); --button-bg-bottom: light-dark( color-mix(in oklab, var(--button-color) 80%, black), color-mix(in oklab, var(--button-color) 70%, black) ); } } &.warning { --button-color: var(--warning); --button-text: var(--black); --button-bg-top: light-dark( color-mix(in oklab, var(--button-color) 95%, white), color-mix(in oklab, var(--button-color) 90%, black) ); --button-bg-bottom: light-dark( var(--button-color), color-mix(in oklab, var(--button-color) 82%, black) ); --button-border: light-dark( color-mix(in oklab, var(--button-color) 80%, black), color-mix(in oklab, var(--button-color) 65%, black) ); &:hover { --button-bg-top: light-dark( color-mix(in oklab, var(--button-color) 90%, white), color-mix(in oklab, var(--button-color) 95%, black) ); --button-bg-bottom: light-dark( color-mix(in oklab, var(--button-color) 98%, white), var(--button-color) ); color: var(--black); } &:active { --button-bg-top: light-dark( color-mix(in oklab, var(--button-color) 90%, black), color-mix(in oklab, var(--button-color) 78%, black) ); --button-bg-bottom: light-dark( color-mix(in oklab, var(--button-color) 82%, black), color-mix(in oklab, var(--button-color) 72%, black) ); } } &.success { --button-color: var(--success); --button-text: var(--white); --button-bg-top: light-dark( color-mix(in oklab, var(--button-color) 92%, white), color-mix(in oklab, var(--button-color) 88%, black) ); --button-bg-bottom: light-dark( color-mix(in oklab, var(--button-color) 98%, white), color-mix(in oklab, var(--button-color) 80%, black) ); --button-border: light-dark( color-mix(in oklab, var(--button-color) 75%, black), color-mix(in oklab, var(--button-color) 70%, white) ); &:hover { --button-bg-top: light-dark( color-mix(in oklab, var(--button-color) 85%, white), color-mix(in oklab, var(--button-color) 95%, black) ); --button-bg-bottom: light-dark( color-mix(in oklab, var(--button-color) 92%, white), var(--button-color) ); } &:active { --button-bg-top: light-dark( color-mix(in oklab, var(--button-color) 88%, black), color-mix(in oklab, var(--button-color) 75%, black) ); --button-bg-bottom: light-dark( color-mix(in oklab, var(--button-color) 80%, black), color-mix(in oklab, var(--button-color) 70%, black) ); } } &.dark { --button-color: light-dark(#222, #fff); /* Always white text — .dark means a dark surface in both color schemes, so the label needs to stay light no matter what. */ --button-text: var(--white); /* Dark surface in both schemes. light-dark resolves --button-color to a near-black or near-white anchor; we mix it heavily toward black either way to get a stable dark surface. */ --button-bg-top: color-mix(in oklab, var(--button-color) 22%, black); --button-bg-bottom: color-mix(in oklab, var(--button-color) 30%, black); --button-border: color-mix(in oklab, var(--button-color) 50%, black); --button-shadow: color-mix(in oklab, black 80%, transparent); &:hover { --button-bg-top: color-mix(in oklab, var(--button-color) 32%, black); --button-bg-bottom: color-mix(in oklab, var(--button-color) 40%, black); } &:active { --button-bg-top: color-mix(in oklab, var(--button-color) 14%, black); --button-bg-bottom: color-mix(in oklab, var(--button-color) 22%, black); } } &.light { --button-color: light-dark(#fff, #fafafa); --button-text: var(--black); --button-bg-top: color-mix(in oklab, var(--button-color) 96%, black); --button-bg-bottom: var(--button-color); --button-border: color-mix(in oklab, var(--button-color) 60%, var(--fg)); --button-shadow: color-mix(in oklab, black 12%, transparent); &:hover { --button-bg-top: color-mix(in oklab, var(--button-color) 92%, black); --button-bg-bottom: color-mix(in oklab, var(--button-color) 98%, black); } &:active { --button-bg-top: color-mix(in oklab, var(--button-color) 85%, black); --button-bg-bottom: color-mix(in oklab, var(--button-color) 90%, black); } } &.contrast { --button-color: var(--fg); --button-text: var(--bg); /* light-dark gates here are because the gradient direction differs: in light mode the surface is DARK (mix toward black to keep it dark), in dark mode the surface is LIGHT (mix toward black still works because --button-color is already #fff and 90% white + 10% black = light gray). */ --button-bg-top: light-dark( color-mix(in oklab, var(--button-color) 22%, black), color-mix(in oklab, var(--button-color) 96%, black) ); --button-bg-bottom: light-dark( color-mix(in oklab, var(--button-color) 30%, black), color-mix(in oklab, var(--button-color) 100%, transparent) ); --button-border: light-dark( color-mix(in oklab, var(--button-color) 50%, black), color-mix(in oklab, var(--button-color) 70%, black) ); --button-shadow: light-dark( color-mix(in oklab, black 75%, transparent), color-mix(in oklab, black 15%, transparent) ); &:hover { --button-bg-top: light-dark( color-mix(in oklab, var(--button-color) 32%, black), color-mix(in oklab, var(--button-color) 90%, black) ); --button-bg-bottom: light-dark( color-mix(in oklab, var(--button-color) 40%, black), color-mix(in oklab, var(--button-color) 96%, black) ); } &:active { --button-bg-top: light-dark( color-mix(in oklab, var(--button-color) 14%, black), color-mix(in oklab, var(--button-color) 80%, black) ); --button-bg-bottom: light-dark( color-mix(in oklab, var(--button-color) 22%, black), color-mix(in oklab, var(--button-color) 90%, black) ); } } &.ghost { --button-color: transparent; --button-text: var(--fg); border: 1px solid var(--fg-3); background: transparent; box-shadow: none; &:hover { background: var(--fg-05); border-color: var(--fg-4); color: var(--fg); translate: 0; } &:active { background: var(--fg-1); border-color: var(--fg-5); } } &.minimal { --button-color: transparent; --button-text: var(--fg-8); border: none; box-shadow: none; background: transparent; padding: var(--pad-xs) var(--pad-s); &:hover { background: transparent; color: var(--fg); translate: 0; } &:active { background: transparent; } } } /* Normalize the SVG glyph inside any button so icons inherit a consistent optical size from the local --button-icon-size default. Classless: this enhances every * @modifiers ghost, minimal, primary, mini * @prefer-over custom: a bare */ .close { --size: 2rem; inline-size: var(--size); height: var(--size); padding: 0; border: none; box-shadow: var(--shadow-1); color: var(--white); background: var(--red); cursor: pointer; border-radius: 50%; &:hover { background: oklch(from var(--red) calc(l + 0.1) c h); } } /* Shared focus ring for base interactive elements. Uses :where() so component-layer rules can override without specificity wars. Modifier states below override outline-color only. */ :where(a, input, textarea, select):focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); } textarea { field-sizing: content; } input, textarea, select { &:where(:user-invalid, [aria-invalid="true"], .error) { border-color: var(--red-6); &:focus-visible { outline-color: var(--red-6); } } &:where(:user-valid.success, .success) { border-color: var(--green-6); &:focus-visible { outline-color: var(--green-6); } } &.warning { border-color: var(--yellow-7); &:focus-visible { outline-color: var(--yellow-7); } } } label { display: block; --fl: -1; } } /* END @layer base */ @layer utilities { /* UTILITIES */ /** * @pattern readable * @role Constrain content to a comfortable reading width (~900px) without imposing a hard column; place on long-form text wrappers * @example

…long-form copy…

*/ .readable { max-inline-size: 900px; inline-size: 100%; } /** * @pattern narrow * @role Tighter content width (~50ch) for forms, dialogs, and single-column UI; configurable via `--narrow-width` * @example
…
* @modifiers center */ .narrow { max-inline-size: var(--narrow-width, 50ch); inline-size: 100%; &.center { margin-inline: auto; } } /** * @pattern flex * @role Flex row primitive with gap honoring `--gap`; reach for it when a one-line cluster of items wraps naturally * @example
*/ .flex { display: flex; gap: var(--gap, 1rem); } /** * @pattern grid * @role CSS grid container with `--gap`; with `.auto`, lays out a responsive auto-fit grid using `--grid-min` * @example
…
…
* @modifiers auto */ .grid { display: grid; gap: var(--gap, 1rem); &.auto { grid-template-columns: repeat( auto-fit, minmax(var(--grid-min, 150px), 1fr) ); } } /** * @pattern split * @role Two-pane horizontal split with items pushed to the ends; container query collapses to vertical at <500px so it adapts to its parent, not the viewport * @example

Section title

See all
* @modifiers even, vertical, center */ .split { display: flex; gap: var(--gap, 1rem); align-items: start; justify-content: space-between; &.even { flex: 1 1 auto; } &.vertical { flex-direction: column; height: 100%; } &.center { align-items: center; } } /* Container query for .split - stacks when in narrow container */ @container (max-width: 500px) { .split { flex-direction: column; } } /** * @pattern visually-hidden * @role Hide content from sighted users but keep it available to screen readers and copy/paste; pair with form labels and icon-only buttons * @example */ .visually-hidden { position: absolute; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); height: 1px; inline-size: 1px; margin: -1px; padding: 0px; border: 0px; } /** * @pattern skip-link * @role Bypass-navigation anchor that stays screen-reader-only until it receives keyboard focus, then reveals as a pinned pill at the top of the page; place it as the first focusable element with `href` pointing at the main landmark * @example * @related visually-hidden */ .skip-link { position: absolute; inset-block-start: var(--pad-s); inset-inline-start: 50%; z-index: var(--z-modal); padding: var(--pad-s) var(--pad-m); background: var(--bg); color: var(--fg); border-radius: var(--br-m); box-shadow: var(--shadow-3); translate: -50% -150%; transition: translate var(--d-fast) var(--ease-smooth); &:focus-visible { translate: -50% 0; outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); } } /** * @pattern no-list * @role Strip default `