tera-system-ui 0.1.66 → 0.1.67

package/dist/themes/tera-ui-base.css

@@ -1,635 +1,664 @@
-/* Default base style */
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@custom-variant dark (&:where(.dark, .dark *));
-
-
-* {
-    font-synthesis: none !important;
-    -webkit-font-smoothing: antialiased;
-}
-
-body:has(dialog[open]) {
-    overflow: hidden
-}
-
-body {
-    background: var(--color-neutral-token-1);
-    color: var(--color-neutral-token-13);
-}
-
-:root {
-    --font-sans: "Inter Variable", "ui-sans-serif", "system-ui", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --font-mono: "Geist Mono", "Roboto Mono Variable", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New";
-}
-
-
-/*Scroll styling*/
-/* Light mode scrollbar styles */
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-::-webkit-scrollbar-track {
-    background: transparent; /* Transparent track */
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: rgba(0, 0, 0, 0.2); /* Light mode: dark thumb */
-    border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(0, 0, 0, 0.4); /* Darker thumb on hover */
-}
-
-/* Dark mode scrollbar styles */
-.dark ::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.2); /* Dark mode: light thumb */
-}
-
-.dark ::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(255, 255, 255, 0.4); /* Lighter thumb on hover */
-}
-
-/* Firefox scrollbar styling */
-* {
-    scrollbar-width: thin;
-    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
-}
-
-html.dark, .dark * {
-    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
-}
-/*Scroll styling*/
-
-
-@layer base {
-    *,
-    ::after,
-    ::before,
-    ::backdrop,
-    ::file-selector-button {
-        border-color: var(--color-neutral-token-5, currentColor);
-    }
-}
-
-@layer components {
-    .border,
-    .border-r,
-    .border-l,
-    .border-t,
-    .border-b,
-    .border-x,
-    .border-y {
-        border-color: var(--color-neutral-token-5);
-    }
-}
-
-
-@layer utilities {
-    /* Hide scrollbar for Chrome, Safari and Opera */
-    .hide-scrollbar::-webkit-scrollbar {
-        display: none !important;
-    }
-
-    /* Hide scrollbar for IE, Edge and Firefox */
-    .hide-scrollbar {
-        -ms-overflow-style: none !important; /* IE and Edge */
-        scrollbar-width: none !important; /* Firefox */
-    }
-
-    .skeleton {
-        animation: var(--animate-pulse);
-        background-color: var(--color-neutral-token-4);
-        border-radius: var(--radius-sm);
-        height: --spacing(4);
-        width: 100%;
-    }
-}
-
-
-
-
-
-
-
-:root {
-    --border-radius-base: 0.25rem;
-    --border-radius-container: 0.5rem;
-    --color-primary-50: rgb(235, 243, 254);
-    --color-primary-100: rgb(194, 216, 252);
-    --color-primary-200: rgb(165, 198, 251);
-    --color-primary-300: rgb(124, 171, 249);
-    --color-primary-400: rgb(98, 155, 248);
-    --color-primary-500: rgb(59, 130, 246);
-    --color-primary-600: rgb(54, 118, 224);
-    --color-primary-700: rgb(42, 92, 175);
-    --color-primary-800: rgb(32, 72, 135);
-    --color-primary-900: rgb(25, 55, 103);
-    --color-error-50: rgb(253, 236, 236);
-    --color-error-100: rgb(250, 197, 197);
-    --color-error-200: rgb(248, 169, 169);
-    --color-error-300: rgb(244, 130, 130);
-    --color-error-400: rgb(242, 105, 105);
-    --color-error-500: rgb(239, 68, 68);
-    --color-error-600: rgb(217, 62, 62);
-    --color-error-700: rgb(170, 48, 48);
-    --color-error-800: rgb(131, 37, 37);
-    --color-error-900: rgb(100, 29, 29);
-    --color-success-50: rgb(233, 249, 239);
-    --color-success-100: rgb(186, 237, 205);
-    --color-success-200: rgb(153, 228, 181);
-    --color-success-300: rgb(107, 216, 147);
-    --color-success-400: rgb(78, 209, 126);
-    --color-success-500: rgb(34, 197, 94);
-    --color-success-600: rgb(31, 179, 86);
-    --color-success-700: rgb(24, 140, 67);
-    --color-success-800: rgb(19, 108, 52);
-    --color-success-900: rgb(14, 83, 39);
-    /* primitives — do not use in components */
-    --color-neutral-1: rgb(255, 255, 255);
-    --color-neutral-2: rgb(252, 252, 252);
-    --color-neutral-3: rgb(245, 245, 245);
-    --color-neutral-4: rgb(240, 240, 240);
-    --color-neutral-5: rgb(217, 217, 217);
-    --color-neutral-6: rgb(191, 191, 191);
-    --color-neutral-7: rgb(140, 140, 140);
-    --color-neutral-8: rgb(89, 89, 89);
-    --color-neutral-9: rgb(69, 69, 69);
-    --color-neutral-10: rgb(38, 38, 38);
-    --color-neutral-11: rgb(31, 31, 31);
-    --color-neutral-12: rgb(20, 20, 20);
-    --color-neutral-13: rgb(0, 0, 0);
-    --color-warning-50: rgb(254, 241, 232);
-    --color-warning-100: rgb(253, 212, 183);
-    --color-warning-200: rgb(252, 191, 148);
-    --color-warning-300: rgb(251, 161, 99);
-    --color-warning-400: rgb(250, 143, 69);
-    --color-warning-500: rgb(249, 115, 22);
-    --color-warning-600: rgb(227, 105, 20);
-    --color-warning-700: rgb(177, 82, 16);
-    --color-warning-800: rgb(137, 63, 12);
-    --color-warning-900: rgb(105, 48, 9);
-    --color-information-50:  rgb(240, 249, 255);
-    --color-information-100: rgb(186, 230, 253);
-    --color-information-200: rgb(125, 211, 252);
-    --color-information-300: rgb(56,  189, 248);
-    --color-information-400: rgb(14,  165, 233);
-    --color-information-500: rgb(2,   132, 199);  /* sky — distinct from primary */
-    --color-information-600: rgb(3,   105, 161);
-    --color-information-700: rgb(7,   89,  133);
-    --color-information-800: rgb(12,  74,  110);
-    --color-information-900: rgb(8,   47,  73);
-    --color-secondary-50: rgb(253, 237, 245);
-    --color-secondary-100: rgb(249, 198, 223);
-    --color-secondary-200: rgb(246, 171, 208);
-    --color-secondary-300: rgb(242, 132, 187);
-    --color-secondary-400: rgb(240, 109, 173);
-    --color-secondary-500: rgb(236, 72, 153);
-    --color-secondary-600: rgb(215, 66, 139);
-    --color-secondary-700: rgb(168, 51, 109);
-    --color-secondary-800: rgb(130, 40, 84);
-    --color-secondary-900: rgb(99, 30, 64);
-    --color-brand-500: var(--color-primary-500);
-    --color-brand-token-5: var(--color-primary-500);
-    --color-neutral-token-1: rgb(255, 255, 255);
-    --color-neutral-token-2: rgb(252, 252, 252);
-    --color-neutral-token-3: rgb(245, 245, 245);
-    --color-neutral-token-4: rgb(240, 240, 240);
-    --color-neutral-token-5: rgb(217, 217, 217);
-    --color-neutral-token-6: rgb(191, 191, 191);
-    --color-neutral-token-7: rgb(140, 140, 140);
-    --color-neutral-token-8: rgb(89, 89, 89);
-    --color-neutral-token-9: rgb(69, 69, 69);
-    --color-neutral-token-10: rgb(38, 38, 38);
-    --color-neutral-token-11: rgb(31, 31, 31);
-    --color-neutral-token-12: rgb(20, 20, 20);
-    --color-neutral-token-13: rgb(0, 0, 0);
-    --color-primary-token-1: rgb(235, 243, 254);
-    --color-primary-token-2: rgb(194, 216, 252);
-    --color-primary-token-3: rgb(165, 198, 251);
-    --color-primary-token-4: rgb(124, 171, 249);
-    --color-primary-token-5: rgb(98, 155, 248);
-    --color-primary-token-6: rgb(59, 130, 246);
-    --color-primary-token-7: rgb(54, 118, 224);
-    --color-primary-token-8: rgb(42, 92, 175);
-    --color-primary-token-9: rgb(32, 72, 135);
-    --color-primary-token-10: rgb(25, 55, 103);
-}
-
-
-
-:root.dark {
-    --color-brand-token-5: rgb(0, 111, 238);
-    --color-neutral-token-1: rgb(9,  9,  9);   /* near-black — not pure, less harsh */
-    --color-neutral-token-2: rgb(20, 20, 20);
-    --color-neutral-token-3: rgb(32, 32, 32);
-    --color-neutral-token-4: rgb(48, 48, 48);  /* wider gap — clear hover state */
-    --color-neutral-token-5: rgb(70, 70, 70);  /* visible border */
-    --color-neutral-token-6: rgb(95, 95, 95);
-    --color-neutral-token-7: rgb(140, 140, 140);
-    --color-neutral-token-8: rgb(191, 191, 191);
-    --color-neutral-token-9: rgb(217, 217, 217);
-    --color-neutral-token-10: rgb(240, 240, 240);
-    --color-neutral-token-11: rgb(245, 245, 245);
-    --color-neutral-token-12: rgb(252, 252, 252);
-    --color-neutral-token-13: rgb(255, 255, 255);
-    --color-primary-token-1: rgb(25, 55, 103);
-    --color-primary-token-2: rgb(32, 72, 135);
-    --color-primary-token-3: rgb(42, 92, 175);
-    --color-primary-token-4: rgb(54, 118, 224);
-    --color-primary-token-5: rgb(59, 130, 246);
-    --color-primary-token-6: rgb(98, 155, 248);
-    --color-primary-token-7: rgb(124, 171, 249);
-    --color-primary-token-8: rgb(165, 198, 251);
-    --color-primary-token-9: rgb(194, 216, 252);
-    --color-primary-token-10: rgb(235, 243, 254);
-}
-
-/* ============================================= */
-/* === Semantic Alias Layer (additive) === */
-/* Convention: {role}-{modifier} — role-first, modifier describes prominence or state  */
-/* Naming influenced by: Ant Design 5 (state modifiers), GitHub Primer (subtle/muted   */
-/* scale), shadcn/ui (CSS-var-as-utility, 'default' for resting state).                */
-/* Components use ONLY these tokens — primitives stay as the underlying scale.         */
-/* ============================================= */
-:root {
-    /* ── Surfaces (backgrounds by elevation) ─────────────────── */
-    --color-surface:          var(--color-neutral-token-1);   /* Page / app background */
-    --color-surface-raised:   var(--color-neutral-token-2);   /* Cards, panels */
-    --color-surface-sunken:   var(--color-neutral-token-3);   /* Inputs, disabled areas */
-    --color-surface-hover:    var(--color-neutral-token-4);   /* Hover / pressed neutral bg */
-    --color-surface-control:  var(--color-neutral-token-1);   /* Interactive control bg (button, input, checkbox) */
-
-    /* ── Borders ─────────────────────────────────────────────── */
-    --color-border-default:   var(--color-neutral-token-5);   /* Default border */
-    --color-border-strong:    var(--color-neutral-token-6);   /* Focus ring, separator */
-
-    /* ── Text (prominence scale) ─────────────────────────────── */
-    --color-text-primary:     var(--color-neutral-token-13);  /* Body text, headings */
-    --color-text-secondary:   var(--color-neutral-token-8);   /* Supporting / label text */
-    --color-text-tertiary:    var(--color-neutral-token-7);   /* Placeholder, hints */
-    --color-text-disabled:    var(--color-neutral-token-6);   /* Disabled labels */
-
-    /* ── Interactive (primary action — hover darkens, active darkest) ── */
-    --color-interactive:        var(--color-primary-500);     /* Base link / CTA color */
-    --color-interactive-hover:  var(--color-primary-600);     /* Hover: darker */
-    --color-interactive-active: var(--color-primary-700);     /* Pressed: darkest */
-    --color-interactive-subtle: var(--color-primary-50);      /* Ghost bg, tinted area */
-    --color-interactive-border: var(--color-primary-200);     /* Subtle border on tinted bg */
-    --color-interactive-text:   var(--color-primary-700);     /* Readable text on tinted bg */
-    --color-interactive-on:     #ffffff;                      /* Text/icon ON filled interactive bg */
-    --color-overlay:            rgb(0 0 0 / 0.45);            /* Modal / drawer backdrop scrim */
-
-    /* ── Status: Error ── subtle/muted/border/text adapt in dark mode ── */
-    --color-error-subtle:   var(--color-error-50);    /* Light tint bg */
-    --color-error-muted:    var(--color-error-100);   /* Medium tint / pressed bg */
-    --color-error-border:   var(--color-error-200);   /* Subtle border stroke */
-    --color-error-hover:    var(--color-error-400);   /* Lighter hover (softens) */
-    --color-error-default:  var(--color-error-500);   /* Main error color */
-    --color-error-active:   var(--color-error-600);   /* Pressed / active (stronger) */
-    --color-error-text:     var(--color-error-700);   /* Readable text on light bg */
-
-    /* ── Status: Warning ──────────────────────────────────────── */
-    --color-warning-subtle:   var(--color-warning-50);
-    --color-warning-muted:    var(--color-warning-100);
-    --color-warning-border:   var(--color-warning-200);
-    --color-warning-hover:    var(--color-warning-400);
-    --color-warning-default:  var(--color-warning-500);
-    --color-warning-active:   var(--color-warning-600);
-    --color-warning-text:     var(--color-warning-700);
-
-    /* ── Status: Success ──────────────────────────────────────── */
-    --color-success-subtle:   var(--color-success-50);
-    --color-success-muted:    var(--color-success-100);
-    --color-success-border:   var(--color-success-200);
-    --color-success-hover:    var(--color-success-400);
-    --color-success-default:  var(--color-success-500);
-    --color-success-active:   var(--color-success-600);
-    --color-success-text:     var(--color-success-700);
-
-    /* ── Status: Information ──────────────────────────────────── */
-    --color-information-subtle:   var(--color-information-50);
-    --color-information-muted:    var(--color-information-100);
-    --color-information-border:   var(--color-information-200);
-    --color-information-hover:    var(--color-information-400);
-    --color-information-default:  var(--color-information-500);
-    --color-information-active:   var(--color-information-600);
-    --color-information-text:     var(--color-information-700);
-}
-
-/* Dark mode overrides — only tokens that change value in dark mode */
-/* Scale tops at 900 (no 950 primitives defined) */
-:root.dark {
-    --color-error-subtle:   var(--color-error-900);   /* darkest tint bg */
-    --color-error-muted:    var(--color-error-800);   /* medium tint bg */
-    --color-error-border:   var(--color-error-700);   /* subtle border */
-    --color-error-text:     var(--color-error-400);   /* lighter text for dark bg */
-
-    --color-warning-subtle:   var(--color-warning-900);
-    --color-warning-muted:    var(--color-warning-800);
-    --color-warning-border:   var(--color-warning-700);
-    --color-warning-text:     var(--color-warning-400);
-
-    --color-success-subtle:   var(--color-success-900);
-    --color-success-muted:    var(--color-success-800);
-    --color-success-border:   var(--color-success-700);
-    --color-success-text:     var(--color-success-400);
-
-    --color-information-subtle:   var(--color-information-900);
-    --color-information-muted:    var(--color-information-800);
-    --color-information-border:   var(--color-information-700);
-    --color-information-text:     var(--color-information-400);
-
-    --color-interactive-subtle: var(--color-primary-900);    /* Dark tint bg */
-    --color-interactive-border: var(--color-primary-700);    /* Subtle border on dark tinted bg */
-    --color-interactive-text:   var(--color-primary-300);    /* Readable text on dark tinted bg */
-    --color-overlay: rgb(255 255 255 / 0.12);           /* Darker scrim for dark mode */
-    --color-surface-control:    var(--color-neutral-token-3); /* Controls elevated above surfaces in dark mode */
-
-    /* Elevation shadows — use white glow instead of black drop shadows on dark bg */
-    --shadow-sm:   0 1px 3px rgba(0,0,0,0.4),  0 0 0 1px rgba(255,255,255,0.04);
-    --shadow-md:   0 4px 12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
-    --shadow-lg:   0 12px 32px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
-}
-
-/* ============================================= */
-/* === TeraUI Design System === */
-/* ============================================= */
-/* Consistent design tokens for all components */
-:root {
-    /* TeraUI Border Radius - uses 6px as base */
-    --tera-radius-sm: 2px;
-    --tera-radius-base: 6px;
-    --tera-radius-lg: 8px;
-
-    /* TeraUI Control Heights - matches component sizes */
-    --tera-control-height-xs: 20px;
-    --tera-control-height-sm: 24px;
-    --tera-control-height-base: 32px;
-    --tera-control-height-lg: 40px;
-
-    /* TeraUI Transitions - easing */
-    --tera-transition-fast: 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
-    --tera-transition-base: 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-    --tera-transition-slow: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-
-    /* Focus Shadows */
-    --shadow-focus:         0 0 0 3px color-mix(in srgb, var(--color-primary-500)  20%, transparent);
-    --shadow-focus-error:   0 0 0 3px color-mix(in srgb, var(--color-error-500)    20%, transparent);
-    --shadow-focus-warning: 0 0 0 3px color-mix(in srgb, var(--color-warning-500)  20%, transparent);
-    --shadow-focus-success: 0 0 0 3px color-mix(in srgb, var(--color-success-500)  20%, transparent);
-
-    /* Elevation system */
-    --shadow-none: none;
-    --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
-    --shadow-md:   0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06);
-    --shadow-lg:   0 12px 32px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
-    --shadow-glow: 0 0 0 1px var(--color-primary-200),
-                   0 4px 16px color-mix(in srgb, var(--color-primary-500) 20%, transparent);
-
-    /* Easing functions */
-    --ease-ui:     cubic-bezier(0.16, 1, 0.3, 1);
-    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-    --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1.0);
-    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* Extended radius */
-    --tera-radius-xl: 20px;
-}
-
-
-
-/* Reduced-motion guard */
-@media (prefers-reduced-motion: reduce) {
-    *, ::before, ::after {
-        transition-duration: 1ms !important;
-        animation-duration:  1ms !important;
-    }
-}
-
-/* Base responsive variable */
-:root {
-    --header-height: 3rem;
-}
-
-@media (min-width: theme(--breakpoint-md)) {
-    :root {
-        --header-height: 3.5rem;
-    }
-}
-
-@media (min-width: theme(--breakpoint-lg)) {
-    :root {
-    }
-}
-
-@theme {
-    --default-ring-width: 3px;
-    --default-ring-color: var(--color-primary-700);
-    --color-border: var(--color-neutral-token-5);
-    --color-input: var(--color-neutral-token-4);
-    --color-ring: var(--color-primary-700);
-    --color-background: var(--color-neutral-token-1);
-    --color-foreground: var(--color-neutral-token-13);
-    --spacing-icon-xs: 1.25rem;
-    --spacing-icon-sm: 1.5rem;
-    --spacing-icon-md: 1.75rem;
-    --spacing-icon-lg: 2rem;
-    --spacing-icon-xl: 2.25rem;
-    --spacing-icon-2xl: 2.5rem;
-    --spacing-header-height: var(--header-height);
-    --radius-container: var(--border-radius-container);
-    --radius: var(--border-radius-base);
-    --color-primary-50: var(--color-primary-50);
-    --color-primary-100: var(--color-primary-100);
-    --color-primary-200: var(--color-primary-200);
-    --color-primary-300: var(--color-primary-300);
-    --color-primary-400: var(--color-primary-400);
-    --color-primary-500: var(--color-primary-500);
-    --color-primary-600: var(--color-primary-600);
-    --color-primary-700: var(--color-primary-700);
-    --color-primary-800: var(--color-primary-800);
-    --color-primary-900: var(--color-primary-900);
-    --color-error-50: var(--color-error-50);
-    --color-error-100: var(--color-error-100);
-    --color-error-200: var(--color-error-200);
-    --color-error-300: var(--color-error-300);
-    --color-error-400: var(--color-error-400);
-    --color-error-500: var(--color-error-500);
-    --color-error-600: var(--color-error-600);
-    --color-error-700: var(--color-error-700);
-    --color-error-800: var(--color-error-800);
-    --color-error-900: var(--color-error-900);
-    --color-success-50: var(--color-success-50);
-    --color-success-100: var(--color-success-100);
-    --color-success-200: var(--color-success-200);
-    --color-success-300: var(--color-success-300);
-    --color-success-400: var(--color-success-400);
-    --color-success-500: var(--color-success-500);
-    --color-success-600: var(--color-success-600);
-    --color-success-700: var(--color-success-700);
-    --color-success-800: var(--color-success-800);
-    --color-success-900: var(--color-success-900);
-    --color-neutral-1: var(--color-neutral-1);
-    --color-neutral-2: var(--color-neutral-2);
-    --color-neutral-3: var(--color-neutral-3);
-    --color-neutral-4: var(--color-neutral-4);
-    --color-neutral-5: var(--color-neutral-5);
-    --color-neutral-6: var(--color-neutral-6);
-    --color-neutral-7: var(--color-neutral-7);
-    --color-neutral-8: var(--color-neutral-8);
-    --color-neutral-9: var(--color-neutral-9);
-    --color-neutral-10: var(--color-neutral-10);
-    --color-neutral-11: var(--color-neutral-11);
-    --color-neutral-12: var(--color-neutral-12);
-    --color-neutral-13: var(--color-neutral-13);
-    --color-warning-50: var(--color-warning-50);
-    --color-warning-100: var(--color-warning-100);
-    --color-warning-200: var(--color-warning-200);
-    --color-warning-300: var(--color-warning-300);
-    --color-warning-400: var(--color-warning-400);
-    --color-warning-500: var(--color-warning-500);
-    --color-warning-600: var(--color-warning-600);
-    --color-warning-700: var(--color-warning-700);
-    --color-warning-800: var(--color-warning-800);
-    --color-warning-900: var(--color-warning-900);
-    --color-information-50: var(--color-information-50);
-    --color-information-100: var(--color-information-100);
-    --color-information-200: var(--color-information-200);
-    --color-information-300: var(--color-information-300);
-    --color-information-400: var(--color-information-400);
-    --color-information-500: var(--color-information-500);
-    --color-information-600: var(--color-information-600);
-    --color-information-700: var(--color-information-700);
-    --color-information-800: var(--color-information-800);
-    --color-information-900: var(--color-information-900);
-    --color-secondary-50: var(--color-secondary-50);
-    --color-secondary-100: var(--color-secondary-100);
-    --color-secondary-200: var(--color-secondary-200);
-    --color-secondary-300: var(--color-secondary-300);
-    --color-secondary-400: var(--color-secondary-400);
-    --color-secondary-500: var(--color-secondary-500);
-    --color-secondary-600: var(--color-secondary-600);
-    --color-secondary-700: var(--color-secondary-700);
-    --color-secondary-800: var(--color-secondary-800);
-    --color-secondary-900: var(--color-secondary-900);
-    --color-brand-500: var(--color-brand-500);
-    --color-brand-token-5: var(--color-brand-token-5);
-    --color-neutral-token-1: var(--color-neutral-token-1);
-    --color-neutral-token-2: var(--color-neutral-token-2);
-    --color-neutral-token-3: var(--color-neutral-token-3);
-    --color-neutral-token-4: var(--color-neutral-token-4);
-    --color-neutral-token-5: var(--color-neutral-token-5);
-    --color-neutral-token-6: var(--color-neutral-token-6);
-    --color-neutral-token-7: var(--color-neutral-token-7);
-    --color-neutral-token-8: var(--color-neutral-token-8);
-    --color-neutral-token-9: var(--color-neutral-token-9);
-    --color-neutral-token-10: var(--color-neutral-token-10);
-    --color-neutral-token-11: var(--color-neutral-token-11);
-    --color-neutral-token-12: var(--color-neutral-token-12);
-    --color-neutral-token-13: var(--color-neutral-token-13);
-    --color-primary-token-1: var(--color-primary-token-1);
-    --color-primary-token-2: var(--color-primary-token-2);
-    --color-primary-token-3: var(--color-primary-token-3);
-    --color-primary-token-4: var(--color-primary-token-4);
-    --color-primary-token-5: var(--color-primary-token-5);
-    --color-primary-token-6: var(--color-primary-token-6);
-    --color-primary-token-7: var(--color-primary-token-7);
-    --color-primary-token-8: var(--color-primary-token-8);
-    --color-primary-token-9: var(--color-primary-token-9);
-    --color-primary-token-10: var(--color-primary-token-10);
-    --color-primary: var(--color-primary-700);
-    --color-error: var(--color-error-500);
-    --color-success: var(--color-success-500);
-    --color-neutral: var(--color-neutral-7);
-    --color-warning: var(--color-warning-500);
-    --color-information: var(--color-information-500);
-    --color-secondary: var(--color-secondary-500);
-    --color-brand: var(--color-brand-500);
-
-    /* ── Semantic surface & text tokens ─────────────────────── */
-    --color-surface:            var(--color-surface);
-    --color-surface-raised:     var(--color-surface-raised);
-    --color-surface-sunken:     var(--color-surface-sunken);
-    --color-surface-hover:      var(--color-surface-hover);
-    --color-surface-control:    var(--color-surface-control);
-    --color-border-default:     var(--color-border-default);
-    --color-border-strong:      var(--color-border-strong);
-    --color-text-primary:       var(--color-text-primary);
-    --color-text-secondary:     var(--color-text-secondary);
-    --color-text-tertiary:      var(--color-text-tertiary);
-    --color-text-disabled:      var(--color-text-disabled);
-    --color-interactive:        var(--color-interactive);
-    --color-interactive-hover:  var(--color-interactive-hover);
-    --color-interactive-active: var(--color-interactive-active);
-    --color-interactive-subtle: var(--color-interactive-subtle);
-    --color-interactive-border: var(--color-interactive-border);
-    --color-interactive-text:   var(--color-interactive-text);
-    --color-interactive-on:     var(--color-interactive-on);
-    --color-overlay:            var(--color-overlay);
-
-    /* ── Semantic status tokens ──────────────────────────────── */
-    --color-error-subtle:   var(--color-error-subtle);
-    --color-error-muted:    var(--color-error-muted);
-    --color-error-border:   var(--color-error-border);
-    --color-error-hover:    var(--color-error-hover);
-    --color-error-default:  var(--color-error-default);
-    --color-error-active:   var(--color-error-active);
-    --color-error-text:     var(--color-error-text);
-
-    --color-warning-subtle:   var(--color-warning-subtle);
-    --color-warning-muted:    var(--color-warning-muted);
-    --color-warning-border:   var(--color-warning-border);
-    --color-warning-hover:    var(--color-warning-hover);
-    --color-warning-default:  var(--color-warning-default);
-    --color-warning-active:   var(--color-warning-active);
-    --color-warning-text:     var(--color-warning-text);
-
-    --color-success-subtle:   var(--color-success-subtle);
-    --color-success-muted:    var(--color-success-muted);
-    --color-success-border:   var(--color-success-border);
-    --color-success-hover:    var(--color-success-hover);
-    --color-success-default:  var(--color-success-default);
-    --color-success-active:   var(--color-success-active);
-    --color-success-text:     var(--color-success-text);
-
-    --color-information-subtle:   var(--color-information-subtle);
-    --color-information-muted:    var(--color-information-muted);
-    --color-information-border:   var(--color-information-border);
-    --color-information-hover:    var(--color-information-hover);
-    --color-information-default:  var(--color-information-default);
-    --color-information-active:   var(--color-information-active);
-    --color-information-text:     var(--color-information-text);
-
-    /* Elevation shadows */
-    --shadow-sm:           var(--shadow-sm);
-    --shadow-md:           var(--shadow-md);
-    --shadow-lg:           var(--shadow-lg);
-    --shadow-glow:         var(--shadow-glow);
-    --shadow-focus:        var(--shadow-focus);
-    --shadow-focus-error:   var(--shadow-focus-error);
-    --shadow-focus-warning: var(--shadow-focus-warning);
-    --shadow-focus-success: var(--shadow-focus-success);
-
-    /* Easing functions */
-    --ease-ui:     var(--ease-ui);
-    --ease-spring: var(--ease-spring);
-
-    /* Accordion animations */
-    --animate-accordion-down: accordion-down 0.2s ease-out;
-    --animate-accordion-up: accordion-up 0.2s ease-out;
-}
-
-@keyframes accordion-down {
-    from { height: 0; }
-    to   { height: var(--bits-accordion-content-height); }
-}
-
-@keyframes accordion-up {
-    from { height: var(--bits-accordion-content-height); }
-    to   { height: 0; }
-}
+/* Default base style */
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+
+* {
+    font-synthesis: none !important;
+    -webkit-font-smoothing: antialiased;
+}
+
+body:has(dialog[open]) {
+    overflow: hidden
+}
+
+body {
+    background: var(--color-neutral-token-1);
+    color: var(--color-neutral-token-13);
+}
+
+
+/* Scrollbar styles */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.dark ::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(255, 255, 255, 0.4);
+}
+
+* {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+
+html.dark, .dark * {
+    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+}
+
+
+@layer base {
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+        border-color: var(--color-neutral-token-5, currentColor);
+    }
+}
+
+@layer components {
+    .border,
+    .border-r,
+    .border-l,
+    .border-t,
+    .border-b,
+    .border-x,
+    .border-y {
+        border-color: var(--color-neutral-token-5);
+    }
+}
+
+@layer utilities {
+    .hide-scrollbar::-webkit-scrollbar {
+        display: none !important;
+    }
+
+    .hide-scrollbar {
+        -ms-overflow-style: none !important;
+        scrollbar-width: none !important;
+    }
+
+    .skeleton {
+        animation: var(--animate-pulse);
+        background-color: var(--color-neutral-token-4);
+        border-radius: var(--radius-sm);
+        height: --spacing(4);
+        width: 100%;
+    }
+}
+
+
+/* ============================================= */
+/* === Light Mode                             === */
+/* ============================================= */
+:root {
+    /* ── Fonts ──────────────────────────────────────────────────── */
+    --font-sans: "Inter Variable", "ui-sans-serif", "system-ui", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: "Geist Mono", "Roboto Mono Variable", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New";
+
+    /* ── Border Radius ──────────────────────────────────────────── */
+    --border-radius-base:      0.25rem;
+    --border-radius-container: 0.5rem;
+    --tera-radius-sm:   2px;
+    --tera-radius-base: 6px;
+    --tera-radius-lg:   8px;
+    --tera-radius-xl:   20px;
+
+    /* ── Control Heights ────────────────────────────────────────── */
+    --tera-control-height-xs:   20px;
+    --tera-control-height-sm:   24px;
+    --tera-control-height-base: 32px;
+    --tera-control-height-lg:   40px;
+
+    /* ── Transitions ────────────────────────────────────────────── */
+    --tera-transition-fast: 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+    --tera-transition-base: 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    --tera-transition-slow: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+    /* ── Easing Functions ───────────────────────────────────────── */
+    --ease-ui:     cubic-bezier(0.16, 1, 0.3, 1);
+    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1.0);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* ── Responsive ─────────────────────────────────────────────── */
+    --header-height: 3rem;
+
+    /* ── Primitive Color Scales (static — never use in components) ── */
+    --color-neutral-1:  rgb(255, 255, 255);
+    --color-neutral-2:  rgb(252, 252, 252);
+    --color-neutral-3:  rgb(245, 245, 245);
+    --color-neutral-4:  rgb(240, 240, 240);
+    --color-neutral-5:  rgb(217, 217, 217);
+    --color-neutral-6:  rgb(191, 191, 191);
+    --color-neutral-7:  rgb(140, 140, 140);
+    --color-neutral-8:  rgb(89,  89,  89);
+    --color-neutral-9:  rgb(69,  69,  69);
+    --color-neutral-10: rgb(38,  38,  38);
+    --color-neutral-11: rgb(31,  31,  31);
+    --color-neutral-12: rgb(20,  20,  20);
+    --color-neutral-13: rgb(0,   0,   0);
+
+    --color-primary-50:  rgb(235, 243, 254);
+    --color-primary-100: rgb(194, 216, 252);
+    --color-primary-200: rgb(165, 198, 251);
+    --color-primary-300: rgb(124, 171, 249);
+    --color-primary-400: rgb(98,  155, 248);
+    --color-primary-500: rgb(59,  130, 246);
+    --color-primary-600: rgb(54,  118, 224);
+    --color-primary-700: rgb(42,  92,  175);
+    --color-primary-800: rgb(32,  72,  135);
+    --color-primary-900: rgb(25,  55,  103);
+
+    --color-error-50:  rgb(253, 236, 236);
+    --color-error-100: rgb(250, 197, 197);
+    --color-error-200: rgb(248, 169, 169);
+    --color-error-300: rgb(244, 130, 130);
+    --color-error-400: rgb(242, 105, 105);
+    --color-error-500: rgb(239, 68,  68);
+    --color-error-600: rgb(217, 62,  62);
+    --color-error-700: rgb(170, 48,  48);
+    --color-error-800: rgb(131, 37,  37);
+    --color-error-900: rgb(100, 29,  29);
+
+    --color-success-50:  rgb(233, 249, 239);
+    --color-success-100: rgb(186, 237, 205);
+    --color-success-200: rgb(153, 228, 181);
+    --color-success-300: rgb(107, 216, 147);
+    --color-success-400: rgb(78,  209, 126);
+    --color-success-500: rgb(34,  197, 94);
+    --color-success-600: rgb(31,  179, 86);
+    --color-success-700: rgb(24,  140, 67);
+    --color-success-800: rgb(19,  108, 52);
+    --color-success-900: rgb(14,  83,  39);
+
+    --color-warning-50:  rgb(254, 241, 232);
+    --color-warning-100: rgb(253, 212, 183);
+    --color-warning-200: rgb(252, 191, 148);
+    --color-warning-300: rgb(251, 161, 99);
+    --color-warning-400: rgb(250, 143, 69);
+    --color-warning-500: rgb(249, 115, 22);
+    --color-warning-600: rgb(227, 105, 20);
+    --color-warning-700: rgb(177, 82,  16);
+    --color-warning-800: rgb(137, 63,  12);
+    --color-warning-900: rgb(105, 48,  9);
+
+    --color-information-50:  rgb(240, 249, 255);
+    --color-information-100: rgb(186, 230, 253);
+    --color-information-200: rgb(125, 211, 252);
+    --color-information-300: rgb(56,  189, 248);
+    --color-information-400: rgb(14,  165, 233);
+    --color-information-500: rgb(2,   132, 199);
+    --color-information-600: rgb(3,   105, 161);
+    --color-information-700: rgb(7,   89,  133);
+    --color-information-800: rgb(12,  74,  110);
+    --color-information-900: rgb(8,   47,  73);
+
+    --color-secondary-50:  rgb(253, 237, 245);
+    --color-secondary-100: rgb(249, 198, 223);
+    --color-secondary-200: rgb(246, 171, 208);
+    --color-secondary-300: rgb(242, 132, 187);
+    --color-secondary-400: rgb(240, 109, 173);
+    --color-secondary-500: rgb(236, 72,  153);
+    --color-secondary-600: rgb(215, 66,  139);
+    --color-secondary-700: rgb(168, 51,  109);
+    --color-secondary-800: rgb(130, 40,  84);
+    --color-secondary-900: rgb(99,  30,  64);
+
+    /* ── Scale Tokens (alias primitives in light; flip in dark) ─── */
+    /* Components use these — they are the semantic-safe color scale */
+    --color-neutral-token-1:  var(--color-neutral-1);
+    --color-neutral-token-2:  var(--color-neutral-2);
+    --color-neutral-token-3:  var(--color-neutral-3);
+    --color-neutral-token-4:  var(--color-neutral-4);
+    --color-neutral-token-5:  var(--color-neutral-5);
+    --color-neutral-token-6:  var(--color-neutral-6);
+    --color-neutral-token-7:  var(--color-neutral-7);
+    --color-neutral-token-8:  var(--color-neutral-8);
+    --color-neutral-token-9:  var(--color-neutral-9);
+    --color-neutral-token-10: var(--color-neutral-10);
+    --color-neutral-token-11: var(--color-neutral-11);
+    --color-neutral-token-12: var(--color-neutral-12);
+    --color-neutral-token-13: var(--color-neutral-13);
+
+    --color-primary-token-1:  var(--color-primary-50);
+    --color-primary-token-2:  var(--color-primary-100);
+    --color-primary-token-3:  var(--color-primary-200);
+    --color-primary-token-4:  var(--color-primary-300);
+    --color-primary-token-5:  var(--color-primary-400);
+    --color-primary-token-6:  var(--color-primary-500);
+    --color-primary-token-7:  var(--color-primary-600);
+    --color-primary-token-8:  var(--color-primary-700);
+    --color-primary-token-9:  var(--color-primary-800);
+    --color-primary-token-10: var(--color-primary-900);
+
+    /* ── Brand ──────────────────────────────────────────────────── */
+    --color-brand-500:    var(--color-primary-500);
+    --color-brand-token-5: var(--color-primary-500);
+
+    /* ── Surfaces (backgrounds by elevation) ─────────────────────── */
+    /* Convention: {role}-{modifier} — role-first, modifier describes prominence */
+    --color-surface:         var(--color-neutral-token-1);
+    --color-surface-raised:  var(--color-neutral-token-2);
+    --color-surface-sunken:  var(--color-neutral-token-3);
+    --color-surface-hover:   var(--color-neutral-token-4);
+    --color-surface-control: var(--color-neutral-token-1);
+
+    /* ── Borders ─────────────────────────────────────────────────── */
+    --color-border-default: var(--color-neutral-token-5);
+    --color-border-strong:  var(--color-neutral-token-6);
+
+    /* ── Text (prominence scale) ─────────────────────────────────── */
+    --color-text-primary:   var(--color-neutral-token-13);
+    --color-text-secondary: var(--color-neutral-token-8);
+    --color-text-tertiary:  var(--color-neutral-token-7);
+    --color-text-disabled:  var(--color-neutral-token-6);
+
+    /* ── Interactive (primary action — hover darkens, active darkest) ── */
+    --color-interactive:        var(--color-primary-500);
+    --color-interactive-hover:  var(--color-primary-600);
+    --color-interactive-active: var(--color-primary-700);
+    --color-interactive-subtle: var(--color-primary-50);
+    --color-interactive-border: var(--color-primary-200);
+    --color-interactive-text:   var(--color-primary-700);
+    --color-interactive-on:     #ffffff;
+    --color-overlay:            rgb(0 0 0 / 0.45);
+
+    /* ── Status: Error ───────────────────────────────────────────── */
+    --color-error-subtle:  var(--color-error-50);
+    --color-error-muted:   var(--color-error-100);
+    --color-error-border:  var(--color-error-200);
+    --color-error-hover:   var(--color-error-400);
+    --color-error-default: var(--color-error-500);
+    --color-error-active:  var(--color-error-600);
+    --color-error-text:    var(--color-error-700);
+
+    /* ── Status: Warning ─────────────────────────────────────────── */
+    --color-warning-subtle:  var(--color-warning-50);
+    --color-warning-muted:   var(--color-warning-100);
+    --color-warning-border:  var(--color-warning-200);
+    --color-warning-hover:   var(--color-warning-400);
+    --color-warning-default: var(--color-warning-500);
+    --color-warning-active:  var(--color-warning-600);
+    --color-warning-text:    var(--color-warning-700);
+
+    /* ── Status: Success ─────────────────────────────────────────── */
+    --color-success-subtle:  var(--color-success-50);
+    --color-success-muted:   var(--color-success-100);
+    --color-success-border:  var(--color-success-200);
+    --color-success-hover:   var(--color-success-400);
+    --color-success-default: var(--color-success-500);
+    --color-success-active:  var(--color-success-600);
+    --color-success-text:    var(--color-success-700);
+
+    /* ── Status: Information ─────────────────────────────────────── */
+    --color-information-subtle:  var(--color-information-50);
+    --color-information-muted:   var(--color-information-100);
+    --color-information-border:  var(--color-information-200);
+    --color-information-hover:   var(--color-information-400);
+    --color-information-default: var(--color-information-500);
+    --color-information-active:  var(--color-information-600);
+    --color-information-text:    var(--color-information-700);
+
+    /* ── Elevation Shadows ───────────────────────────────────────── */
+    --shadow-none: none;
+    --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
+    --shadow-md:   0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06);
+    --shadow-lg:   0 12px 32px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
+    --shadow-glow: 0 0 0 1px var(--color-primary-200),
+                   0 4px 16px color-mix(in srgb, var(--color-primary-500) 20%, transparent);
+
+    /* ── Focus Shadows ───────────────────────────────────────────── */
+    --shadow-focus:         0 0 0 3px color-mix(in srgb, var(--color-primary-500)  20%, transparent);
+    --shadow-focus-error:   0 0 0 3px color-mix(in srgb, var(--color-error-500)    20%, transparent);
+    --shadow-focus-warning: 0 0 0 3px color-mix(in srgb, var(--color-warning-500)  20%, transparent);
+    --shadow-focus-success: 0 0 0 3px color-mix(in srgb, var(--color-success-500)  20%, transparent);
+
+    /* ── Accordion Animations ────────────────────────────────────── */
+    --animate-accordion-down: accordion-down 0.2s ease-out;
+    --animate-accordion-up:   accordion-up 0.2s ease-out;
+}
+
+
+/* ============================================= */
+/* === Dark Mode Overrides                    === */
+/* ============================================= */
+.dark {
+    /* ── Neutral Tokens (token-1/3/4/5/6 use custom dark values) ── */
+    --color-neutral-token-1:  rgb(9,   9,   9);
+    --color-neutral-token-2:  rgb(20,  20,  20);
+    --color-neutral-token-3:  rgb(32,  32,  32);
+    --color-neutral-token-4:  rgb(48,  48,  48);
+    --color-neutral-token-5:  rgb(70,  70,  70);
+    --color-neutral-token-6:  rgb(95,  95,  95);
+    --color-neutral-token-7:  rgb(140, 140, 140);
+    --color-neutral-token-8:  rgb(191, 191, 191);
+    --color-neutral-token-9:  rgb(217, 217, 217);
+    --color-neutral-token-10: rgb(240, 240, 240);
+    --color-neutral-token-11: rgb(245, 245, 245);
+    --color-neutral-token-12: rgb(252, 252, 252);
+    --color-neutral-token-13: rgb(255, 255, 255);
+
+    /* ── Primary Tokens (reversed scale) ────────────────────────── */
+    --color-primary-token-1:  var(--color-primary-900);
+    --color-primary-token-2:  var(--color-primary-800);
+    --color-primary-token-3:  var(--color-primary-700);
+    --color-primary-token-4:  var(--color-primary-600);
+    --color-primary-token-5:  var(--color-primary-500);
+    --color-primary-token-6:  var(--color-primary-400);
+    --color-primary-token-7:  var(--color-primary-300);
+    --color-primary-token-8:  var(--color-primary-200);
+    --color-primary-token-9:  var(--color-primary-100);
+    --color-primary-token-10: var(--color-primary-50);
+
+    /* ── Brand ───────────────────────────────────────────────────── */
+    --color-brand-token-5: rgb(0, 111, 238);
+
+    /* ── Surface Overrides ───────────────────────────────────────── */
+    --color-surface-control: var(--color-neutral-token-3);
+
+    /* ── Interactive Overrides ───────────────────────────────────── */
+    --color-interactive-subtle: var(--color-primary-900);
+    --color-interactive-border: var(--color-primary-700);
+    --color-interactive-text:   var(--color-primary-300);
+    --color-overlay:            rgb(255 255 255 / 0.12);
+
+    /* ── Status Overrides ────────────────────────────────────────── */
+    --color-error-subtle: var(--color-error-900);
+    --color-error-muted:  var(--color-error-800);
+    --color-error-border: var(--color-error-700);
+    --color-error-text:   var(--color-error-400);
+
+    --color-warning-subtle: var(--color-warning-900);
+    --color-warning-muted:  var(--color-warning-800);
+    --color-warning-border: var(--color-warning-700);
+    --color-warning-text:   var(--color-warning-400);
+
+    --color-success-subtle: var(--color-success-900);
+    --color-success-muted:  var(--color-success-800);
+    --color-success-border: var(--color-success-700);
+    --color-success-text:   var(--color-success-400);
+
+    --color-information-subtle: var(--color-information-900);
+    --color-information-muted:  var(--color-information-800);
+    --color-information-border: var(--color-information-700);
+    --color-information-text:   var(--color-information-400);
+
+    /* ── Shadow Overrides (white glow replaces black drop on dark bg) */
+    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4),  0 0 0 1px rgba(255,255,255,0.04);
+    --shadow-md: 0 4px 12px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
+    --shadow-lg: 0 12px 32px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
+
+    /* ── Semantic Tokens (re-stated so var() resolves in .dark context) ── */
+    --color-surface:         var(--color-neutral-token-1);
+    --color-surface-raised:  var(--color-neutral-token-2);
+    --color-surface-sunken:  var(--color-neutral-token-3);
+    --color-surface-hover:   var(--color-neutral-token-4);
+
+    --color-border-default: var(--color-neutral-token-5);
+    --color-border-strong:  var(--color-neutral-token-6);
+
+    --color-text-primary:   var(--color-neutral-token-13);
+    --color-text-secondary: var(--color-neutral-token-8);
+    --color-text-tertiary:  var(--color-neutral-token-7);
+    --color-text-disabled:  var(--color-neutral-token-6);
+}
+
+
+@media (min-width: theme(--breakpoint-md)) {
+    :root { --header-height: 3.5rem; }
+}
+
+
+/* ============================================= */
+/* === Tailwind Theme Exposure                === */
+/* === @theme inline: Tailwind generates      === */
+/* === utilities that reference these CSS     === */
+/* === vars directly. :root / :root.dark are  === */
+/* === the single source of truth.            === */
+/* ============================================= */
+@theme inline {
+    --default-ring-width: 3px;
+    --default-ring-color: var(--color-primary-700);
+
+    --color-border:     var(--color-neutral-token-5);
+    --color-input:      var(--color-neutral-token-4);
+    --color-ring:       var(--color-primary-700);
+    --color-background: var(--color-neutral-token-1);
+    --color-foreground: var(--color-neutral-token-13);
+
+    --spacing-icon-xs:       1.25rem;
+    --spacing-icon-sm:       1.5rem;
+    --spacing-icon-md:       1.75rem;
+    --spacing-icon-lg:       2rem;
+    --spacing-icon-xl:       2.25rem;
+    --spacing-icon-2xl:      2.5rem;
+    --spacing-header-height: var(--header-height);
+
+    --radius-container: var(--border-radius-container);
+    --radius:           var(--border-radius-base);
+
+    /* Primitive scales */
+    --color-primary-50:  var(--color-primary-50);
+    --color-primary-100: var(--color-primary-100);
+    --color-primary-200: var(--color-primary-200);
+    --color-primary-300: var(--color-primary-300);
+    --color-primary-400: var(--color-primary-400);
+    --color-primary-500: var(--color-primary-500);
+    --color-primary-600: var(--color-primary-600);
+    --color-primary-700: var(--color-primary-700);
+    --color-primary-800: var(--color-primary-800);
+    --color-primary-900: var(--color-primary-900);
+
+    --color-error-50:  var(--color-error-50);
+    --color-error-100: var(--color-error-100);
+    --color-error-200: var(--color-error-200);
+    --color-error-300: var(--color-error-300);
+    --color-error-400: var(--color-error-400);
+    --color-error-500: var(--color-error-500);
+    --color-error-600: var(--color-error-600);
+    --color-error-700: var(--color-error-700);
+    --color-error-800: var(--color-error-800);
+    --color-error-900: var(--color-error-900);
+
+    --color-success-50:  var(--color-success-50);
+    --color-success-100: var(--color-success-100);
+    --color-success-200: var(--color-success-200);
+    --color-success-300: var(--color-success-300);
+    --color-success-400: var(--color-success-400);
+    --color-success-500: var(--color-success-500);
+    --color-success-600: var(--color-success-600);
+    --color-success-700: var(--color-success-700);
+    --color-success-800: var(--color-success-800);
+    --color-success-900: var(--color-success-900);
+
+    --color-neutral-1:  var(--color-neutral-1);
+    --color-neutral-2:  var(--color-neutral-2);
+    --color-neutral-3:  var(--color-neutral-3);
+    --color-neutral-4:  var(--color-neutral-4);
+    --color-neutral-5:  var(--color-neutral-5);
+    --color-neutral-6:  var(--color-neutral-6);
+    --color-neutral-7:  var(--color-neutral-7);
+    --color-neutral-8:  var(--color-neutral-8);
+    --color-neutral-9:  var(--color-neutral-9);
+    --color-neutral-10: var(--color-neutral-10);
+    --color-neutral-11: var(--color-neutral-11);
+    --color-neutral-12: var(--color-neutral-12);
+    --color-neutral-13: var(--color-neutral-13);
+
+    --color-warning-50:  var(--color-warning-50);
+    --color-warning-100: var(--color-warning-100);
+    --color-warning-200: var(--color-warning-200);
+    --color-warning-300: var(--color-warning-300);
+    --color-warning-400: var(--color-warning-400);
+    --color-warning-500: var(--color-warning-500);
+    --color-warning-600: var(--color-warning-600);
+    --color-warning-700: var(--color-warning-700);
+    --color-warning-800: var(--color-warning-800);
+    --color-warning-900: var(--color-warning-900);
+
+    --color-information-50:  var(--color-information-50);
+    --color-information-100: var(--color-information-100);
+    --color-information-200: var(--color-information-200);
+    --color-information-300: var(--color-information-300);
+    --color-information-400: var(--color-information-400);
+    --color-information-500: var(--color-information-500);
+    --color-information-600: var(--color-information-600);
+    --color-information-700: var(--color-information-700);
+    --color-information-800: var(--color-information-800);
+    --color-information-900: var(--color-information-900);
+
+    --color-secondary-50:  var(--color-secondary-50);
+    --color-secondary-100: var(--color-secondary-100);
+    --color-secondary-200: var(--color-secondary-200);
+    --color-secondary-300: var(--color-secondary-300);
+    --color-secondary-400: var(--color-secondary-400);
+    --color-secondary-500: var(--color-secondary-500);
+    --color-secondary-600: var(--color-secondary-600);
+    --color-secondary-700: var(--color-secondary-700);
+    --color-secondary-800: var(--color-secondary-800);
+    --color-secondary-900: var(--color-secondary-900);
+
+    /* Brand */
+    --color-brand-500:    var(--color-brand-500);
+    --color-brand-token-5: var(--color-brand-token-5);
+
+    /* Scale tokens */
+    --color-neutral-token-1:  var(--color-neutral-token-1);
+    --color-neutral-token-2:  var(--color-neutral-token-2);
+    --color-neutral-token-3:  var(--color-neutral-token-3);
+    --color-neutral-token-4:  var(--color-neutral-token-4);
+    --color-neutral-token-5:  var(--color-neutral-token-5);
+    --color-neutral-token-6:  var(--color-neutral-token-6);
+    --color-neutral-token-7:  var(--color-neutral-token-7);
+    --color-neutral-token-8:  var(--color-neutral-token-8);
+    --color-neutral-token-9:  var(--color-neutral-token-9);
+    --color-neutral-token-10: var(--color-neutral-token-10);
+    --color-neutral-token-11: var(--color-neutral-token-11);
+    --color-neutral-token-12: var(--color-neutral-token-12);
+    --color-neutral-token-13: var(--color-neutral-token-13);
+
+    --color-primary-token-1:  var(--color-primary-token-1);
+    --color-primary-token-2:  var(--color-primary-token-2);
+    --color-primary-token-3:  var(--color-primary-token-3);
+    --color-primary-token-4:  var(--color-primary-token-4);
+    --color-primary-token-5:  var(--color-primary-token-5);
+    --color-primary-token-6:  var(--color-primary-token-6);
+    --color-primary-token-7:  var(--color-primary-token-7);
+    --color-primary-token-8:  var(--color-primary-token-8);
+    --color-primary-token-9:  var(--color-primary-token-9);
+    --color-primary-token-10: var(--color-primary-token-10);
+
+    /* Single-value shorthand tokens */
+    --color-primary:     var(--color-primary-700);
+    --color-error:       var(--color-error-500);
+    --color-success:     var(--color-success-500);
+    --color-neutral:     var(--color-neutral-7);
+    --color-warning:     var(--color-warning-500);
+    --color-information: var(--color-information-500);
+    --color-secondary:   var(--color-secondary-500);
+    --color-brand:       var(--color-brand-500);
+
+    /* Semantic surface & text tokens */
+    --color-surface:         var(--color-surface);
+    --color-surface-raised:  var(--color-surface-raised);
+    --color-surface-sunken:  var(--color-surface-sunken);
+    --color-surface-hover:   var(--color-surface-hover);
+    --color-surface-control: var(--color-surface-control);
+    --color-border-default:  var(--color-border-default);
+    --color-border-strong:   var(--color-border-strong);
+    --color-text-primary:    var(--color-text-primary);
+    --color-text-secondary:  var(--color-text-secondary);
+    --color-text-tertiary:   var(--color-text-tertiary);
+    --color-text-disabled:   var(--color-text-disabled);
+
+    --color-interactive:        var(--color-interactive);
+    --color-interactive-hover:  var(--color-interactive-hover);
+    --color-interactive-active: var(--color-interactive-active);
+    --color-interactive-subtle: var(--color-interactive-subtle);
+    --color-interactive-border: var(--color-interactive-border);
+    --color-interactive-text:   var(--color-interactive-text);
+    --color-interactive-on:     var(--color-interactive-on);
+    --color-overlay:            var(--color-overlay);
+
+    /* Semantic status tokens */
+    --color-error-subtle:  var(--color-error-subtle);
+    --color-error-muted:   var(--color-error-muted);
+    --color-error-border:  var(--color-error-border);
+    --color-error-hover:   var(--color-error-hover);
+    --color-error-default: var(--color-error-default);
+    --color-error-active:  var(--color-error-active);
+    --color-error-text:    var(--color-error-text);
+
+    --color-warning-subtle:  var(--color-warning-subtle);
+    --color-warning-muted:   var(--color-warning-muted);
+    --color-warning-border:  var(--color-warning-border);
+    --color-warning-hover:   var(--color-warning-hover);
+    --color-warning-default: var(--color-warning-default);
+    --color-warning-active:  var(--color-warning-active);
+    --color-warning-text:    var(--color-warning-text);
+
+    --color-success-subtle:  var(--color-success-subtle);
+    --color-success-muted:   var(--color-success-muted);
+    --color-success-border:  var(--color-success-border);
+    --color-success-hover:   var(--color-success-hover);
+    --color-success-default: var(--color-success-default);
+    --color-success-active:  var(--color-success-active);
+    --color-success-text:    var(--color-success-text);
+
+    --color-information-subtle:  var(--color-information-subtle);
+    --color-information-muted:   var(--color-information-muted);
+    --color-information-border:  var(--color-information-border);
+    --color-information-hover:   var(--color-information-hover);
+    --color-information-default: var(--color-information-default);
+    --color-information-active:  var(--color-information-active);
+    --color-information-text:    var(--color-information-text);
+
+    /* Elevation shadows */
+    --shadow-sm:            var(--shadow-sm);
+    --shadow-md:            var(--shadow-md);
+    --shadow-lg:            var(--shadow-lg);
+    --shadow-glow:          var(--shadow-glow);
+    --shadow-focus:         var(--shadow-focus);
+    --shadow-focus-error:   var(--shadow-focus-error);
+    --shadow-focus-warning: var(--shadow-focus-warning);
+    --shadow-focus-success: var(--shadow-focus-success);
+
+    /* Easing functions */
+    --ease-ui:     var(--ease-ui);
+    --ease-spring: var(--ease-spring);
+
+    /* Accordion animations */
+    --animate-accordion-down: var(--animate-accordion-down);
+    --animate-accordion-up:   var(--animate-accordion-up);
+}
+
+
+@keyframes accordion-down {
+    from { height: 0; }
+    to   { height: var(--bits-accordion-content-height); }
+}
+
+@keyframes accordion-up {
+    from { height: var(--bits-accordion-content-height); }
+    to   { height: 0; }
+}
+
+
+@media (prefers-reduced-motion: reduce) {
+    *, ::before, ::after {
+        transition-duration: 1ms !important;
+        animation-duration:  1ms !important;
+    }
+}