daftcss 1.3.0

package/dist/daft.min.css

@@ -0,0 +1 @@
+@layer tokens{:root{color-scheme:light dark;--spacing:1rem;--radius:.625rem;--component-height:2.25rem;--font-size-base:1rem;--line-height:1.5;--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--transition:.15s;--ease-default:cubic-bezier(.4,0,.2,1);--background:light-dark(oklch(100% 0 0),oklch(14.5% 0 0));--foreground:light-dark(oklch(14.5% 0 0),oklch(98.5% 0 0));--card:light-dark(oklch(100% 0 0),oklch(20.5% 0 0));--popover:light-dark(oklch(100% 0 0),oklch(26.9% 0 0));--primary:light-dark(oklch(20.5% 0 0),oklch(92.2% 0 0));--muted:light-dark(oklch(97% 0 0),oklch(26.9% 0 0));--destructive:light-dark(oklch(57.7% .245 27.325),oklch(70.4% .191 22.216));--success:light-dark(oklch(55% .16 145),oklch(72% .16 145));--warning:light-dark(oklch(68% .16 70),oklch(82% .16 80));--border:light-dark(oklch(92.2% 0 0),oklch(100% 0 0/.1));--spacing-xs:calc(var(--spacing)*.25);--spacing-sm:calc(var(--spacing)*.5);--spacing-md:calc(var(--spacing)*.75);--spacing-lg:calc(var(--spacing)*1.5);--spacing-xl:calc(var(--spacing)*2);--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);--radius-full:9999px;--text-xs:calc(var(--font-size-base)*.75);--text-sm:calc(var(--font-size-base)*.875);--text-base:var(--font-size-base);--text-lg:calc(var(--font-size-base)*1.125);--text-xl:calc(var(--font-size-base)*1.25);--text-2xl:calc(var(--font-size-base)*1.5);--text-3xl:calc(var(--font-size-base)*1.875);--text-4xl:calc(var(--font-size-base)*2.25);--line-height-sm:calc(var(--line-height) - .25);--line-height-lg:calc(var(--line-height) + .25);--font-normal:400;--font-medium:500;--font-semibold:600;--font-bold:700;--font-extrabold:800;--transition-fast:calc(var(--transition)*.67);--transition-slow:calc(var(--transition)*2);--transition-default:var(--transition)var(--ease-default);--component-height-sm:calc(var(--component-height) - .25rem);--component-height-lg:calc(var(--component-height) + .25rem);--shadow-xs:0 1px 2px 0 light-dark(#0000000d,#0000004d);--shadow-sm:0 1px 3px 0 light-dark(#0000001a,#0006),0 1px 2px -1px light-dark(#0000001a,#0006);--shadow-md:0 4px 6px -1px light-dark(#0000001a,#0006),0 2px 4px -2px light-dark(#0000001a,#0006);--shadow-lg:0 10px 15px -3px light-dark(#0000001a,#0006),0 4px 6px -4px light-dark(#0000001a,#0006);--card-foreground:var(--foreground);--popover-foreground:var(--card-foreground);--muted-foreground:light-dark(oklch(55.6% 0 0),oklch(70.8% 0 0));--primary-foreground:oklch(98.5% 0 0);--destructive-foreground:oklch(98.5% 0 0);--success-foreground:light-dark(oklch(98.5% 0 0),oklch(14.5% 0 0));--warning-foreground:oklch(14.5% 0 0);--accent:var(--muted);--accent-foreground:var(--foreground);--button-radius:var(--radius-md);--input-radius:var(--radius-md);--card-radius:var(--radius-xl);--modal-radius:var(--radius-lg);--dropdown-radius:var(--radius-md);--tooltip-radius:var(--radius-md);--badge-radius:var(--radius-md);--progress-radius:var(--radius-full);--button-shadow:var(--shadow-xs);--card-shadow:var(--shadow-xs);--dropdown-shadow:var(--shadow-md);--popover-shadow:var(--shadow-md);--modal-shadow:var(--shadow-lg);--button-height:var(--component-height);--button-height-sm:var(--component-height-sm);--button-height-lg:var(--component-height-lg);--input:light-dark(oklch(92.2% 0 0),oklch(100% 0 0/.15));--input-height:var(--component-height);--input-background:var(--card);--control-size:1rem;--switch-width:2rem;--switch-height:1.25rem;--switch-thumb:1rem;--modal-overlay:light-dark(oklch(0% 0 0/.5),oklch(0% 0 0/.7));--breadcrumb-divider:"›";--aside-width:clamp(14rem,20vw,20rem);--hover-opacity:90%;--active-opacity:85%;--disabled-opacity:.5;--ring:light-dark(oklch(70.8% 0 0),oklch(55.6% 0 0));--focus-ring-width:3px;--focus-ring-opacity:50%;--border-width:1px;--outline-width:2px;--outline-offset:2px;--icon-size:1rem;--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");--icon-select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}@supports (color:oklch(from red l c h)){:root{--primary-foreground:oklch(from var(--primary)clamp(0,(l/.623 - 1)*-infinity,1)0 h);--destructive-foreground:oklch(from var(--destructive)clamp(0,(l/.623 - 1)*-infinity,1)0 h);--success-foreground:oklch(from var(--success)clamp(0,(l/.623 - 1)*-infinity,1)0 h);--warning-foreground:oklch(from var(--warning)clamp(0,(l/.623 - 1)*-infinity,1)0 h)}}@supports (color:contrast-color(red)){:root{--primary-foreground:contrast-color(var(--primary));--destructive-foreground:contrast-color(var(--destructive));--success-foreground:contrast-color(var(--success));--warning-foreground:contrast-color(var(--warning))}}}@layer reset{*,:before,:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{-webkit-font-smoothing:antialiased;line-height:1.5}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit;color:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}ul[role=list],ol[role=list]{padding:0;list-style:none}button{cursor:pointer;background:0 0;border:none;padding:0}fieldset{border:none;margin:0;padding:0}legend{padding:0}summary{cursor:pointer}textarea{resize:vertical}table{border-collapse:collapse;border-spacing:0}input,textarea,select,button{font-family:inherit;font-size:inherit}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}}@layer base{[data-theme=light]{color-scheme:light}[data-theme=dark]{color-scheme:dark}[data-theme]{background-color:var(--background);color:var(--foreground)}html{color-scheme:light dark;scroll-behavior:smooth}body{font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--font-normal);line-height:var(--line-height);color:var(--foreground);background-color:var(--background);min-height:100dvh}:focus-visible{outline:var(--outline-width)solid var(--ring);outline-offset:var(--outline-offset)}::selection{background-color:color-mix(in oklch,var(--primary)30%,transparent);color:var(--foreground)}::-webkit-scrollbar{width:.75rem;height:.75rem}::-webkit-scrollbar-track{background:var(--muted)}::-webkit-scrollbar-thumb{background:var(--muted-foreground);border-radius:var(--radius-full);border:3px solid var(--muted)}::-webkit-scrollbar-thumb:hover{background:color-mix(in oklch,var(--muted-foreground)80%,var(--foreground))}*{scrollbar-width:thin;scrollbar-color:var(--muted-foreground)var(--muted)}}@layer layout{.container{width:100%;padding-left:var(--spacing);padding-right:var(--spacing);margin-left:auto;margin-right:auto}@media (width>=576px){.container{max-width:540px;padding-left:0;padding-right:0}}@media (width>=768px){.container{max-width:720px}}@media (width>=1024px){.container{max-width:960px}}@media (width>=1280px){.container{max-width:1140px}}@media (width>=1536px){.container{max-width:1320px}}.container-fluid{width:100%;padding-left:var(--spacing);padding-right:var(--spacing);margin-left:auto;margin-right:auto}@media (width>=768px){.container-fluid{padding-left:var(--spacing-lg);padding-right:var(--spacing-lg)}}@media (width>=1024px){.container-fluid{padding-left:var(--spacing-xl);padding-right:var(--spacing-xl)}}main{min-height:1px;display:block}body>header,main>header,.container>header,body>footer,main>footer,.container>footer{padding-block:var(--spacing)}section{margin-bottom:var(--spacing-xl)}section:last-child{margin-bottom:0}section section,body>article,main>article,section>article,.container>article{margin-bottom:var(--spacing)}@media (width>=768px){section{margin-bottom:calc(var(--spacing-xl)*1.5)}}.grid{gap:var(--spacing);margin-bottom:var(--spacing);grid-template-columns:1fr;display:grid}.grid:last-child{margin-bottom:0}@media (width>=768px){.grid{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.grid:has(>:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}.grid:has(>:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}.grid:has(>:nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}.grid:has(>:nth-child(5):last-child){grid-template-columns:repeat(5,1fr)}.grid:has(>:nth-child(6):last-child){grid-template-columns:repeat(6,1fr)}}.grid>*{min-width:0}.grid>[data-span=full]{grid-column:1/-1}.grid>.span-2{grid-column:span 2}.grid>.span-3{grid-column:span 3}.grid>.span-4{grid-column:span 4}.overflow-auto{-webkit-overflow-scrolling:touch;overflow-x:auto}.overflow-auto>table{margin-bottom:0}.overflow-auto{position:relative}pre.overflow-auto{overflow-x:auto}}@layer content{h1,h2,h3,h4,h5,h6{color:var(--foreground);font-weight:var(--font-semibold);line-height:var(--line-height-sm);letter-spacing:-.025em;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm)}h1{font-size:var(--text-4xl);font-weight:var(--font-extrabold);line-height:1}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}h5{font-size:var(--text-lg)}h6{font-size:var(--text-base)}hgroup{margin-bottom:var(--spacing);&>h1,&>h2,&>h3,&>h4,&>h5,&>h6{margin-bottom:var(--spacing-sm)}&>p{color:var(--muted-foreground);margin-bottom:0}}p{margin-bottom:var(--spacing);line-height:var(--line-height-lg)}p:last-child,h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child{margin-bottom:0}strong,b{font-weight:var(--font-semibold)}em,i{font-style:italic}small{font-size:var(--text-sm)}a{color:var(--primary);text-underline-offset:.2em;transition:color var(--transition-default);text-decoration:underline;&:hover{color:color-mix(in oklch,var(--primary)80%,var(--foreground))}&:focus-visible{outline:var(--outline-width)solid var(--ring);outline-offset:var(--outline-offset);border-radius:var(--radius-sm)}}mark{background-color:color-mix(in oklch,var(--muted)40%,transparent);color:var(--foreground);border-radius:var(--radius-sm);padding:.125em .25em}del{color:var(--muted-foreground);text-decoration:line-through}ins{text-decoration:underline wavy;text-decoration-color:var(--primary)}u{text-underline-offset:.2em;text-decoration:underline}s{text-decoration:line-through}abbr[title]{cursor:help;text-decoration:underline dotted}cite{font-style:italic}dfn{font-style:italic;font-weight:var(--font-medium)}sub,sup{vertical-align:baseline;font-size:.75em;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}hr{height:var(--border-width);background-color:var(--border);margin:var(--spacing-lg)0;border:none}blockquote{border-left:4px solid var(--border);padding-left:var(--spacing);margin:var(--spacing)0;color:var(--muted-foreground);font-style:italic;&>p{margin-bottom:var(--spacing-sm)}&>footer{font-size:var(--text-sm);color:var(--muted-foreground);font-style:normal}}ul,ol{margin-bottom:var(--spacing);padding-left:calc(var(--spacing)*1.25)}ul{list-style-type:disc}ol{list-style-type:decimal}li{line-height:var(--line-height-lg)}ul ul,ol ol,ul ol,ol ul{margin-top:var(--spacing-xs);margin-bottom:0}dl{margin-bottom:var(--spacing)}dt{font-weight:var(--font-semibold);margin-bottom:var(--spacing-xs)}dd{margin-left:var(--spacing);margin-bottom:var(--spacing-md);color:var(--muted-foreground)}dd:last-child{margin-bottom:0}address{margin-bottom:var(--spacing);font-style:normal}time{font-variant-numeric:tabular-nums}img{border-radius:var(--radius-md);max-width:100%;height:auto}figure{margin:var(--spacing)0;&>img,&>picture>img,&>video,&>iframe{border-radius:var(--radius-lg)}&>figcaption{font-size:var(--text-sm);color:var(--muted-foreground);margin-top:var(--spacing-sm);text-align:center}}figure:has(>table){-webkit-overflow-scrolling:touch;overflow-x:auto;&>table{margin:0}}picture{display:block}video{border-radius:var(--radius-lg);max-width:100%;height:auto}audio{width:100%}iframe{border:var(--border-width)solid var(--border);border-radius:var(--radius-lg);max-width:100%}svg{fill:currentColor}svg:not([width]){width:1em;height:1em}object,embed{max-width:100%}canvas{display:block}code{font-family:var(--font-mono);font-size:.875em;font-weight:var(--font-medium);background-color:var(--muted);color:var(--foreground);border-radius:var(--radius-sm);white-space:nowrap;padding:.2em .4em}a>code{color:inherit}pre{font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--line-height-lg);background-color:var(--muted);color:var(--foreground);padding:var(--spacing);border-radius:var(--radius-lg);-webkit-overflow-scrolling:touch;margin-bottom:var(--spacing);tab-size:2;overflow-x:auto;&>code{font-size:inherit;white-space:pre;background:0 0;border-radius:0;padding:0}}[data-theme=dark] pre{background-color:oklch(18% 0 0)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) pre{background-color:oklch(18% 0 0)}}kbd{font-family:var(--font-mono);font-size:.875em;font-weight:var(--font-medium);background-color:var(--muted);color:var(--foreground);border-radius:var(--radius-sm);border:var(--border-width)solid var(--border);box-shadow:0 2px 0 var(--border);padding:.2em .4em}kbd>kbd{box-shadow:none;background:0 0;border:none;padding:0}samp{font-family:var(--font-mono);background-color:var(--muted);color:var(--muted-foreground);border-radius:var(--radius-sm);padding:.2em .4em;font-size:.875em}var{font-family:var(--font-mono);color:var(--primary);font-style:italic}data{font-variant-numeric:tabular-nums}}@layer forms{input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=reset]):not([type=button])),textarea,select{width:100%;height:var(--input-height);padding:var(--spacing-sm)var(--spacing-md);font-family:inherit;font-size:var(--text-base);font-weight:var(--font-normal);line-height:var(--line-height);color:var(--foreground);background-color:var(--input-background);border:var(--border-width)solid var(--input);border-radius:var(--input-radius);transition:border-color var(--transition-default),box-shadow var(--transition-default);appearance:none;display:block;&::placeholder{color:var(--muted-foreground);opacity:1}&:focus-visible{border-color:var(--ring);box-shadow:0 0 0 var(--focus-ring-width)color-mix(in oklch,var(--ring)var(--focus-ring-opacity),transparent);outline:none}&:disabled{cursor:not-allowed;opacity:var(--disabled-opacity);background-color:var(--muted);border-color:var(--muted-foreground)}}form:not([role=search]) :is(button,[type=submit],[type=reset],[type=button]):not(.icon){width:100%}input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=reset]):not([type=button])):read-only,textarea:read-only{background-color:var(--muted)}textarea{height:auto;min-height:calc(var(--input-height)*2);padding:var(--spacing-md);resize:vertical}select{line-height:calc(var(--input-height) - 2*var(--border-width) - 2*var(--spacing-sm));padding-right:var(--spacing-xl);background-image:var(--icon-select-chevron);background-repeat:no-repeat;background-position:right var(--spacing-md)center;background-size:var(--icon-size);&[multiple]{height:auto;padding-right:var(--spacing-md);background-image:none}}input[type=file]{width:100%;height:var(--input-height);padding:0 var(--spacing-sm);font-size:var(--text-sm);font-weight:var(--font-medium);line-height:calc(var(--input-height) - 2*var(--border-width));color:var(--foreground);background-color:var(--input-background);border:var(--border-width)solid var(--input);border-radius:var(--input-radius);cursor:pointer;transition:border-color var(--transition-default);&::file-selector-button{padding:var(--spacing-xs)var(--spacing-md);margin-right:var(--spacing-md);font-weight:var(--font-medium);color:var(--foreground);background-color:var(--accent);border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--transition-default);border:none}&:hover::file-selector-button{background-color:color-mix(in oklch,var(--accent)80%,var(--foreground)5%)}&:focus-visible{border-color:var(--ring);box-shadow:0 0 0 var(--focus-ring-width)color-mix(in oklch,var(--ring)var(--focus-ring-opacity),transparent);outline:none}}input[type=color]{width:100%;height:var(--input-height);background-color:var(--input-background);border:var(--border-width)solid var(--input);border-radius:var(--input-radius);cursor:pointer;padding:6px;&::-webkit-color-swatch-wrapper{padding:0}&::-webkit-color-swatch{border-radius:var(--radius-sm);border:none}&::-moz-color-swatch{border-radius:var(--radius-sm);border:none}}input[type=search]{border-radius:var(--radius-full);padding-left:var(--spacing);padding-right:var(--spacing);&::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}}input[type=date],input[type=datetime-local],input[type=month],input[type=time],input[type=week]{&::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6;transition:opacity var(--transition-default)}&::-webkit-calendar-picker-indicator:hover{opacity:1}}label{margin-bottom:var(--spacing-sm);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--foreground);display:block}label:has(>input),label:has(>select),label:has(>textarea){display:block;&>input,&>select,&>textarea{margin-top:var(--spacing-sm)}}small{margin-top:var(--spacing-xs);font-size:var(--text-sm);color:var(--muted-foreground);display:block}form{&>label,&>input,&>textarea,&>select,&>fieldset,&>div,&>p,&>small{margin-bottom:var(--spacing)}&>:last-child{margin-bottom:0}}fieldset{margin-bottom:var(--spacing)}fieldset:last-child{margin-bottom:0}legend{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--foreground);margin-bottom:var(--spacing-md)}fieldset:disabled{opacity:var(--disabled-opacity)}fieldset:disabled *{cursor:not-allowed}input[type=checkbox],input[type=radio]{width:var(--control-size);height:var(--control-size);vertical-align:middle;cursor:pointer;appearance:none;background-color:var(--background);border:var(--border-width)solid var(--input);transition:background-color var(--transition-default),border-color var(--transition-default),box-shadow var(--transition-default);margin:0;position:relative}input[type=checkbox]{border-radius:var(--radius-sm)}input[type=radio]{border-radius:var(--radius-full)}input[type=checkbox]:checked,input[type=radio]:checked{background-color:var(--primary);border-color:var(--primary)}input[type=checkbox]:checked:after{content:"";background-color:var(--primary-foreground);position:absolute;inset:0;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:.875rem;mask-size:.875rem;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}input[type=radio]:checked:after{content:"";background-color:var(--primary-foreground);position:absolute;inset:0;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:.875rem;mask-size:.875rem;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}input[type=checkbox]:indeterminate{background-color:var(--primary);border-color:var(--primary)}input[type=checkbox]:indeterminate:after{content:"";background-color:var(--primary-foreground);position:absolute;inset:0;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:.875rem;mask-size:.875rem;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{border-color:var(--ring);box-shadow:0 0 0 var(--focus-ring-width)color-mix(in oklch,var(--ring)var(--focus-ring-opacity),transparent);outline:none}input[type=checkbox]:disabled,input[type=radio]:disabled{cursor:not-allowed;opacity:var(--disabled-opacity)}label:has(>input[type=checkbox]),label:has(>input[type=radio]){align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm);font-weight:var(--font-normal);cursor:pointer;display:flex;&>input{flex-shrink:0;margin-top:0}}label:has(>input:disabled),label[aria-disabled=true]{cursor:not-allowed;opacity:var(--disabled-opacity)}input[type=checkbox][role=switch]{width:var(--switch-width);height:var(--switch-height);border-radius:var(--radius-full);background-color:var(--muted-foreground);border-color:var(--muted-foreground);transition:background-color var(--transition-default);position:relative}input[type=checkbox][role=switch]:before{content:"";width:var(--switch-thumb);height:var(--switch-thumb);background-color:var(--background);border-radius:var(--radius-full);transition:transform var(--transition-default);margin:auto 0;position:absolute;top:0;bottom:0;left:1px}input[type=checkbox][role=switch]:checked:after{display:none}input[type=checkbox][role=switch]:checked{background-color:var(--primary);border-color:var(--primary)}input[type=checkbox][role=switch]:checked:before{transform:translateX(calc(var(--switch-width) - var(--switch-thumb) - 2*var(--border-width) - 2px))}input[type=checkbox][role=switch]:focus-visible{box-shadow:0 0 0 var(--focus-ring-width)color-mix(in oklch,var(--ring)var(--focus-ring-opacity),transparent)}input[type=range]{cursor:pointer;appearance:none;background:0 0;width:100%;height:1.5rem;padding:0}input[type=range]::-webkit-slider-runnable-track{background-color:var(--muted);border-radius:var(--radius-full);width:100%;height:.5rem;transition:background-color var(--transition-default)}input[type=range]::-moz-range-track{background-color:var(--muted);border-radius:var(--radius-full);width:100%;height:.5rem;transition:background-color var(--transition-default)}input[type=range]::-webkit-slider-thumb{width:var(--control-size);height:var(--control-size);margin-top:calc((.5rem - var(--control-size))/2);background-color:var(--foreground);border-radius:var(--radius-md);cursor:pointer;appearance:none;transition:background-color var(--transition-default),transform var(--transition-default);border:none}input[type=range]::-moz-range-thumb{width:var(--control-size);height:var(--control-size);background-color:var(--foreground);border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-default),transform var(--transition-default);border:none}input[type=range]:hover::-webkit-slider-thumb{background-color:var(--primary);transform:scale(1.1)}input[type=range]:hover::-moz-range-thumb{background-color:var(--primary);transform:scale(1.1)}input[type=range]:active::-webkit-slider-thumb{background-color:var(--primary);transform:scale(1.15)}input[type=range]:active::-moz-range-thumb{background-color:var(--primary);transform:scale(1.15)}input[type=range]:focus-visible{outline:none}input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 var(--focus-ring-width)color-mix(in oklch,var(--ring)var(--focus-ring-opacity),transparent)}input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 var(--focus-ring-width)color-mix(in oklch,var(--ring)var(--focus-ring-opacity),transparent)}input[type=range]:disabled{cursor:not-allowed;opacity:var(--disabled-opacity)}input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed}input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed}label:has(>input[type=range]){display:block;&>input[type=range]{margin-top:var(--spacing-sm)}}input[aria-invalid=true],textarea[aria-invalid=true],select[aria-invalid=true]{border-color:var(--destructive)}input[aria-invalid=false],textarea[aria-invalid=false],select[aria-invalid=false]{border-color:var(--primary)}input[aria-invalid=true]+small,textarea[aria-invalid=true]+small,select[aria-invalid=true]+small,input[aria-invalid=true]~small,textarea[aria-invalid=true]~small,select[aria-invalid=true]~small{color:var(--destructive)}input[aria-invalid=false]+small,textarea[aria-invalid=false]+small,select[aria-invalid=false]+small,input[aria-invalid=false]~small,textarea[aria-invalid=false]~small,select[aria-invalid=false]~small{color:var(--primary)}input[type=checkbox][aria-invalid=true],input[type=radio][aria-invalid=true]{border-color:var(--destructive)}input[type=checkbox][aria-invalid=false],input[type=radio][aria-invalid=false]{border-color:var(--primary)}input:user-invalid:not([type=checkbox]):not([type=radio]),textarea:user-invalid{border-color:var(--destructive)}input:user-valid:not(:placeholder-shown):not([type=checkbox]):not([type=radio]),textarea:user-valid:not(:placeholder-shown){border-color:var(--primary)}label:has(+input:required):after,label:has(+textarea:required):after,label:has(+select:required):after,label:has(>input:required):after,label:has(>textarea:required):after,label:has(>select:required):after{content:" *";color:var(--destructive)}details.dropdown[aria-invalid=true]>summary{border-color:var(--destructive)}details.dropdown[aria-invalid=false]>summary{border-color:var(--primary)}}@layer components{:is(button,[type=submit],[type=reset],[type=button],[role=button]){justify-content:center;align-items:center;gap:var(--spacing-sm);height:var(--button-height);padding:var(--spacing-sm)var(--spacing);font-family:inherit;font-size:var(--text-sm);font-weight:var(--font-medium);line-height:calc(var(--button-height) - 2*var(--border-width) - 2*var(--spacing-sm));text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;border:var(--border-width)solid transparent;border-radius:var(--button-radius);transition:color var(--transition-default),background-color var(--transition-default),border-color var(--transition-default),box-shadow var(--transition-default);color:var(--primary-foreground);background-color:var(--primary);box-shadow:var(--button-shadow);text-decoration:none;display:inline-flex;&:hover{background-color:color-mix(in oklch,var(--primary)var(--hover-opacity),transparent)}&:active{background-color:color-mix(in oklch,var(--primary)var(--active-opacity),transparent)}&:focus-visible{box-shadow:var(--button-shadow),0 0 0 var(--focus-ring-width)color-mix(in oklch,var(--ring)var(--focus-ring-opacity),transparent);outline:none}&:disabled,&[aria-disabled=true]{pointer-events:none;opacity:var(--disabled-opacity);cursor:not-allowed}&>svg{width:var(--icon-size);height:var(--icon-size);flex-shrink:0}}[type=reset]{color:var(--foreground);background-color:var(--accent);&:hover{background-color:color-mix(in oklch,var(--accent)80%,var(--foreground)5%)}}a[role=button]{text-decoration:none}:is(button,[type=submit],[type=button],[role=button]).secondary{color:var(--foreground);background-color:var(--accent);&:hover{background-color:color-mix(in oklch,var(--accent)80%,var(--foreground)5%)}&:active{background-color:color-mix(in oklch,var(--accent)70%,var(--foreground)10%)}}:is(button,[role=button]).destructive{color:var(--destructive-foreground);background-color:var(--destructive);&:hover{background-color:color-mix(in oklch,var(--destructive)var(--hover-opacity),transparent)}&:active{background-color:color-mix(in oklch,var(--destructive)var(--active-opacity),transparent)}&:focus-visible{box-shadow:var(--button-shadow),0 0 0 var(--focus-ring-width)color-mix(in oklch,var(--destructive)var(--focus-ring-opacity),transparent)}}:is(button,[type=submit],[type=button],[role=button]).outline{color:var(--primary);background-color:var(--background);border-color:var(--primary);&:hover{background-color:var(--primary);color:var(--primary-foreground)}&:focus-visible{box-shadow:var(--button-shadow),0 0 0 var(--focus-ring-width)color-mix(in oklch,var(--primary)var(--focus-ring-opacity),transparent)}}:is(button,[role=button]).outline.secondary{color:var(--foreground);border-color:var(--border);&:hover{background-color:var(--accent)}}:is(button,[role=button]).ghost{color:var(--foreground);box-shadow:none;background-color:#0000;&:hover{background-color:var(--accent);color:var(--accent-foreground)}}:is(button,[role=button]).link{color:var(--primary);box-shadow:none;text-underline-offset:4px;background-color:#0000;&:hover{text-decoration:underline}}:is(button,[role=button])[aria-current=true]{background-color:var(--primary);color:var(--primary-foreground);border-color:var(--primary);&:hover{background-color:color-mix(in oklch,var(--primary)var(--hover-opacity),transparent)}}:is(button,[role=button]).small{height:var(--button-height-sm);padding:var(--spacing-xs)var(--spacing-md);line-height:calc(var(--button-height-sm) - 2*var(--border-width) - 2*var(--spacing-xs))}:is(button,[role=button]).large{height:var(--button-height-lg);padding:var(--spacing-sm)var(--spacing-xl);line-height:calc(var(--button-height-lg) - 2*var(--border-width) - 2*var(--spacing-sm))}:is(button,[role=button]).icon{width:var(--button-height);padding:0}:is(button,[role=button]).icon.small{width:var(--button-height-sm)}:is(button,[role=button]).icon.large{width:var(--button-height-lg)}:is(button,[role=button]).full-width{width:100%}table{border-collapse:collapse;width:100%;margin-bottom:var(--spacing);font-size:var(--text-sm);font-variant-numeric:tabular-nums}thead{border-bottom:var(--border-width)solid var(--border)}th{height:2.5rem;padding:var(--spacing-sm);font-weight:var(--font-medium);text-align:left;color:var(--muted-foreground);background-color:#0000}tbody tr{border-bottom:var(--border-width)solid var(--border);transition:background-color var(--transition-default)}tbody tr:last-child{border-bottom:none}tbody tr:hover{background-color:color-mix(in oklch,var(--muted)50%,transparent)}td{padding:var(--spacing-sm);vertical-align:middle}tfoot{border-top:var(--border-width)solid var(--border)}tfoot td,tfoot th{padding:var(--spacing-sm);font-weight:var(--font-medium);color:var(--muted-foreground)}table.striped tbody tr:nth-child(odd){background-color:color-mix(in oklch,var(--muted)30%,transparent)}table.striped tbody tr:nth-child(odd):hover{background-color:color-mix(in oklch,var(--muted)60%,transparent)}caption{padding:var(--spacing-md)0;font-size:var(--text-sm);color:var(--muted-foreground);text-align:left;caption-side:bottom}figure>table,.overflow-auto>table,figure>table{margin-bottom:0}th[aria-sort]{cursor:pointer;user-select:none}th[aria-sort]:after{content:"";width:.75em;height:.75em;margin-left:var(--spacing-xs);vertical-align:middle;opacity:.5;display:inline-block}th[aria-sort=ascending]:after{content:"↑";opacity:1}th[aria-sort=descending]:after{content:"↓";opacity:1}article{padding:var(--spacing-lg);background-color:var(--card);color:var(--card-foreground);border:var(--border-width)solid var(--border);border-radius:var(--card-radius);box-shadow:var(--card-shadow);margin-bottom:var(--spacing)}article:last-child{margin-bottom:0}article>header{margin-bottom:var(--spacing);padding:0;&:last-child{margin-bottom:0}}article>header>strong,article>header>h1,article>header>h2,article>header>h3,article>header>h4,article>header>h5,article>header>h6{margin-bottom:var(--spacing-xs);font-size:var(--text-lg);font-weight:var(--font-semibold);line-height:var(--line-height-sm)}article>header>small,article>header>p{color:var(--muted-foreground);font-size:var(--text-sm);margin-bottom:0}article>footer{margin-top:var(--spacing);align-items:center;gap:var(--spacing-sm);padding:0;display:flex;&:first-child{margin-top:0}}article article{background-color:var(--muted);box-shadow:none;border:none}.grid>article{margin-bottom:0}a:has(>article){color:inherit;border-radius:var(--card-radius);transition:box-shadow var(--transition-default);text-decoration:none;display:block;&:hover>article{border-color:color-mix(in oklch,var(--border)80%,var(--foreground))}&:focus-visible{outline:var(--outline-width)solid var(--ring);outline-offset:var(--outline-offset)}}article[aria-busy=true]{min-height:8rem}details{margin-bottom:var(--spacing-sm);border-bottom:var(--border-width)solid var(--border)}details:last-child{margin-bottom:0}summary{padding:var(--spacing)0;font-weight:var(--font-medium);cursor:pointer;user-select:none;transition:color var(--transition-default);justify-content:space-between;align-items:center;list-style:none;display:flex;&::-webkit-details-marker{display:none}&:after{content:"";width:var(--icon-size);height:var(--icon-size);margin-left:var(--spacing-sm);mask-image:var(--icon-chevron);transition:transform var(--transition-default);background-color:currentColor;flex-shrink:0;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}&:hover{color:var(--primary)}&:focus-visible{outline:var(--outline-width)solid var(--ring);outline-offset:var(--outline-offset);border-radius:var(--radius-sm)}}details[open]>summary:not([role=button]){color:var(--primary)}details[open]>summary{&:after{transform:rotate(180deg)}}details>:not(summary){padding-bottom:var(--spacing-md)}details>p:last-child{margin-bottom:0}summary[role=button]{justify-content:space-between;align-items:center;gap:var(--spacing-sm);width:100%;height:var(--button-height);padding:var(--spacing-sm)var(--spacing);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--primary-foreground);background-color:var(--primary);border-radius:var(--radius-md);box-shadow:var(--button-shadow);transition:background-color var(--transition-default);display:flex;&:hover{background-color:color-mix(in oklch,var(--primary)var(--hover-opacity),transparent)}}summary[role=button].secondary{color:var(--foreground);background-color:var(--accent);&:hover{background-color:color-mix(in oklch,var(--accent)80%,var(--foreground)5%)}}summary[role=button].outline{color:var(--primary);background-color:var(--background);border:var(--border-width)solid var(--primary);&:hover{background-color:var(--primary);color:var(--primary-foreground)}}summary[role=button].destructive{color:var(--destructive-foreground);background-color:var(--destructive);&:hover{background-color:color-mix(in oklch,var(--destructive)var(--hover-opacity),transparent)}}details:has(>summary[role=button]){margin-bottom:var(--spacing);border-bottom:none}details.dropdown{border-bottom:none;margin-bottom:0;display:inline-block;position:relative}details.dropdown>summary{justify-content:space-between;align-items:center;gap:var(--spacing-sm);height:var(--input-height);padding:var(--spacing-sm)var(--spacing-md);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--foreground);background-color:var(--background);border:var(--border-width)solid var(--input);border-radius:var(--dropdown-radius);cursor:pointer;transition:border-color var(--transition-default),background-color var(--transition-default);display:inline-flex;&:after{content:"";width:var(--icon-size);height:var(--icon-size);mask-image:var(--icon-chevron);transition:transform var(--transition-default);background-color:currentColor;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}&:hover{border-color:var(--ring)}}details.dropdown[open]>summary{border-color:var(--ring);&:after{transform:rotate(180deg)}}details.dropdown>ul{z-index:50;min-width:10rem;margin:0;margin-top:var(--spacing-xs);padding:var(--spacing-xs);background-color:var(--popover);border:var(--border-width)solid var(--border);border-radius:var(--dropdown-radius);box-shadow:var(--dropdown-shadow);opacity:0;animation:dropdown-in var(--transition-default)forwards;list-style:none;position:absolute;transform:translateY(-.5rem)}@keyframes dropdown-in{to{opacity:1;transform:translateY(0)}}details.dropdown>ul>li{margin:0}details.dropdown>ul>li>a,details.dropdown>ul>li>label{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm)var(--spacing-md);font-size:var(--text-sm);color:var(--popover-foreground);border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--transition-default);text-decoration:none;display:flex;&:hover{background-color:var(--accent);color:var(--accent-foreground)}}details.dropdown>ul[dir=rtl]{text-align:left;direction:ltr;right:0}details.dropdown>summary[role=button]{border-color:#0000}details.dropdown>ul label:has(input[type=checkbox]),details.dropdown>ul label:has(input[type=radio]){margin-bottom:0}dialog{z-index:100;width:100%;max-width:100%;height:100%;max-height:100%;padding:var(--spacing);background-color:#0000;border:none;justify-content:center;align-items:center;display:flex;position:fixed;inset:0;overflow:auto}dialog::backdrop{background-color:var(--modal-overlay);backdrop-filter:blur(4px)}dialog:not([open]):not(:popover-open){display:none}dialog[popover]{margin:auto}dialog[popover]:popover-open{display:flex}dialog>article{width:100%;max-width:32rem;max-height:calc(100vh - var(--spacing-xl));padding:var(--spacing-lg);background-color:var(--card);border:var(--border-width)solid var(--border);border-radius:var(--modal-radius);box-shadow:var(--modal-shadow);animation:modal-in var(--transition-slow)var(--ease-default);margin:0;position:relative;overflow:auto}@keyframes modal-in{0%{opacity:0;transform:scale(.95)translateY(-1rem)}to{opacity:1;transform:scale(1)translateY(0)}}dialog>article>header{margin-bottom:var(--spacing-sm);padding:0;display:block}dialog>article>header>p{margin:0}dialog>article>header>strong,dialog>article>header>p>strong{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--foreground)}dialog>article>button[aria-label=Close],dialog>article>header>button[aria-label=Close],dialog>article>button[rel=prev],dialog>article>header>button[rel=prev]{top:var(--spacing);right:var(--spacing);width:2rem;height:2rem;color:var(--muted-foreground);border-radius:var(--radius-sm);box-shadow:none;cursor:pointer;transition:background-color var(--transition-default),color var(--transition-default);background-color:#0000;border:none;padding:0;position:absolute;&:hover{background-color:var(--accent);color:var(--accent-foreground)}&:before{content:"✕";font-size:var(--text-base)}}dialog>article>p,dialog>article>div{margin-bottom:var(--spacing-sm);padding:0}dialog>article>p:last-child,dialog>article>div:last-child{margin-bottom:0}dialog>article>footer{justify-content:flex-end;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-sm);padding:0;display:flex}html.modal-is-open{pointer-events:none;touch-action:none;overflow:hidden}html.modal-is-open dialog{pointer-events:auto}html.modal-is-opening dialog>article{animation:modal-in var(--transition-slow)var(--ease-default)}html.modal-is-closing dialog::backdrop{animation:backdrop-out var(--transition-default)forwards}html.modal-is-closing dialog>article{animation:modal-out var(--transition-default)forwards}@keyframes backdrop-out{to{opacity:0}}@keyframes modal-out{to{opacity:0;transform:scale(.95)translateY(-1rem)}}nav{justify-content:space-between;align-items:center;gap:var(--spacing);flex-wrap:wrap;display:flex}nav>ul{align-items:center;gap:var(--spacing-xs);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}nav>ul>li{line-height:var(--line-height);margin:0}nav a{padding:var(--spacing-sm)var(--spacing-md);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--muted-foreground);border-radius:var(--radius-md);transition:color var(--transition-default),background-color var(--transition-default);align-items:center;text-decoration:none;display:inline-flex;&:hover{color:var(--foreground);background-color:var(--muted)}}nav a[aria-current=page],nav a[aria-current=true]{color:var(--foreground);background-color:var(--muted)}nav strong{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--foreground)}nav button{height:var(--button-height-sm);font-size:var(--text-sm)}nav details.dropdown>summary{height:auto;padding:var(--spacing-sm)var(--spacing-md);color:var(--muted-foreground);background-color:#0000;border:none;&:hover{color:var(--foreground);background-color:var(--muted)}}nav details.dropdown>ul{right:0}nav[aria-label=breadcrumb]>ul{gap:0}nav[aria-label=breadcrumb]>ul>li{align-items:center;display:flex}nav[aria-label=breadcrumb]>ul>li:not(:last-child):after{content:var(--breadcrumb-divider);padding:0 var(--spacing-sm);color:var(--muted-foreground)}nav[aria-label=breadcrumb] a{padding:var(--spacing-xs)0;color:var(--muted-foreground);background-color:#0000;border-radius:0;&:hover{color:var(--foreground);background-color:#0000;text-decoration:underline}}nav[aria-label=breadcrumb]>ul>li:last-child{color:var(--foreground);font-weight:var(--font-medium)}@media (width<=768px){nav{flex-direction:column;align-items:stretch}nav>ul{justify-content:center}}progress{width:100%;height:var(--spacing-sm);margin-bottom:var(--spacing-sm);background-color:var(--muted);border-radius:var(--progress-radius);appearance:none;border:none;display:block;overflow:hidden}progress:last-child{margin-bottom:0}progress::-webkit-progress-bar{background-color:var(--muted);border-radius:var(--progress-radius)}progress::-webkit-progress-value{background-color:var(--primary);border-radius:var(--progress-radius);transition:width var(--transition-slow)var(--ease-default)}progress::-moz-progress-bar{background-color:var(--primary);border-radius:var(--progress-radius)}progress:not([value]){background:linear-gradient(90deg,var(--muted)0%,var(--muted)40%,var(--primary)50%,var(--muted)60%,var(--muted)100%);background-size:200% 100%;animation:1.5s linear infinite progress-indeterminate;position:relative}progress:not([value])::-webkit-progress-bar{background:0 0}progress:not([value])::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}progress.secondary::-webkit-progress-value{background-color:var(--muted-foreground)}progress.secondary::-moz-progress-bar{background-color:var(--muted-foreground)}progress.secondary:not([value]){background:linear-gradient(90deg,var(--muted)0%,var(--muted)40%,var(--muted-foreground)50%,var(--muted)60%,var(--muted)100%);background-size:200% 100%}progress.success::-webkit-progress-value{background-color:var(--success)}progress.success::-moz-progress-bar{background-color:var(--success)}progress.success:not([value]){background:linear-gradient(90deg,var(--muted)0%,var(--muted)40%,var(--success)50%,var(--muted)60%,var(--muted)100%);background-size:200% 100%}progress.warning::-webkit-progress-value{background-color:var(--warning)}progress.warning::-moz-progress-bar{background-color:var(--warning)}progress.warning:not([value]){background:linear-gradient(90deg,var(--muted)0%,var(--muted)40%,var(--warning)50%,var(--muted)60%,var(--muted)100%);background-size:200% 100%}progress.destructive::-webkit-progress-value{background-color:var(--destructive)}progress.destructive::-moz-progress-bar{background-color:var(--destructive)}progress.destructive:not([value]){background:linear-gradient(90deg,var(--muted)0%,var(--muted)40%,var(--destructive)50%,var(--muted)60%,var(--muted)100%);background-size:200% 100%}label:has(>progress){display:block;&>progress{margin-top:var(--spacing-sm)}}@keyframes spin{to{transform:rotate(360deg)}}[aria-busy=true]{pointer-events:none;position:relative}[aria-busy=true]:empty:before,button[aria-busy=true]:not(:has(*)):before{content:"";width:1.5rem;height:1.5rem;margin:var(--spacing)auto;border:2px solid var(--muted);border-top-color:var(--primary);border-radius:var(--radius-full);animation:.75s linear infinite spin;display:block}[aria-busy=true]:not(:empty):before{content:"";width:1rem;height:1rem;margin-right:var(--spacing-sm);vertical-align:middle;border-radius:var(--radius-full);opacity:.7;border:2px solid;border-top-color:#0000;animation:.75s linear infinite spin;display:inline-block}button[aria-busy=true]{cursor:wait;opacity:.8}button[aria-busy=true]:before{width:1rem;height:1rem;margin-right:var(--spacing-sm);border-width:2px}button[aria-busy=true][aria-label]:before{margin-right:0}article[aria-busy=true]{justify-content:center;align-items:center;min-height:10rem;display:flex}article[aria-busy=true]:before{border-width:3px;width:2rem;height:2rem;margin:0}span[aria-busy=true]:before,p[aria-busy=true]:before{width:.875rem;height:.875rem}tr[aria-busy=true]{opacity:.5}form[aria-busy=true]{opacity:.7}form[aria-busy=true]:before{margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}[data-tooltip]{cursor:help;position:relative}[data-tooltip]:before{content:attr(data-tooltip);z-index:50;padding:var(--spacing-sm)var(--spacing-md);font-size:var(--text-xs);font-weight:var(--font-medium);line-height:var(--line-height-sm);color:var(--background);background-color:var(--foreground);border-radius:var(--tooltip-radius);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--transition-fast)var(--ease-default);position:absolute}[data-tooltip]:not([data-placement]):before,[data-tooltip][data-placement=top]:before{margin-bottom:var(--spacing-sm);bottom:100%;left:50%;transform:translate(-50%)}[data-tooltip][data-placement=bottom]:before{margin-top:var(--spacing-sm);top:100%;left:50%;transform:translate(-50%)}[data-tooltip][data-placement=left]:before{margin-right:var(--spacing-sm);top:50%;right:100%;transform:translateY(-50%)}[data-tooltip][data-placement=right]:before{margin-left:var(--spacing-sm);top:50%;left:100%;transform:translateY(-50%)}[data-tooltip]:hover:before,[data-tooltip]:focus-visible:before{opacity:1}button[data-tooltip],a[data-tooltip]{cursor:pointer}[role=group]{border-radius:var(--radius-md);display:inline-flex}[role=group]>*{flex:auto}[role=group]>:not(:first-child):not(:last-child){border-radius:0}[role=group]>:first-child:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}[role=group]>:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}[role=group]>button:not(:first-child),[role=group]>[type=submit]:not(:first-child),[role=group]>[type=button]:not(:first-child),[role=group]>[role=button]:not(:first-child){margin-left:calc(var(--border-width)*-1)}[role=group]>button[aria-current=true],[role=group]>[role=button][aria-current=true]{z-index:1}[role=group]>input,[role=group]>select{flex:auto}[role=group]>input:not(:first-child),[role=group]>select:not(:first-child){margin-left:calc(var(--border-width)*-1)}[role=group]>:focus-visible{z-index:2}fieldset[role=group]{border:none;width:100%;padding:0;display:flex}[role=group]>:is(button,[type=submit],[type=reset],[type=button]){flex:none;width:auto}[role=search]{display:flex}[role=search]>input[type=search]{flex:auto}[role=search]>input[type=search]:not(:only-child){border-radius:var(--radius-full)0 0 var(--radius-full)}[role=search]>[type=submit],[role=search]>button{border-radius:0 var(--radius-full)var(--radius-full)0;margin-left:calc(var(--border-width)*-1)}[role=group].full-width{width:100%;display:flex}[role=group].vertical{flex-direction:column}[role=group].vertical>:not(:first-child):not(:last-child){border-radius:0}[role=group].vertical>:first-child:not(:last-child){border-radius:var(--radius-md)var(--radius-md)0 0}[role=group].vertical>:last-child:not(:first-child){border-radius:0 0 var(--radius-md)var(--radius-md)}[role=group].vertical>:not(:first-child){margin-left:0;margin-top:calc(var(--border-width)*-1)}.badge{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs)var(--spacing-sm);font-size:var(--text-xs);font-weight:var(--font-medium);font-variant-numeric:tabular-nums;white-space:nowrap;border:var(--border-width)solid transparent;border-radius:var(--badge-radius);color:var(--primary-foreground);background-color:var(--primary);line-height:1;display:inline-flex}.badge.secondary{color:var(--foreground);background-color:var(--accent)}.badge.destructive{color:var(--destructive-foreground);background-color:var(--destructive)}.badge.success{color:var(--success-foreground);background-color:var(--success)}.badge.warning{color:var(--warning-foreground);background-color:var(--warning)}.badge.outline{color:var(--primary);border-color:var(--primary);background-color:#0000}.badge.outline.secondary{color:var(--foreground);border-color:var(--border)}.badge.outline.destructive{color:var(--destructive);border-color:var(--destructive)}.badge.outline.success{color:var(--success);border-color:var(--success)}.badge.outline.warning{color:var(--warning);border-color:var(--warning)}.badge.small{padding:0 var(--spacing-xs)}.badge.large{padding:var(--spacing-sm)var(--spacing-md)}main>aside.sidebar{background-color:var(--muted);color:inherit;padding:var(--spacing-lg);border:none}@media (width>=768px){main>aside.sidebar{width:var(--aside-width);z-index:10;height:100dvh;display:block;position:fixed;inset:0 auto 0 0;overflow-y:auto}body:has(>main>aside.sidebar){padding-left:var(--aside-width)}main:has(>aside.sidebar){display:block}}@media (width<=767.98px){main>aside.sidebar{display:none}main>aside.sidebar[popover]:popover-open{width:min(var(--aside-width),85vw);z-index:100;height:100dvh;transition:transform var(--transition-slow)var(--ease-default),overlay var(--transition-slow)var(--ease-default)allow-discrete,display var(--transition-slow)var(--ease-default)allow-discrete;display:block;position:fixed;inset:0 auto 0 0;overflow-y:auto;transform:translate(0)}main>aside.sidebar[popover]::backdrop{background-color:var(--modal-overlay);backdrop-filter:blur(4px)}@starting-style{main>aside.sidebar[popover]:popover-open{transform:translate(-100%)}}}main>aside.sidebar>nav{justify-content:flex-start;align-items:stretch;gap:var(--spacing-sm);flex-flow:column;display:flex}main>aside.sidebar>nav>ul{align-items:stretch;gap:var(--spacing-xs);flex-flow:column;margin:0;padding:0;list-style:none;display:flex}main>aside.sidebar>nav>ul>li{margin:0}main>aside.sidebar>nav>ul>li>strong{padding:var(--spacing-sm)var(--spacing);margin-top:var(--spacing);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.05em;display:block}main>aside.sidebar>nav>ul>li:first-child>strong{margin-top:0}main>aside.sidebar>nav>ul>li>a{align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm)var(--spacing);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--foreground);border-radius:var(--radius-md);text-overflow:ellipsis;white-space:nowrap;transition:background-color var(--transition-default),color var(--transition-default);text-decoration:none;display:flex;overflow:hidden}main>aside.sidebar>nav>ul>li>a:hover,main>aside.sidebar>nav>ul>li>a[aria-current=page],main>aside.sidebar>nav>ul>li>a[aria-current=true]{background-color:color-mix(in oklch,var(--muted)88%,var(--foreground));color:var(--foreground)}@media (width>=768px){.sidebar-toggle,li:has(>.sidebar-toggle){display:none}}}@layer utilities{a.secondary{color:var(--muted-foreground);&:hover{color:var(--foreground)}}.muted{color:var(--muted-foreground)}:where(:not(.badge):not(button):not([role=button]):not(progress)).primary{color:var(--primary)}:where(:not(.badge):not(button):not([role=button]):not(progress)).destructive{color:var(--destructive)}:where(:not(.badge):not(button):not([role=button]):not(progress)).success{color:var(--success)}:where(:not(.badge):not(button):not([role=button]):not(progress)).warning{color:var(--warning)}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.hidden{display:none!important}.invisible{visibility:hidden}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-normal{font-weight:var(--font-normal)}.font-medium{font-weight:var(--font-medium)}.font-semibold{font-weight:var(--font-semibold)}.font-bold{font-weight:var(--font-bold)}.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-base{font-size:var(--text-base)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}.text-2xl{font-size:var(--text-2xl)}.text-3xl{font-size:var(--text-3xl)}.text-4xl{font-size:var(--text-4xl)}.sticky{z-index:40;background-color:var(--background);border-bottom:var(--border-width)solid var(--border);position:sticky;top:0}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.gap-2{gap:var(--spacing-sm)}.gap-4{gap:var(--spacing)}.w-full{width:100%}.m-0{margin:0}.mx-auto{margin-inline:auto}.mt-4{margin-top:var(--spacing)}.mb-4{margin-bottom:var(--spacing)}.my-4{margin-top:var(--spacing);margin-bottom:var(--spacing)}.p-0{padding:0}.p-4{padding:var(--spacing)}.p-6{padding:var(--spacing-lg)}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--radius-sm)}.rounded{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-full{border-radius:var(--radius-full)}.border{border:var(--border-width)solid var(--border)}.border-none{border:none}.bg-muted{background-color:var(--muted)}.bg-card{background-color:var(--card)}.bg-transparent{background-color:#0000}.shadow-none{box-shadow:none}.shadow-sm,.shadow{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.pointer-events-none{pointer-events:none}.select-none{user-select:none}.transition{transition:all var(--transition-default)}.transition-none{transition:none}.animate-spin{animation:1s linear infinite spin}.animate-pulse{animation:2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media print{.no-print{display:none!important}}}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "daftcss",
+  "version": "1.3.0",
+  "description": "A semantic-first CSS framework with shadcn/ui-quality aesthetics",
+  "main": "dist/daft.css",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "lightningcss --bundle src/daft.css -o dist/daft.css && lightningcss --bundle --minify src/daft.css -o dist/daft.min.css",
+    "watch": "lightningcss --bundle src/daft.css -o dist/daft.css --watch",
+    "dev": "npx serve examples"
+  },
+  "keywords": [
+    "css",
+    "framework",
+    "semantic",
+    "html",
+    "shadcn"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "lightningcss-cli": "^1.28.0"
+  }
+}

