@getufy/flint-ui 0.1.0

package/src/theme.css

@@ -0,0 +1,651 @@
+/* ═══════════════════════════════════════════════════════════════
+   QUICK REBRAND
+   Change these 5 variables to make the library yours.
+   Everything else cascades from them automatically.
+   ═══════════════════════════════════════════════════════════════
+
+   --flint-primary-color:        #your-brand;
+   --flint-primary-color-hover:  #your-brand-dark;
+   --flint-primary-color-active: #your-brand-darker;
+   --flint-border-radius-md:     0.375rem;   (try 0 for sharp, 0.5rem for rounder)
+   --flint-font-family:          'Your Font', sans-serif;
+
+   ═══════════════════════════════════════════════════════════════ */
+
+
+/* ═══════════════════════════════════════════════════════════════
+   LAYER 1 — Primitive Palette
+   Raw color scales. Never override these inside theme blocks.
+   Components never reference these directly — use Layer 2 tokens.
+   ═══════════════════════════════════════════════════════════════ */
+:root {
+    /* Blue */
+    --flint-color-blue-50:  #eff6ff;
+    --flint-color-blue-100: #dbeafe;
+    --flint-color-blue-200: #bfdbfe;
+    --flint-color-blue-400: #60a5fa;
+    --flint-color-blue-500: #3b82f6;
+    --flint-color-blue-600: #2563eb;
+    --flint-color-blue-700: #1d4ed8;
+    --flint-color-blue-800: #1e40af;
+
+    /* Zinc — used for neutral surfaces and dark mode */
+    --flint-color-zinc-50:  #fafafa;
+    --flint-color-zinc-100: #f4f4f5;
+    --flint-color-zinc-200: #e4e4e7;
+    --flint-color-zinc-300: #d4d4d8;
+    --flint-color-zinc-400: #a1a1aa;
+    --flint-color-zinc-500: #71717a;
+    --flint-color-zinc-600: #52525b;
+    --flint-color-zinc-700: #3f3f46;
+    --flint-color-zinc-800: #27272a;
+    --flint-color-zinc-900: #18181b;
+    --flint-color-zinc-950: #09090b;
+
+    /* Slate — used for primary text (cooler, deeper than zinc) */
+    --flint-color-slate-50:  #f8fafc;
+    --flint-color-slate-900: #0f172a;
+    --flint-color-slate-950: #020617;
+
+    /* Red */
+    --flint-color-red-50:  #fef2f2;
+    --flint-color-red-100: #fee2e2;
+    --flint-color-red-400: #f87171;
+    --flint-color-red-500: #ef4444;
+    --flint-color-red-600: #dc2626;
+    --flint-color-red-700: #b91c1c;
+    --flint-color-red-800: #991b1b;
+
+    /* Emerald */
+    --flint-color-emerald-50:  #f0fdf4;
+    --flint-color-emerald-100: #dcfce7;
+    --flint-color-emerald-400: #34d399;
+    --flint-color-emerald-500: #10b981;
+    --flint-color-emerald-700: #15803d;
+    --flint-color-emerald-800: #166534;
+
+    /* Amber */
+    --flint-color-amber-50:  #fffbeb;
+    --flint-color-amber-100: #fef3c7;
+    --flint-color-amber-400: #fbbf24;
+    --flint-color-amber-500: #f59e0b;
+    --flint-color-amber-800: #92400e;
+
+    /* Violet — accent scale */
+    --flint-color-violet-100: #ede9fe;
+    --flint-color-violet-200: #ddd6fe;
+    --flint-color-violet-400: #a78bfa;
+    --flint-color-violet-500: #8b5cf6;
+    --flint-color-violet-600: #7c3aed;
+    --flint-color-violet-700: #6d28d9;
+    --flint-color-violet-800: #5b21b6;
+
+    /* White / Black */
+    --flint-color-white: #ffffff;
+    --flint-color-black: #000000;
+}
+
+
+/* ═══════════════════════════════════════════════════════════════
+   LAYER 2 — Semantic Tokens (light mode defaults)
+   Components reference only these. Override these to theme.
+   ═══════════════════════════════════════════════════════════════ */
+:root {
+    /* ─── Primary ──────────────────────────────────────────────── */
+    --flint-primary-color:        var(--flint-color-blue-600);
+    --flint-primary-color-hover:  var(--flint-color-blue-700);
+    --flint-primary-color-active: var(--flint-color-blue-800);
+    --flint-primary-color-light:       rgba(37, 99, 235, 0.10);
+    --flint-primary-color-light-hover: rgba(37, 99, 235, 0.18);
+    --flint-primary-focus-ring:        rgba(37, 99, 235, 0.20);
+
+    /* ─── Accent (non-primary tint — violet by default) ────────── */
+    --flint-accent-color:        var(--flint-color-violet-600);
+    --flint-accent-color-hover:  var(--flint-color-violet-700);
+    --flint-accent-color-light:  rgba(124, 58, 237, 0.10);
+    --flint-accent-foreground:   var(--flint-color-white);
+
+    /* ─── Secondary ────────────────────────────────────────────── */
+    --flint-secondary-color:        var(--flint-color-zinc-500);
+    --flint-secondary-color-hover:  var(--flint-color-zinc-600);
+    --flint-secondary-color-active: var(--flint-color-zinc-700);
+
+    /* ─── Destructive / Error ──────────────────────────────────── */
+    --flint-destructive-color:        var(--flint-color-red-600);
+    --flint-destructive-color-hover:  var(--flint-color-red-700);
+    --flint-destructive-color-active: var(--flint-color-red-800);
+    --flint-error-color:              var(--flint-color-red-600);
+    --flint-error-focus-ring:         rgba(239, 68, 68, 0.20);
+
+    /* ─── Semantic status ──────────────────────────────────────── */
+    --flint-success-color: var(--flint-color-emerald-700);
+    --flint-warning-color: var(--flint-color-amber-800);
+
+    /* Info */
+    --flint-info-bg:           var(--flint-color-blue-50);
+    --flint-info-border-color: var(--flint-color-blue-200);
+    --flint-info-text-color:   var(--flint-color-blue-800);
+    --flint-info-icon-color:   var(--flint-color-blue-600);
+
+    /* Success */
+    --flint-success-bg:           var(--flint-color-emerald-50);
+    --flint-success-border-color: var(--flint-color-emerald-100);
+    --flint-success-text-color:   var(--flint-color-emerald-800);
+    --flint-success-icon-color:   var(--flint-color-emerald-700);
+
+    /* Warning */
+    --flint-warning-bg:           var(--flint-color-amber-50);
+    --flint-warning-border-color: var(--flint-color-amber-100);
+    --flint-warning-text-color:   var(--flint-color-amber-800);
+    --flint-warning-icon-color:   var(--flint-color-amber-500);
+
+    /* Error */
+    --flint-error-bg:           var(--flint-color-red-50);
+    --flint-error-border-color: var(--flint-color-red-100);
+    --flint-error-text-color:   var(--flint-color-red-800);
+    --flint-error-icon-color:   var(--flint-color-red-500);
+
+    /* ─── Surfaces ─────────────────────────────────────────────── */
+    /* Elevation layers: background < surface-1 < surface-2 < surface-3  */
+    --flint-background:      var(--flint-color-white);           /* page / app shell     */
+    --flint-surface-1:       var(--flint-color-white);           /* cards, panels        */
+    --flint-surface-2:       var(--flint-color-zinc-50);         /* inputs, subtle bg    */
+    --flint-surface-3:       var(--flint-color-zinc-100);        /* selected, active bg  */
+    --flint-surface-variant: var(--flint-color-slate-50);        /* tinted bg (SVG, etc) */
+
+    /* Backward-compat aliases */
+    --flint-surface-background:      var(--flint-background);
+    --flint-surface-background-flat: var(--flint-surface-2);
+    --flint-card-background:         var(--flint-surface-1);
+    --flint-card-background-flat:    var(--flint-surface-2);
+    --flint-input-bg:                var(--flint-background);
+    --flint-muted-background:        var(--flint-surface-3);
+
+    /* ─── Text ─────────────────────────────────────────────────── */
+    --flint-text-color:            var(--flint-color-slate-900);  /* primary text   */
+    --flint-text-color-muted:      var(--flint-color-zinc-600);   /* secondary text */
+    --flint-text-color-subtle:     var(--flint-color-zinc-500);   /* hints, disabled labels */
+    --flint-text-color-on-primary: var(--flint-color-white);
+
+    /* ─── Borders ──────────────────────────────────────────────── */
+    --flint-border-color:             var(--flint-color-zinc-200);
+    --flint-input-border-color:       var(--flint-color-zinc-300);
+    --flint-input-border-hover-color: var(--flint-color-zinc-400);
+    --flint-card-border-color:        var(--flint-color-zinc-100);
+
+    /* ─── Interactive overlays ─────────────────────────────────── */
+    --flint-hover-color:  rgba(0, 0, 0, 0.04);
+    --flint-active-color: rgba(0, 0, 0, 0.08);
+
+    /* ─── Focus rings ──────────────────────────────────────────── */
+    /* see --flint-primary-focus-ring and --flint-error-focus-ring above */
+
+    /* ─── Backdrop ─────────────────────────────────────────────── */
+    --flint-backdrop-color: rgba(0, 0, 0, 0.50);
+
+    /* ─── Component-specific ───────────────────────────────────── */
+    --flint-tab-inactive-color:    var(--flint-text-color-muted);
+    --flint-tab-active-color:      var(--flint-primary-color);
+    --flint-tab-indicator-color:   var(--flint-primary-color);
+    --flint-tab-indicator-height:  3px;
+    --flint-tab-indicator-width:   3px;
+    --flint-tab-indicator-radius:  3px;
+    --flint-tab-min-height:        48px;
+    --flint-tab-icon-min-height:   72px;
+    --flint-tab-padding-x:         16px;
+    --flint-tab-padding-y:         10px;
+    --flint-tab-font-size:         0.875rem;
+    --flint-tab-font-weight:       500;
+    --flint-tab-font-weight-active: 600;
+    --flint-tab-panel-padding:     24px;
+    --flint-tab-border-color:      var(--flint-border-color);
+    --flint-tab-scroll-btn-size:   40px;
+    --flint-tab-disabled-opacity:  0.38;
+    --flint-tab-hover-bg:          var(--flint-primary-color-light);
+
+    --flint-tooltip-bg:         rgba(15, 23, 42, 0.88);
+    --flint-tooltip-text-color: var(--flint-color-white);
+    --flint-tooltip-color:      var(--flint-color-white);
+    --flint-tooltip-max-width:  300px;
+
+    --flint-stepper-connector-color: var(--flint-border-color);
+    --flint-switch-thumb-color:      var(--flint-color-white);
+
+    /* ─── Checkbox ──────────────────────────────────────────────── */
+    --flint-checkbox-size:              18px;
+    --flint-checkbox-size-sm:           14px;
+    --flint-checkbox-size-lg:           22px;
+    --flint-checkbox-icon-size:         12px;
+    --flint-checkbox-icon-size-sm:      10px;
+    --flint-checkbox-icon-size-lg:      16px;
+    --flint-checkbox-border-radius:     var(--flint-border-radius-sm);
+    --flint-checkbox-gap:               8px;
+    --flint-checkbox-label-font-size:   14px;
+    --flint-checkbox-label-font-size-sm: 12px;
+    --flint-checkbox-label-font-size-lg: 16px;
+
+    /* ─── Radio ──────────────────────────────────────────────────── */
+    --flint-radio-size:                18px;
+    --flint-radio-size-sm:             14px;
+    --flint-radio-size-lg:             22px;
+    --flint-radio-dot-size:            8px;
+    --flint-radio-dot-size-sm:         6px;
+    --flint-radio-dot-size-lg:         10px;
+    --flint-radio-gap:                 8px;
+    --flint-radio-group-gap:           8px;
+    --flint-radio-label-font-size:     14px;
+    --flint-radio-label-font-size-sm:  12px;
+    --flint-radio-label-font-size-lg:  16px;
+    --flint-radio-disabled-opacity:    0.5;
+
+    /* ─── Input-specific ───────────────────────────────────────── */
+    --flint-label-color:              var(--flint-color-zinc-700, #3f3f46);
+    --flint-input-placeholder-color:  var(--flint-color-zinc-500);
+    --flint-input-disabled-bg:        var(--flint-color-zinc-100);
+    --flint-input-disabled-color:     var(--flint-color-zinc-400);
+    --flint-input-readonly-bg:        var(--flint-color-zinc-50);
+    --flint-help-text-color:          var(--flint-text-color-muted);
+    --flint-textarea-min-height:      80px;
+
+    /* ─── Toast (Sonner) ───────────────────────────────────────── */
+    --flint-toast-z-index:   9999;
+    --flint-toast-width:     356px;
+    --flint-toast-gap:       8px;
+    --flint-toast-padding:   16px;
+    --flint-toast-bg:        var(--flint-surface-1);
+    --flint-toast-color:     var(--flint-text-color);
+    --flint-toast-border:    1px solid var(--flint-border-color);
+    --flint-toast-radius:    var(--flint-border-radius-lg);
+    --flint-toast-shadow:    var(--flint-shadow-lg);
+    --flint-toast-success-icon-color: var(--flint-success-color);
+    --flint-toast-error-icon-color:   var(--flint-error-color);
+    --flint-toast-warning-icon-color: var(--flint-warning-color);
+    --flint-toast-info-icon-color:    var(--flint-primary-color);
+
+    /* ─── Scroll Area ──────────────────────────────────────────── */
+    --flint-scrollbar-size:              8px;
+    --flint-scrollbar-thumb-color:       rgba(0, 0, 0, 0.35);
+    --flint-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.50);
+    --flint-scrollbar-thumb-radius:      9999px;
+    --flint-scrollbar-track-color:       transparent;
+
+    /* ─── Transfer List ──────────────────────────────────────── */
+    --flint-transfer-list-height:        300px;
+    --flint-transfer-list-width:         200px;
+
+    /* ─── Copy Button ────────────────────────────────────────── */
+    --flint-copy-button-success-color: var(--flint-success-color);
+    --flint-copy-button-error-color:   var(--flint-error-color);
+
+    /* ─── Image Comparer ─────────────────────────────────────── */
+    --flint-image-comparer-divider-width:      2px;
+    --flint-image-comparer-divider-color:      var(--flint-color-white);
+    --flint-image-comparer-handle-size:        40px;
+    --flint-image-comparer-handle-bg:          var(--flint-color-white);
+    --flint-image-comparer-handle-border-color: rgba(0, 0, 0, 0.15);
+    --flint-image-comparer-handle-icon-color:  var(--flint-text-color-muted);
+    --flint-image-comparer-border-radius:      var(--flint-border-radius-md);
+
+    /* ─── Resizable ───────────────────────────────────────────── */
+    --flint-resizable-handle-size:           4px;
+    --flint-resizable-handle-active-size:    12px;
+    --flint-resizable-handle-bg:             var(--flint-border-color);
+    --flint-resizable-handle-hover-bg:       var(--flint-primary-color);
+    --flint-resizable-handle-focus-bg:       var(--flint-primary-color);
+    --flint-resizable-handle-transition:        150ms;
+    --flint-resizable-handle-border-radius:     0px;
+    --flint-resizable-handle-disabled-opacity:  0.5;
+    --flint-resizable-grip-bg:                  var(--flint-background);
+    --flint-resizable-grip-width:            12px;
+    --flint-resizable-grip-height:           24px;
+    --flint-resizable-grip-dot-color:        var(--flint-text-color-muted);
+    --flint-resizable-grip-dot-size:         2px;
+    --flint-resizable-grip-dot-gap:          1px;
+    --flint-resizable-step:                  5;
+
+    /* ─── Autocomplete ────────────────────────────────────────── */
+    --flint-autocomplete-dropdown-max-height: 250px;
+    --flint-autocomplete-option-padding:      10px 12px;
+    --flint-autocomplete-z-index:             10;
+
+    /* ─── Toggle ───────────────────────────────────────────────── */
+    --flint-toggle-border-radius:        var(--flint-border-radius-md);
+    --flint-toggle-font-size:            0.875rem;
+    --flint-toggle-padding-x:            0.75rem;
+    --flint-toggle-padding-y:            0.5rem;
+    --flint-toggle-padding-x-sm:         0.625rem;
+    --flint-toggle-padding-y-sm:         0.375rem;
+    --flint-toggle-padding-x-lg:         1rem;
+    --flint-toggle-padding-y-lg:         0.625rem;
+    --flint-toggle-min-width:            2.25rem;
+    --flint-toggle-min-height:           2.25rem;
+    --flint-toggle-color:                var(--flint-text-color);
+    --flint-toggle-color-hover:          var(--flint-text-color);
+    --flint-toggle-bg:                   transparent;
+    --flint-toggle-bg-hover:             var(--flint-muted-background);
+    --flint-toggle-bg-pressed:           var(--flint-primary-color-light);
+    --flint-toggle-color-pressed:        var(--flint-primary-color);
+    --flint-toggle-bg-pressed-hover:     var(--flint-primary-color-light-hover);
+    --flint-toggle-border-color:         var(--flint-border-color);
+    --flint-toggle-border-pressed-color: var(--flint-primary-color-light-hover);
+
+    /* ─── Range Slider ────────────────────────────────────────── */
+    --flint-range-slider-track-height:  6px;
+    --flint-range-slider-thumb-size:    20px;
+    --flint-range-slider-track-color:   var(--flint-input-border-color);
+    --flint-range-slider-fill-color:    var(--flint-primary-color);
+    --flint-range-slider-thumb-color:   var(--flint-surface-1);
+    --flint-range-slider-thumb-border:  var(--flint-primary-color);
+
+    /* ─── Input OTP ────────────────────────────────────────────── */
+    --flint-otp-slot-width:     40px;
+    --flint-otp-slot-height:    48px;
+    --flint-otp-slot-font-size: 1.25rem;
+    --flint-otp-slot-radius:    var(--flint-border-radius-md);
+    --flint-otp-gap:            8px;
+
+    /* ─── Chip ─────────────────────────────────────────────────── */
+    --flint-chip-height:            32px;
+    --flint-chip-height-sm:         24px;
+    --flint-chip-height-lg:         40px;
+    --flint-chip-border-radius:     16px;
+    --flint-chip-border-radius-sm:  12px;
+    --flint-chip-border-radius-lg:  20px;
+    --flint-chip-font-size:         0.875rem;
+    --flint-chip-font-size-sm:      0.75rem;
+    --flint-chip-font-size-lg:      1rem;
+    --flint-chip-padding-x:         12px;
+    --flint-chip-padding-x-sm:      8px;
+    --flint-chip-padding-x-lg:      16px;
+    --flint-chip-gap:               8px;
+
+    /* ─── Carousel ────────────────────────────────────────────── */
+    --flint-carousel-gap:             0px;
+    --flint-carousel-height:          320px;
+    --flint-carousel-duration:        0.35s;
+    --flint-carousel-ease:            cubic-bezier(0.25, 0.1, 0.25, 1);
+    --flint-carousel-nav-button-size: 36px;
+
+    /* ─── Drawer ───────────────────────────────────────────────── */
+    --flint-drawer-width:      250px;
+    --flint-drawer-mini-width: 72px;
+    --flint-drawer-height:     auto;
+    --flint-drawer-bg:         var(--flint-surface-1);
+    --flint-drawer-z-index:    1200;
+    --flint-drawer-shadow:     0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12);
+    --flint-drawer-transition: .225s cubic-bezier(0, 0, .2, 1);
+    --flint-drawer-edge-width: 16px;
+
+    /* ─── Split Panel ─────────────────────────────────────────── */
+    --flint-split-panel-divider-width:      4px;
+    --flint-split-panel-divider-hit-area:   12px;
+    --flint-split-panel-divider-color:      var(--flint-border-color);
+    --flint-split-panel-divider-hover-color: var(--flint-primary-color);
+    --flint-split-panel-min:                0;
+    --flint-split-panel-max:                100%;
+
+    /* ─── Relative Time ─────────────────────────────────────────── */
+    --flint-relative-time-color:           inherit;
+    --flint-relative-time-font-size:       inherit;
+    --flint-relative-time-font-weight:     inherit;
+    --flint-relative-time-text-decoration: none;
+    --flint-relative-time-cursor:          text;
+    --flint-relative-time-white-space:     nowrap;
+
+    /* ─── Breadcrumbs ───────────────────────────────────────────── */
+    --flint-breadcrumb-font-size:         0.875rem;
+    --flint-breadcrumb-color:             var(--flint-text-color-muted);
+    --flint-breadcrumb-color-active:      var(--flint-text-color);
+    --flint-breadcrumb-separator-margin:  8px;
+    --flint-breadcrumb-collapsed-bg:      var(--flint-hover-color);
+    --flint-breadcrumb-collapsed-hover-bg: var(--flint-active-color);
+    --flint-breadcrumb-collapsed-radius:  var(--flint-border-radius-md);
+
+    /* ─── Pagination ────────────────────────────────────────────── */
+    --flint-pagination-gap:                   4px;
+    --flint-pagination-btn-size:              36px;
+    --flint-pagination-btn-size-sm:           28px;
+    --flint-pagination-btn-size-lg:           44px;
+    --flint-pagination-btn-font-size:         0.875rem;
+    --flint-pagination-btn-font-size-sm:      0.8125rem;
+    --flint-pagination-btn-font-size-lg:      0.9375rem;
+    --flint-pagination-btn-radius:            4px;
+    --flint-pagination-btn-radius-rounded:    8px;
+    --flint-pagination-disabled-opacity:      0.38;
+    --flint-pagination-active-bg:             var(--flint-primary-color);
+    --flint-pagination-active-bg-secondary:   var(--flint-secondary-color);
+    --flint-pagination-active-bg-standard:    var(--flint-text-color);
+    --flint-pagination-active-color:          var(--flint-text-color-on-primary);
+    --flint-pagination-outlined-border:       var(--flint-border-color);
+    --flint-pagination-outlined-hover-bg:     var(--flint-primary-color-light);
+    --flint-pagination-outlined-hover-border: var(--flint-primary-color);
+    --flint-pagination-focus-ring-color:      var(--flint-primary-color);
+
+    /* ─── Box ───────────────────────────────────────────────────── */
+    --flint-box-bg:             transparent;
+    --flint-box-color:          inherit;
+    --flint-box-border-radius:  0;
+    --flint-box-border:         none;
+    --flint-box-shadow:         none;
+    --flint-box-padding:        0;
+
+    /* ─── Table ─────────────────────────────────────────────────── */
+    --flint-table-border-color:         var(--flint-border-color);
+    --flint-table-border-radius:        var(--flint-border-radius-lg);
+    --flint-table-shadow:               var(--flint-shadow-sm);
+    --flint-table-shadow-elevated:      var(--flint-shadow-md);
+    --flint-table-container-bg:         var(--flint-surface-background);
+    --flint-table-header-bg:            transparent;
+    --flint-table-header-color:         var(--flint-text-color-muted);
+    --flint-table-row-hover-bg:         var(--flint-hover-color);
+    --flint-table-row-selected-bg:      var(--flint-primary-color-light);
+    --flint-table-striped-bg:           var(--flint-surface-2);
+    --flint-table-cell-padding-y:       16px;
+    --flint-table-cell-padding-x:       16px;
+    --flint-table-cell-padding-y-dense: 6px;
+    --flint-table-cell-padding-x-dense: 16px;
+
+    /* ─── Format Number ─────────────────────────────────────────── */
+    --flint-format-number-color:          inherit;
+    --flint-format-number-font-size:      inherit;
+    --flint-format-number-font-weight:    inherit;
+    --flint-format-number-font-family:    inherit;
+    --flint-format-number-positive-color: inherit;
+    --flint-format-number-negative-color: inherit;
+
+    /* ─── Time Picker ──────────────────────────────────────────── */
+    --flint-time-field-height:         44px;
+    --flint-time-field-min-width:      160px;
+    --flint-time-clock-face-bg:        var(--flint-surface-variant);
+    --flint-time-clock-inner-bg:       rgba(0, 0, 0, 0.04);
+    --flint-time-clock-inner-border:   var(--flint-border-color);
+    --flint-time-clock-hand-color:     var(--flint-primary-color);
+    --flint-time-clock-num-size:       14px;
+    --flint-time-clock-inner-num-size: 12px;
+    --flint-time-clock-ampm-radius:    20px;
+    --flint-digital-clock-height:      300px;
+    --flint-msdc-height:               240px;
+
+    /* ─── Shadows ──────────────────────────────────────────────── */
+    --flint-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --flint-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --flint-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --flint-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+    --flint-card-shadow:       var(--flint-shadow-lg);
+    --flint-card-shadow-hover: var(--flint-shadow-xl);
+
+    /* ─── Radii ────────────────────────────────────────────────── */
+    --flint-border-radius-sm:   0.125rem;   /*  2px */
+    --flint-border-radius-md:   0.375rem;   /*  6px */
+    --flint-border-radius-lg:   0.500rem;   /*  8px */
+    --flint-border-radius-xl:   0.750rem;   /* 12px */
+    --flint-border-radius-full: 9999px;     /* pill / circle */
+
+    --flint-card-border-radius:  var(--flint-border-radius-xl);
+    --flint-input-border-radius: var(--flint-border-radius-md);
+
+    /* ─── Typography ───────────────────────────────────────────── */
+    --flint-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+
+    /* ─── Command Menu ──────────────────────────────────────────── */
+    --flint-command-bg:                 var(--flint-surface-1);
+    --flint-command-border-color:       var(--flint-border-color);
+    --flint-command-highlight-bg:       var(--flint-hover-color);
+    --flint-command-highlight-color:    var(--flint-text-color);
+    --flint-command-z-index:            1400;
+    --flint-command-list-max-height:    300px;
+    --flint-command-dialog-width:       512px;
+    --flint-command-backdrop-bg:        rgba(0, 0, 0, 0.50);
+    --flint-command-panel-border-color: var(--flint-border-color);
+
+    /* ─── Breakpoints (unitless px values, for use in JS) ──────── */
+    --flint-breakpoint-xs: 0;
+    --flint-breakpoint-sm: 600;
+    --flint-breakpoint-md: 900;
+    --flint-breakpoint-lg: 1200;
+    --flint-breakpoint-xl: 1536;
+
+    /* ─── Container max-widths ─────────────────────────────────── */
+    --flint-container-xs:  444px;
+    --flint-container-sm:  601px;
+    --flint-container-md:  901px;
+    --flint-container-lg: 1201px;
+    --flint-container-xl: 1537px;
+}
+
+
+
+body {
+    background-color: var(--flint-background);
+    color: var(--flint-text-color);
+    font-family: var(--flint-font-family);
+}
+
+
+/* ═══════════════════════════════════════════════════════════════
+   LAYER 3 — Dark mode overrides
+   Applied when <html class="flint-theme-dark"> or via @media.
+   ═══════════════════════════════════════════════════════════════ */
+
+/* Applied by JS when system pref is dark and no manual override is set */
+.flint-theme-dark {
+    /* ─── Surfaces ────────────────────────────────────────────── */
+    --flint-background:      var(--flint-color-zinc-950);
+    --flint-surface-1:       var(--flint-color-zinc-900);
+    --flint-surface-2:       var(--flint-color-zinc-800);
+    --flint-surface-3:       var(--flint-color-zinc-700);
+    --flint-surface-variant: var(--flint-color-zinc-900);
+
+    --flint-surface-background:      var(--flint-background);
+    --flint-surface-background-flat: var(--flint-surface-2);
+    --flint-card-background:         var(--flint-surface-1);
+    --flint-card-background-flat:    var(--flint-surface-2);
+    --flint-input-bg:                var(--flint-surface-1);
+    --flint-muted-background:        var(--flint-surface-3);
+
+    /* ─── Text ────────────────────────────────────────────────── */
+    --flint-text-color:        var(--flint-color-zinc-50);
+    --flint-text-color-muted:  var(--flint-color-zinc-400);
+    --flint-text-color-subtle: var(--flint-color-zinc-500);
+
+    /* ─── Borders ─────────────────────────────────────────────── */
+    --flint-border-color:             var(--flint-color-zinc-700);
+    --flint-input-border-color:       var(--flint-color-zinc-600);
+    --flint-input-border-hover-color: var(--flint-color-zinc-500);
+    --flint-card-border-color:        var(--flint-color-zinc-800);
+
+    /* ─── Interactive overlays ────────────────────────────────── */
+    --flint-hover-color:  rgba(255, 255, 255, 0.06);
+    --flint-active-color: rgba(255, 255, 255, 0.10);
+
+    /* ─── Input-specific ──────────────────────────────────────── */
+    --flint-label-color:             var(--flint-color-zinc-300);
+    --flint-input-placeholder-color: var(--flint-color-zinc-500);
+    --flint-input-disabled-bg:       var(--flint-color-zinc-800);
+    --flint-input-disabled-color:    var(--flint-color-zinc-600);
+    --flint-input-readonly-bg:       var(--flint-color-zinc-900);
+    --flint-help-text-color:         var(--flint-color-zinc-400);
+
+    /* ─── Primary ─────────────────────────────────────────────── */
+    --flint-primary-color:        var(--flint-color-blue-400);
+    --flint-primary-color-hover:  var(--flint-color-blue-500);
+    --flint-primary-color-active: var(--flint-color-blue-600);
+    --flint-primary-color-light:       rgba(96, 165, 250, 0.15);
+    --flint-primary-color-light-hover: rgba(96, 165, 250, 0.25);
+    --flint-primary-focus-ring:        rgba(96, 165, 250, 0.25);
+
+    /* ─── Semantic status ─────────────────────────────────────── */
+    --flint-info-bg:           rgba(59, 130, 246, 0.12);
+    --flint-info-border-color: rgba(59, 130, 246, 0.30);
+    --flint-info-text-color:   var(--flint-color-blue-200);
+
+    --flint-success-bg:           rgba(16, 185, 129, 0.12);
+    --flint-success-border-color: rgba(16, 185, 129, 0.30);
+    --flint-success-text-color:   var(--flint-color-emerald-400);
+
+    --flint-warning-bg:           rgba(245, 158, 11, 0.12);
+    --flint-warning-border-color: rgba(245, 158, 11, 0.30);
+    --flint-warning-text-color:   var(--flint-color-amber-400);
+
+    --flint-error-bg:           rgba(239, 68, 68, 0.12);
+    --flint-error-border-color: rgba(239, 68, 68, 0.30);
+    --flint-error-text-color:   var(--flint-color-red-400);
+
+    /* ─── Tabs ────────────────────────────────────────────────── */
+    --flint-tab-inactive-color: var(--flint-text-color-muted);
+
+    /* ─── Stepper ─────────────────────────────────────────────── */
+    --flint-stepper-connector-color: var(--flint-border-color);
+
+    /* ─── Toast (Sonner) ──────────────────────────────────────── */
+    --flint-toast-bg:     var(--flint-surface-1);
+    --flint-toast-color:  var(--flint-text-color);
+    --flint-toast-border: 1px solid var(--flint-border-color);
+
+    /* ─── Scroll Area ──────────────────────────────────────────── */
+    --flint-scrollbar-thumb-color:       rgba(255, 255, 255, 0.35);
+    --flint-scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.50);
+
+    /* ─── Image Comparer ─────────────────────────────────────── */
+    --flint-image-comparer-divider-color:      var(--flint-color-zinc-300);
+    --flint-image-comparer-handle-bg:          var(--flint-color-zinc-800);
+    --flint-image-comparer-handle-border-color: rgba(255, 255, 255, 0.20);
+    --flint-image-comparer-handle-icon-color:  var(--flint-color-zinc-300);
+
+    /* ─── Resizable ──────────────────────────────────────────── */
+    --flint-resizable-handle-bg:        var(--flint-border-color);
+    --flint-resizable-handle-hover-bg:  var(--flint-primary-color);
+    --flint-resizable-handle-focus-bg:  var(--flint-primary-color);
+    --flint-resizable-grip-bg:          var(--flint-surface-1);
+    --flint-resizable-grip-dot-color:   var(--flint-text-color-muted);
+
+    /* ─── Toggle ──────────────────────────────────────────────── */
+    --flint-toggle-bg-hover:             var(--flint-muted-background);
+    --flint-toggle-bg-pressed:           var(--flint-primary-color-light);
+    --flint-toggle-color-pressed:        var(--flint-primary-color);
+    --flint-toggle-bg-pressed-hover:     var(--flint-primary-color-light-hover);
+    --flint-toggle-border-color:         var(--flint-border-color);
+    --flint-toggle-border-pressed-color: var(--flint-primary-color-light-hover);
+
+    /* ─── Split Panel ─────────────────────────────────────────── */
+    --flint-split-panel-divider-color:       var(--flint-border-color);
+    --flint-split-panel-divider-hover-color: var(--flint-primary-color);
+
+    /* ─── Drawer ──────────────────────────────────────────────── */
+    --flint-drawer-shadow: 0 8px 10px -5px rgba(0,0,0,.4), 0 16px 24px 2px rgba(0,0,0,.3), 0 6px 30px 5px rgba(0,0,0,.25);
+
+    /* ─── Time Picker ──────────────────────────────────────────── */
+    --flint-time-clock-face-bg:      var(--flint-surface-variant);
+    --flint-time-clock-inner-bg:     rgba(255, 255, 255, 0.06);
+    --flint-time-clock-inner-border: var(--flint-color-zinc-600);
+    --flint-time-clock-hand-color:   var(--flint-primary-color);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+        animation-duration: 0.01ms \!important;
+        animation-iteration-count: 1 \!important;
+        transition-duration: 0.01ms \!important;
+    }
+}