/* 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. */ /* 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 { /* ===================================================================== * Tier 1: Literal tokens — concrete primitives * Colors, lengths, durations, raw scales. These are what consumers * override at the root to retheme. * ===================================================================== */ /* Typography primitives */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --min-vw: 360; --max-vw: 800; /* Fluid Type */ --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 */ --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 */ --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 */ --br-xs: 2px; --br-s: 4px; --br-m: 8px; --br-l: 16px; --br-xl: 24px; --br-xxl: 32px; /* Line Height */ --lh-xs: 1; --lh-s: 1.2; --lh: 1.5; --lh-l: 1.8; --lh-xl: 2; /* Font Weight */ --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Heading Letter Spacing */ --ls-h1: -0.02em; --ls-h2: -0.015em; --ls-h3: -0.01em; /* Color System - OKLCH with 1-9 scales */ /* Base colors (scale 5) */ --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 */ --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 */ --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 */ --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 */ --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 */ --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 */ --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 */ --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 */ --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 */ --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 */ --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 */ --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 */ --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 */ --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 */ --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 */ --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 */ --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) */ --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) */ --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 */ --fg-light: #050505; --fg-dark: #fff; --bg-light: #fff; --bg-dark: #050505; /* Easing Tokens - Using linear() for modern, natural motion */ --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 */ --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 */ --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 */ --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 */ --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 */ --primary: var(--blue); --accent: var(--primary); --error: var(--red); --warning: var(--yellow); --success: var(--green); /* Primary scale */ /* 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 */ /* 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 */ /* 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 */ /* 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 */ --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)); --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 */ --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 */ --focus-ring: 2px solid var(--fg); --focus-ring-offset: 2px; --focus-ring-offset-inset: -2px; /* 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; } .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); } 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; } } } .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; } /* UTILITIES */ .readable { max-inline-size: 900px; inline-size: 100%; } .narrow { max-inline-size: var(--narrow-width, 50ch); inline-size: 100%; &.center { margin-inline: auto; } } .flex { display: flex; gap: var(--gap, 1rem); } .grid { display: grid; gap: var(--gap, 1rem); &.auto { grid-template-columns: repeat( auto-fit, minmax(var(--grid-min, 150px), 1fr) ); } } .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; } } .visually-hidden { position: absolute; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); height: 1px; inline-size: 1px; margin: -1px; padding: 0px; border: 0px; } .no-list { list-style: none; margin: 0; padding: 0; li { margin: 0; padding: 0; } } .row { margin-block: var(--vs-m); } :is(form, fieldset) .row { display: grid; gap: var(--row-gap, var(--vs-xs)); align-content: start; margin-block: 0; } :is(form, fieldset) .row > label { margin-block-end: 0; } :is(form, fieldset) .row > :is(input, select, textarea):has(+ small) { margin-block-end: 0; } :is(form, fieldset) .row > :is(input, select, textarea) + small { margin-block-end: 0; } .form-actions { container-type: inline-size; display: flex; flex-wrap: wrap; justify-content: var(--form-actions-justify, flex-end); align-items: center; gap: var(--form-actions-gap, var(--vs-s)); margin-block: var(--form-actions-margin, var(--vs-m)); } .form-actions > * { margin: 0; } @container (max-width: 30rem) { .form-actions > :is( button, .button, input[type="submit"], input[type="button"], input[type="reset"] ) { flex: 1 1 100%; } } .no-margin { margin: 0; } .self-start { align-self: start; } .full { inline-size: 100%; } .reset { appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit; cursor: pointer; font: inherit; line-height: inherit; margin: 0; padding: 0; text-align: inherit; text-decoration: none; } /* Text alignment */ .text-center { text-align: center; } .text-end { text-align: end; } .circle { --size: 40px; border-radius: var(--size); padding: 0; inline-size: var(--size); height: var(--size); } /* Aspect Ratio Utilities */ .aspect-square { aspect-ratio: 1 / 1; } .aspect-video { aspect-ratio: 16 / 9; } .aspect-4-3 { aspect-ratio: 4 / 3; } .aspect-21-9 { aspect-ratio: 21 / 9; } .aspect-custom { aspect-ratio: var(--aspect, 1 / 1); } /* Focus Ring - Consistent focus styling utility */ .focus-ring:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); } .focus-ring-inset:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset-inset); } /* Transition Utilities - Use the easing tokens */ .transition { transition: all var(--d-base) var(--ease-smooth); } .transition-fast { transition: all var(--d-instant) var(--ease-smooth); } .transition-slow { transition: all var(--d-emphatic) var(--ease-smooth); } .transition-bounce { transition: all var(--d-slow) var(--ease-bounce); } .transition-none { transition: none; } /* Gradient Utilities — curated, theme-aware * light-dark() only accepts , not , so we use * light-dark() on each color stop variable, then compose the gradient. */ .gradient-sunset { --g1: light-dark(oklch(0.92 0.08 80), oklch(0.58 0.19 60)); --g2: light-dark(oklch(0.82 0.15 45), oklch(0.45 0.22 35)); --g3: light-dark(oklch(0.75 0.17 15), oklch(0.35 0.2 10)); background: linear-gradient(135deg, var(--g1), var(--g2), var(--g3)); } .gradient-ocean { --g1: light-dark(oklch(0.88 0.08 220), oklch(0.45 0.12 220)); --g2: light-dark(oklch(0.78 0.1 230), oklch(0.35 0.14 235)); --g3: light-dark(oklch(0.7 0.12 250), oklch(0.25 0.13 255)); background: radial-gradient( ellipse at 30% 80%, var(--g1), var(--g2), var(--g3) ); } .gradient-aurora { --g1: light-dark(oklch(0.88 0.1 160), oklch(0.42 0.14 155)); --g2: light-dark(oklch(0.84 0.1 190), oklch(0.38 0.13 195)); --g3: light-dark(oklch(0.82 0.08 260), oklch(0.32 0.15 265)); --g4: light-dark(oklch(0.86 0.06 300), oklch(0.36 0.12 310)); background: linear-gradient( 160deg, var(--g1), var(--g2), var(--g3), var(--g4) ); } .gradient-midnight { --g1: light-dark(oklch(0.75 0.06 270), oklch(0.3 0.08 275)); --g2: light-dark(oklch(0.6 0.08 260), oklch(0.2 0.1 260)); --g3: light-dark(oklch(0.5 0.1 250), oklch(0.13 0.08 250)); background: radial-gradient( circle at 50% 50%, var(--g1), var(--g2), var(--g3) ); } .gradient-dawn { --g1: light-dark(oklch(0.93 0.06 85), oklch(0.5 0.12 75)); --g2: light-dark(oklch(0.9 0.09 50), oklch(0.42 0.16 40)); --g3: light-dark(oklch(0.88 0.1 340), oklch(0.38 0.15 335)); background: linear-gradient(to top right, var(--g1), var(--g2), var(--g3)); } .gradient-forest { --g1: light-dark(oklch(0.88 0.08 145), oklch(0.42 0.1 150)); --g2: light-dark(oklch(0.78 0.1 150), oklch(0.32 0.12 148)); --g3: light-dark(oklch(0.72 0.09 130), oklch(0.25 0.09 135)); background: linear-gradient(to bottom, var(--g1), var(--g2), var(--g3)); } .gradient-lavender { --g1: light-dark(oklch(0.92 0.06 300), oklch(0.48 0.12 305)); --g2: light-dark(oklch(0.86 0.08 285), oklch(0.38 0.14 285)); --g3: light-dark(oklch(0.82 0.1 310), oklch(0.32 0.13 315)); background: radial-gradient( ellipse at 70% 20%, var(--g1), var(--g2), var(--g3) ); } .gradient-neon { --g1: light-dark(oklch(0.85 0.18 330), oklch(0.6 0.28 330)); --g2: light-dark(oklch(0.8 0.16 290), oklch(0.5 0.26 290)); --g3: light-dark(oklch(0.82 0.15 195), oklch(0.55 0.22 195)); background: linear-gradient(70deg, var(--g1), var(--g2), var(--g3)); } .gradient-slate { --g1: light-dark(oklch(0.94 0.01 260), oklch(0.35 0.015 260)); --g2: light-dark(oklch(0.88 0.015 250), oklch(0.28 0.02 250)); --g3: light-dark(oklch(0.85 0.01 240), oklch(0.22 0.015 240)); background: linear-gradient(170deg, var(--g1), var(--g2), var(--g3)); } .gradient-surface { --g1: light-dark(oklch(0.97 0.005 260), oklch(0.22 0.008 260)); --g2: light-dark(oklch(0.95 0.003 250), oklch(0.18 0.005 250)); background: radial-gradient(ellipse at 50% 0%, var(--g1), var(--g2)); } .gradient-text { -webkit-background-clip: text; background-clip: text; color: transparent; } /* END UTILITIES */ /* LAYOUTS */ /* * Gap Variable Pattern: * - Grid layouts (layout-card, layout-sidebar, etc.): var(--layout-gap, var(--gap, 2rem)) * - Flex layouts (stack, carousel, reel): var(--gap, 1rem) * - Cluster: var(--gap, 0.5rem) * - Components: var(--gap, 1rem) * * Override any gap inline with --gap. * Grid layouts also accept --layout-gap for layout-specific control. */ /* Card Grid Layout - Auto-fill responsive card grid */ .layout-card { display: grid; grid-template-columns: repeat( auto-fill, minmax(var(--layout-min-card-width, var(--min-card-width, 290px)), 1fr) ); gap: var(--layout-gap, var(--gap, 2rem)); } /* Sidebar Layout - Sidebar + main content area */ .layout-sidebar { display: grid; grid-template-columns: 250px 1fr; gap: var(--layout-gap, var(--gap, 2rem)); align-items: start; } .layout-sidebar.narrow { grid-template-columns: 150px 1fr; } .layout-sidebar.wide { grid-template-columns: 350px 1fr; } .layout-sidebar.invert { grid-template-columns: 1fr 250px; /* Place first child (sidebar) in second column, second child (main) in first column */ > :first-child { grid-column: 2; grid-row: 1; } > :nth-child(2) { grid-column: 1; grid-row: 1; } } .layout-sidebar.invert.narrow { grid-template-columns: 1fr 150px; } .layout-sidebar.invert.wide { grid-template-columns: 1fr 350px; } .layout-sidebar.fill { --layout-gap: 0; align-items: stretch; height: var(--app-shell-min-height, 100dvh); > * { min-block-size: 0; } /* Sidebar is always :first-child in DOM, even for .invert (CSS grid handles visual placement) */ > :first-child:not(.app-shell) { overflow-y: auto; overscroll-behavior: contain; } > :nth-child(2):not(.app-shell) { overflow-y: auto; overscroll-behavior: contain; } > .app-shell { --app-shell-min-height: 100%; min-height: 100%; } } /* Fixed sidebar - stays pinned while main content scrolls */ /* Sidebar is always :first-child in DOM, even for .invert (CSS grid handles visual placement) */ .layout-sidebar.fixed > :first-child { position: sticky; inset-block-start: 0; align-self: start; max-height: 100dvh; } .layout-sidebar.fixed > :first-child:not(.app-shell) { overflow-y: auto; overscroll-behavior: contain; } .layout-sidebar.layout-readable { --max-width: 1400px; } /* Container query version - responds to parent container size */ @container (max-width: 768px) { .layout-sidebar, .layout-sidebar.narrow, .layout-sidebar.wide, .layout-sidebar.invert, .layout-sidebar.invert.narrow, .layout-sidebar.invert.wide { grid-template-columns: 1fr; } /* Hide sidebar on mobile; .drawer keeps its popover toggle. */ .layout-sidebar > :first-child:not(.drawer) { display: none; } .layout-sidebar.invert > :first-child, .layout-sidebar.invert > :nth-child(2) { grid-column: auto; grid-row: auto; } } /* Media query fallback - for when not inside a container */ @media (width < 768px) { .layout-sidebar, .layout-sidebar.narrow, .layout-sidebar.wide, .layout-sidebar.invert, .layout-sidebar.invert.narrow, .layout-sidebar.invert.wide { grid-template-columns: 1fr; } /* Hide sidebar on mobile; .drawer keeps its popover toggle. */ .layout-sidebar > :first-child:not(.drawer) { display: none; } /* Reset grid placement for invert on mobile */ .layout-sidebar.invert > :first-child, .layout-sidebar.invert > :nth-child(2) { grid-column: auto; grid-row: auto; } } /* Drawer + layout-sidebar integration (responsive) */ @media (width >= 768px) { /* Desktop: hide toggle, inline the drawer as static sidebar */ .layout-sidebar .drawer-toggle { display: none; } .layout-sidebar > [popover].drawer { position: static; inset: auto; translate: none; transition: none; inline-size: auto; max-inline-size: none; block-size: auto; border: none; background: transparent; } .layout-sidebar > [popover].drawer:not(:popover-open) { display: block; } } @media (width < 768px) { /* Mobile: show toggle, drawer behaves as popover slide-in */ .layout-sidebar .drawer-toggle { display: inline-flex; } .layout-sidebar > [popover].drawer:not(:popover-open) { display: none; } } /* Split Layout - 50/50 two column layout */ .layout-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--layout-gap, var(--gap, 2rem)); align-items: start; } @media (width < 768px) { .layout-split { grid-template-columns: 1fr; } .layout-split.no-stack { grid-template-columns: 1fr 1fr; } } /* Three Column Layout - Three equal columns */ .layout-three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--layout-gap, var(--gap, 2rem)); align-items: start; } @media (width < 1024px) { .layout-three-col { grid-template-columns: 1fr 1fr; } } @media (width < 768px) { .layout-three-col { grid-template-columns: 1fr; } } /* Readable Layout - Max-width for optimal readability */ .layout-readable { inline-size: 100%; max-inline-size: var(--layout-max-width, var(--max-width, 1200px)); padding-inline: var(--layout-padding, var(--padding, 2rem)); margin: 0 auto; } .layout-readable.center { margin-inline: auto; } .layout-readable.end { margin-inline-start: auto; } .layout-holy-grail { display: grid; grid-template-columns: auto 1fr auto; gap: var(--layout-gap, var(--gap, 2rem)); } @media (width < 768px) { .layout-holy-grail { grid-template-columns: 1fr; } } /* Full Bleed - Break out of readable container */ .layout-readable .full-bleed { inline-size: 100vi; margin-inline: calc(50% - 50vi); } /* Section spacing */ .section { padding-block: var(--section-padding, var(--pad-xxxl)); } /* Stack Layout - Vertical flexbox stack */ .stack { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--gap, 1rem); } :is(.stack) > * { margin-block: 0; margin-inline: 0; } /* Cluster Layout - Horizontal wrapping list with gap */ .cluster { display: flex; flex-wrap: wrap; --gap: 0.5rem; gap: var(--gap); align-items: center; &.center { justify-content: center; } } /* Carousel Layout - Horizontal scroll with scroll snap */ .carousel { display: flex; gap: var(--gap, 1rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--layout-padding, var(--padding, 1rem)); scrollbar-width: thin; > * { scroll-snap-align: start; flex-shrink: 0; } } /* Reel Layout - Vertical scroll with scroll snap */ .reel { display: flex; flex-direction: column; gap: var(--gap, 1rem); overflow-y: auto; scroll-snap-type: y mandatory; scroll-padding-block: var(--layout-padding, var(--padding, 1rem)); scrollbar-width: thin; max-height: var(--reel-height, 80vh); > * { scroll-snap-align: start; flex-shrink: 0; } } .swipe { container-type: inline-size; display: grid; grid-template-columns: auto 1fr auto; overflow-x: auto; scroll-snap-type: x mandatory; border-block: var(--border-1); -ms-overflow-style: none; scrollbar-width: none; > :nth-child(2) { inline-size: 100cqw; scroll-snap-align: center; padding: var(--pad-l) var(--vs-base); } > button { border-radius: 0; box-shadow: 1px 1px 4px rgb(0 0 0 / 0.5) inset; border: none; inline-size: 200px; } &.stop { > * { &:first-of-type { animation: snap_start_hack 0.001s forwards; /* Already imperceptible (0.001s); keep identical under reduced motion so the scroll-snap-align side effect still applies. */ --animation-reduced: snap_start_hack 0.001s forwards; } &:last-of-type { scroll-snap-align: end; } } } } /* Thank you Adam Argyle @argyleink for this hack.*/ /* nerdy.dev */ @keyframes snap_start_hack { to { scroll-snap-align: start; } } :where(h1, h2, h3, h4, h5, h6) { view-transition-name: var(--transition-name); text-wrap: balance; } :where(p, li, blockquote) { text-wrap: pretty; } /* END LAYOUTS */ /* COMPONENTS */ /* Boxes */ .box { background: var(--fg-05); padding: var(--pad-m); border-radius: var(--br-s); border: var(--border-1); } .box.ghost { background: transparent; } .box.invisible { background: transparent; border: none; box-shadow: none; } .box.glow { box-shadow: var(--box); } .box.semi-gloss { box-shadow: var(--box), var(--shadow-5); background: linear-gradient(180deg, var(--fg-05) 0%, var(--fg-1) 100%); } /* Card */ .card { background: var(--bg); border: var(--border-1); border-radius: var(--br-l); box-shadow: var(--shadow-2); overflow: clip; padding: var(--pad-l); display: flex; flex-direction: column; --gap: var(--vs-s); gap: var(--gap); @media (forced-colors: active) { /* The box-shadow that conveys card separation is stripped. Use a visible border instead. */ border: 1px solid CanvasText; background: Canvas; } } .card > * { margin: 0; } .card.linked { text-decoration: none; color: var(--fg); cursor: pointer; transition: box-shadow var(--d-fast) var(--ease-smooth), border-color var(--d-fast) var(--ease-smooth), translate var(--d-fast) var(--ease-smooth); &:visited { color: var(--fg); } &:hover { border-color: var(--fg-3); box-shadow: var(--shadow-3); translate: 0 -1px; } &:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); } &:active { border-color: var(--fg-4); box-shadow: var(--shadow-2); translate: 0; } @media (forced-colors: active) { &:hover { border-color: LinkText; } &:active { border-color: ActiveText; } &:focus-visible { outline: 2px solid LinkText; } } } /* Direct
/