package/src/base/document.css

@@ -0,0 +1,57 @@
+/**
+ * Document base styles
+ * Sets up html and body with color scheme support
+ */
+
+html {
+  color-scheme: light dark;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  font-weight: var(--font-normal);
+  line-height: var(--line-height);
+  color: var(--foreground);
+  background-color: var(--background);
+  min-height: 100dvh;
+}
+
+/* Focus visible for accessibility */
+:focus-visible {
+  outline: var(--outline-width) solid var(--ring);
+  outline-offset: var(--outline-offset);
+}
+
+/* Selection styling */
+::selection {
+  background-color: color-mix(in oklch, var(--primary) 30%, transparent);
+  color: var(--foreground);
+}
+
+/* Scrollbar styling for webkit browsers */
+::-webkit-scrollbar {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--muted);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--muted-foreground);
+  border-radius: var(--radius-full);
+  border: 3px solid var(--muted);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in oklch, var(--muted-foreground) 80%, var(--foreground));
+}
+
+/* Firefox scrollbar */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--muted-foreground) var(--muted);
+}

package/src/base/reset.css

@@ -0,0 +1,116 @@
+/**
+ * Modern CSS Reset
+ * Based on Josh Comeau's reset with additions for semantic HTML
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+/* Remove list styles on ul, ol with role="list" */
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+  padding: 0;
+}
+
+/* Remove default button styles */
+button {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+/* Remove default fieldset styles */
+fieldset {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* Remove default legend padding */
+legend {
+  padding: 0;
+}
+
+/* Remove default summary marker in some browsers */
+summary {
+  cursor: pointer;
+}
+
+/* Prevent textarea resize except vertical */
+textarea {
+  resize: vertical;
+}
+
+/* Remove default table spacing */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Inherit fonts for form controls */
+input,
+textarea,
+select,
+button {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* Remove animations for people who prefer reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/src/base/root.css

@@ -0,0 +1,24 @@
+/**
+ * Theme islands
+ *
+ * Page-level or sub-tree theme override via [data-theme].
+ *
+ * All color values live in variables.css and are wrapped in light-dark().
+ * On modern browsers, light-dark() resolves per-element based on the
+ * cascaded color-scheme — so toggling color-scheme here is enough to
+ * flip the entire palette for this subtree. No color values are
+ * duplicated; this file is purely a mechanism, not a palette.
+ */
+
+[data-theme="light"] {
+  color-scheme: light;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+[data-theme] {
+  background-color: var(--background);
+  color: var(--foreground);
+}

package/src/base/variables.css

@@ -0,0 +1,210 @@
+/**
+ * CSS Custom Properties (Design Tokens)
+ *
+ * Three tiers:
+ *   Tier 0 — Root knobs: change these to retune the whole system.
+ *   Tier 1 — Scales derived from Tier 0 (spacing, radius, text, etc).
+ *   Tier 2 — Per-component tokens (override one component without affecting others).
+ *
+ * All color values use light-dark() and respect cascaded color-scheme,
+ * so theme islands flip palettes without redeclaring values.
+ */
+
+:root {
+  color-scheme: light dark;
+
+  /* ============================================================
+     TIER 0 — ROOT
+     ============================================================ */
+
+  /* Layout & sizing */
+  --spacing: 1rem;
+  --radius: 0.625rem;
+  --component-height: 2.25rem;
+
+  /* Typography */
+  --font-size-base: 1rem;
+  --line-height: 1.5;
+  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+
+  /* Animation */
+  --transition: 150ms;
+  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Surface colors */
+  --background: light-dark(oklch(1 0 0), oklch(0.145 0 0));
+  --foreground: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
+  --card: light-dark(oklch(1 0 0), oklch(0.205 0 0));
+  --popover: light-dark(oklch(1 0 0), oklch(0.269 0 0));
+
+  /* Brand & semantic colors */
+  --primary: light-dark(oklch(0.205 0 0), oklch(0.922 0 0));
+  --muted: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
+  --destructive: light-dark(oklch(0.577 0.245 27.325), oklch(0.704 0.191 22.216));
+  --success: light-dark(oklch(0.55 0.16 145), oklch(0.72 0.16 145));
+  --warning: light-dark(oklch(0.68 0.16 70), oklch(0.82 0.16 80));
+  --border: light-dark(oklch(0.922 0 0), oklch(1 0 0 / 10%));
+
+  /* ============================================================
+     TIER 1 — SCALES & DERIVED VALUES
+     ============================================================ */
+
+  /* Spacing scale */
+  --spacing-xs: calc(var(--spacing) * 0.25);
+  --spacing-sm: calc(var(--spacing) * 0.5);
+  --spacing-md: calc(var(--spacing) * 0.75);
+  --spacing-lg: calc(var(--spacing) * 1.5);
+  --spacing-xl: calc(var(--spacing) * 2);
+
+  /* Radius scale (anchored on --radius == lg) */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-full: 9999px;
+
+  /* Typography scale */
+  --text-xs: calc(var(--font-size-base) * 0.75);
+  --text-sm: calc(var(--font-size-base) * 0.875);
+  --text-base: var(--font-size-base);
+  --text-lg: calc(var(--font-size-base) * 1.125);
+  --text-xl: calc(var(--font-size-base) * 1.25);
+  --text-2xl: calc(var(--font-size-base) * 1.5);
+  --text-3xl: calc(var(--font-size-base) * 1.875);
+  --text-4xl: calc(var(--font-size-base) * 2.25);
+
+  /* Line heights */
+  --line-height-sm: calc(var(--line-height) - 0.25);
+  --line-height-lg: calc(var(--line-height) + 0.25);
+
+  /* Font weights */
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+  --font-extrabold: 800;
+
+  /* Transition scale */
+  --transition-fast: calc(var(--transition) * 0.67);
+  --transition-slow: calc(var(--transition) * 2);
+  --transition-default: var(--transition) var(--ease-default);
+
+  /* Component height scale */
+  --component-height-sm: calc(var(--component-height) - 0.25rem);
+  --component-height-lg: calc(var(--component-height) + 0.25rem);
+
+  /* Shadow scale */
+  --shadow-xs: 0 1px 2px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.3));
+  --shadow-sm: 0 1px 3px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)), 0 1px 2px -1px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4));
+  --shadow-md: 0 4px 6px -1px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)), 0 2px 4px -2px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4));
+  --shadow-lg: 0 10px 15px -3px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)), 0 4px 6px -4px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4));
+
+  /* Foreground colors (paired with each surface/brand color above) */
+  --card-foreground: var(--foreground);
+  --popover-foreground: var(--card-foreground);
+  --muted-foreground: light-dark(oklch(0.556 0 0), oklch(0.708 0 0));
+  --primary-foreground: oklch(0.985 0 0);
+  --destructive-foreground: oklch(0.985 0 0);
+  --success-foreground: light-dark(oklch(0.985 0 0), oklch(0.145 0 0));
+  --warning-foreground: oklch(0.145 0 0);
+
+  /* Hover-surface role (derived from --muted; override to retune) */
+  --accent: var(--muted);
+  --accent-foreground: var(--foreground);
+
+  /* ============================================================
+     TIER 2 — COMPONENT TOKENS
+     ============================================================ */
+
+  /* Radii (per component) */
+  --button-radius: var(--radius-md);
+  --input-radius: var(--radius-md);
+  --card-radius: var(--radius-xl);
+  --modal-radius: var(--radius-lg);
+  --dropdown-radius: var(--radius-md);
+  --tooltip-radius: var(--radius-md);
+  --badge-radius: var(--radius-md);
+  --progress-radius: var(--radius-full);
+
+  /* Shadows (set any to `none` to flatten that component) */
+  --button-shadow: var(--shadow-xs);
+  --card-shadow: var(--shadow-xs);
+  --dropdown-shadow: var(--shadow-md);
+  --popover-shadow: var(--shadow-md);
+  --modal-shadow: var(--shadow-lg);
+
+  /* Button */
+  --button-height: var(--component-height);
+  --button-height-sm: var(--component-height-sm);
+  --button-height-lg: var(--component-height-lg);
+
+  /* Input */
+  --input: light-dark(oklch(0.922 0 0), oklch(1 0 0 / 15%));
+  --input-height: var(--component-height);
+  --input-background: var(--card);
+
+  /* Form controls (checkbox, radio, range thumb) */
+  --control-size: 1rem;
+
+  /* Switch */
+  --switch-width: 2rem;
+  --switch-height: 1.25rem;
+  --switch-thumb: 1rem;
+
+  /* Modal */
+  --modal-overlay: light-dark(oklch(0 0 0 / 50%), oklch(0 0 0 / 70%));
+
+  /* Breadcrumb */
+  --breadcrumb-divider: "›";
+
+  /* Sidebar */
+  --aside-width: clamp(14rem, 20vw, 20rem);
+
+  /* ============================================================
+     INTERACTION STATES
+     ============================================================ */
+
+  /* Opacities */
+  --hover-opacity: 90%;
+  --active-opacity: 85%;
+  --disabled-opacity: 0.5;
+
+  /* Focus ring */
+  --ring: light-dark(oklch(0.708 0 0), oklch(0.556 0 0));
+  --focus-ring-width: 3px;
+  --focus-ring-opacity: 50%;
+
+  /* Borders & outlines */
+  --border-width: 1px;
+  --outline-width: 2px;
+  --outline-offset: 2px;
+
+  /* ============================================================
+     ICONS
+     ============================================================ */
+
+  --icon-size: 1rem;
+  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  --icon-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+}
+
+/* Auto-contrast foreground colors (Chrome 119+, Firefox 128+, Safari 18+) */
+@supports (color: oklch(from red l c h)) {
+  :root {
+    --primary-foreground: oklch(from var(--primary) clamp(0, (l / 0.623 - 1) * -infinity, 1) 0 h);
+    --destructive-foreground: oklch(from var(--destructive) clamp(0, (l / 0.623 - 1) * -infinity, 1) 0 h);
+    --success-foreground: oklch(from var(--success) clamp(0, (l / 0.623 - 1) * -infinity, 1) 0 h);
+    --warning-foreground: oklch(from var(--warning) clamp(0, (l / 0.623 - 1) * -infinity, 1) 0 h);
+  }
+}
+
+/* Future: native contrast-color() when available */
+@supports (color: contrast-color(red)) {
+  :root {
+    --primary-foreground: contrast-color(var(--primary));
+    --destructive-foreground: contrast-color(var(--destructive));
+    --success-foreground: contrast-color(var(--success));
+    --warning-foreground: contrast-color(var(--warning));
+  }
+}