@vadimcomanescu/nadicode-design-system 2.0.0

package/css/tokens.css

@@ -0,0 +1,981 @@
+/* @vadimcomanescu/nadicode-design-system tokens — auto-generated from src/index.css */
+/* Do not edit directly. Run: npm run build:lib */
+
+@source "../src";
+@custom-variant dark (&:is(.dark *));
+
+
+@layer base {
+
+
+  /* Light theme (default) — Arctic Glow */
+  :root {
+    color-scheme: light;
+
+    /* Background */
+    --color-background: 247 247 248;
+
+    /* Surface */
+    --color-surface: 236 237 238;
+    --color-surface-hover: 222 225 227;
+    --color-surface-active: 205 210 213;
+    --color-surface-raised: 236 237 238;
+
+    /* Border */
+    --color-border: 154 165 172;
+    --color-border-hover: 123 137 147;
+    --color-border-subtle: 0 30 60 / 0.07;
+    --color-border-subtle-hover: 0 30 60 / 0.15;
+
+    /* Primary */
+    --color-primary: 24 29 32;
+    --color-primary-foreground: 247 247 248;
+
+    /* Secondary */
+    --color-secondary: 222 225 227;
+    --color-secondary-foreground: 24 29 32;
+
+    /* Accent */
+    --color-accent: 138 94 8;
+    --color-accent-foreground: 255 255 255;
+
+    /* Destructive */
+    --color-destructive: 198 40 50;
+    --color-destructive-foreground: 255 255 255;
+
+    /* Success */
+    --color-success: 26 143 78;
+    --color-success-foreground: 255 255 255;
+
+    /* Warning */
+    --color-warning: 168 74 8;
+    --color-warning-foreground: 255 255 255;
+
+    /* Info */
+    --color-info: 41 112 220;
+    --color-info-foreground: 255 255 255;
+
+    /* Overlay */
+    --color-overlay: 0 0 0;
+    --color-overlay-foreground: 247 247 248;
+
+    /* Muted */
+    --color-muted: 222 225 227;
+    --color-muted-foreground: 38 45 49;
+
+    /* Slider */
+    --color-slider-fill: 0 0 0 / 0.25;
+    --color-slider-handle: 255 255 255;
+
+    /* Text */
+    --color-text-primary: 24 29 32;
+    --color-text-secondary: 38 45 49;
+    --color-text-tertiary: 56 65 71;
+
+    /* Interactive */
+    --color-focus-ring: 138 94 8;
+    --color-link: 122 82 16;
+    --color-input: 222 225 227;
+    --color-disabled: 154 165 172;
+    --color-disabled-foreground: 95 109 119;
+
+    /* Sidebar */
+    --sidebar-background: 247 247 248;
+    --sidebar-foreground: 38 45 49;
+    --sidebar-primary: 24 29 32;
+    --sidebar-primary-foreground: 247 247 248;
+    --sidebar-accent: 222 225 227;
+    --sidebar-accent-foreground: 24 29 32;
+    --sidebar-border: 154 165 172;
+    --sidebar-ring: 138 94 8;
+    --sidebar-width: 16rem;
+    --sidebar-width-icon: 3rem;
+
+    /* Sidebar glass (decorative, no blur) */
+    --glass-sidebar-shadow:
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.7),
+      inset -1px 0 0 0 rgba(0, 30, 60, 0.04);
+    --glass-sidebar-gradient: radial-gradient(ellipse at 15% 5%, rgba(255, 255, 255, 0.6), transparent 60%);
+    --sidebar-btn-hover-shadow: inset 2px 0 0 0 rgb(138 94 8 / 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
+    --sidebar-btn-active-shadow: inset 2px 0 0 0 rgb(138 94 8), inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
+
+    /* Charts — Arctic Glow (Light) */
+    --chart-1: 138 94 8;
+    --chart-2: 41 112 220;
+    --chart-3: 26 143 78;
+    --chart-4: 124 58 237;
+    --chart-5: 198 40 50;
+    --chart-6: 13 148 136;
+    --chart-7: 98 48 180;
+    --chart-8: 200 88 45;
+
+    /* Spacing scale (theme-independent) */
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 16px;
+    --spacing-lg: 24px;
+    --spacing-xl: 32px;
+    --spacing-2xl: 48px;
+    --spacing-3xl: 64px;
+
+    /* Line height scale */
+    --leading-none: 1;
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
+    --leading-normal: 1.5;
+    --leading-relaxed: 1.625;
+    --leading-loose: 2;
+
+    /* Letter spacing scale */
+    --tracking-tighter: -0.05em;
+    --tracking-tight: -0.025em;
+    --tracking-normal: 0em;
+    --tracking-wide: 0.025em;
+    --tracking-wider: 0.05em;
+    --tracking-widest: 0.1em;
+
+    /* Border width scale */
+    --border-width-none: 0px;
+    --border-width-hairline: 0.5px;
+    --border-width-thin: 1px;
+    --border-width-base: 2px;
+    --border-width-thick: 4px;
+  }
+
+  /* Dark theme — Arctic Glow */
+  .dark {
+    color-scheme: dark;
+
+    /* Background */
+    --color-background: 16 17 20;
+
+    /* Surface */
+    --color-surface: 22 25 29;
+    --color-surface-hover: 32 35 40;
+    --color-surface-active: 41 45 51;
+    --color-surface-raised: 51 55 62;
+
+    /* Border */
+    --color-border: 69 73 79;
+    --color-border-hover: 91 94 97;
+    --color-border-subtle: 200 220 240 / 0.06;
+    --color-border-subtle-hover: 200 220 240 / 0.12;
+
+    /* Primary */
+    --color-primary: 244 244 246;
+    --color-primary-foreground: 16 17 20;
+
+    /* Secondary */
+    --color-secondary: 41 45 51;
+    --color-secondary-foreground: 244 244 246;
+
+    /* Accent */
+    --color-accent: 232 160 32;
+    --color-accent-foreground: 16 17 20;
+
+    /* Destructive */
+    --color-destructive: 232 68 74;
+    --color-destructive-foreground: 255 255 255;
+
+    /* Success */
+    --color-success: 52 212 116;
+    --color-success-foreground: 13 21 18;
+
+    /* Warning */
+    --color-warning: 242 140 56;
+    --color-warning-foreground: 22 18 11;
+
+    /* Info */
+    --color-info: 74 158 248;
+    --color-info-foreground: 15 21 32;
+
+    /* Overlay */
+    --color-overlay: 0 0 0;
+    --color-overlay-foreground: 244 244 246;
+
+    /* Muted */
+    --color-muted: 41 45 51;
+    --color-muted-foreground: 224 225 229;
+
+    /* Slider */
+    --color-slider-fill: 255 255 255 / 0.10;
+    --color-slider-handle: 255 255 255;
+
+    /* Text */
+    --color-text-primary: 244 244 246;
+    --color-text-secondary: 224 225 229;
+    --color-text-tertiary: 196 198 204;
+
+    /* Interactive */
+    --color-focus-ring: 232 160 32;
+    --color-link: 245 201 106;
+    --color-input: 41 45 51;
+    --color-disabled: 91 94 97;
+    --color-disabled-foreground: 196 198 204;
+
+    /* Sidebar */
+    --sidebar-background: 16 17 20;
+    --sidebar-foreground: 244 244 246;
+    --sidebar-primary: 244 244 246;
+    --sidebar-primary-foreground: 16 17 20;
+    --sidebar-accent: 41 45 51;
+    --sidebar-accent-foreground: 244 244 246;
+    --sidebar-border: 69 73 79;
+    --sidebar-ring: 232 160 32;
+    --sidebar-width: 16rem;
+    --sidebar-width-icon: 3rem;
+
+    /* Sidebar glass (decorative, no blur) */
+    --glass-sidebar-shadow:
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
+      inset -1px 0 0 0 rgba(255, 255, 255, 0.03);
+    --glass-sidebar-gradient: radial-gradient(ellipse at 15% 5%, rgba(255, 255, 255, 0.04), transparent 60%);
+    --sidebar-btn-hover-shadow: inset 2px 0 0 0 rgb(232 160 32 / 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
+    --sidebar-btn-active-shadow: inset 2px 0 0 0 rgb(232 160 32), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
+
+    /* Charts — Arctic Glow (Dark) */
+    --chart-1: 232 160 32;
+    --chart-2: 74 158 248;
+    --chart-3: 52 212 116;
+    --chart-4: 155 107 245;
+    --chart-5: 232 68 74;
+    --chart-6: 45 212 191;
+    --chart-7: 168 130 255;
+    --chart-8: 255 165 120;
+  }
+
+  /* Bloom theme — warm, light-only */
+  .bloom {
+    color-scheme: light;
+
+    /* Background */
+    --color-background: 254 253 251;
+
+    /* Surface */
+    --color-surface: 245 241 236;
+    --color-surface-hover: 237 232 225;
+    --color-surface-active: 228 222 213;
+    --color-surface-raised: 245 241 236;
+
+    /* Border */
+    --color-border: 217 209 199;
+    --color-border-hover: 196 185 172;
+    --color-border-subtle: 45 35 24 / 0.07;
+    --color-border-subtle-hover: 45 35 24 / 0.15;
+
+    /* Primary */
+    --color-primary: 45 35 24;
+    --color-primary-foreground: 254 253 251;
+
+    /* Secondary */
+    --color-secondary: 245 241 236;
+    --color-secondary-foreground: 45 35 24;
+
+    /* Accent – darkened from 232 87 58 for WCAG AA (5.03:1 vs bg, 5.11:1 vs white) */
+    --color-accent: 195 65 42;
+    --color-accent-foreground: 255 255 255;
+
+    /* Destructive – darkened from 232 86 109 for WCAG AA (5.05:1 vs bg, 5.14:1 vs white) */
+    --color-destructive: 195 60 82;
+    --color-destructive-foreground: 255 255 255;
+
+    /* Success */
+    --color-success: 61 214 160;
+    --color-success-foreground: 10 79 57;
+
+    /* Warning */
+    --color-warning: 245 166 35;
+    --color-warning-foreground: 92 60 8;
+
+    /* Info */
+    --color-info: 90 180 245;
+    --color-info-foreground: 20 65 112;
+
+    /* Overlay */
+    --color-overlay: 45 35 24;
+    --color-overlay-foreground: 254 253 251;
+
+    /* Muted */
+    --color-muted: 245 241 236;
+    --color-muted-foreground: 87 73 56;
+
+    /* Slider */
+    --color-slider-fill: 45 35 24 / 0.20;
+    --color-slider-handle: 254 253 251;
+
+    /* Text */
+    --color-text-primary: 45 35 24;
+    --color-text-secondary: 87 73 56;
+    /* Tertiary – darkened from 136 121 104 for WCAG AA (5.62:1 vs bg) */
+    --color-text-tertiary: 115 100 83;
+
+    /* Interactive */
+    --color-focus-ring: 139 92 246;
+    --color-link: 99 56 196;
+    --color-input: 245 241 236;
+    --color-disabled: 217 209 199;
+    --color-disabled-foreground: 168 155 140;
+
+    /* Sidebar */
+    --sidebar-background: 254 253 251;
+    --sidebar-foreground: 87 73 56;
+    --sidebar-primary: 45 35 24;
+    --sidebar-primary-foreground: 254 253 251;
+    --sidebar-accent: 245 241 236;
+    --sidebar-accent-foreground: 45 35 24;
+    --sidebar-border: 217 209 199;
+    --sidebar-ring: 139 92 246;
+    --sidebar-width: 16rem;
+    --sidebar-width-icon: 3rem;
+
+    /* Sidebar glass (decorative, no blur) */
+    --glass-sidebar-shadow:
+      inset 0 1px 0 0 rgba(255, 248, 240, 0.4),
+      inset -1px 0 0 0 rgba(45, 35, 24, 0.03);
+    --glass-sidebar-gradient: radial-gradient(ellipse at 15% 5%, rgba(255, 248, 240, 0.35), transparent 60%);
+    --sidebar-btn-hover-shadow: inset 2px 0 0 0 rgb(195 65 42 / 0.4), inset 0 1px 0 0 rgba(255, 248, 240, 0.3);
+    --sidebar-btn-active-shadow: inset 2px 0 0 0 rgb(195 65 42), inset 0 1px 0 0 rgba(255, 248, 240, 0.4);
+
+    /* Charts — Bloom */
+    --chart-1: 195 65 42;
+    --chart-2: 139 92 246;
+    --chart-3: 245 166 35;
+    --chart-4: 61 214 160;
+    --chart-5: 90 180 245;
+    --chart-6: 195 60 82;
+    --chart-7: 180 140 60;
+    --chart-8: 80 160 200;
+
+    /* Style-specific: radius */
+    --radius-sm: 8px;
+    --radius-md: 14px;
+    --radius-lg: 24px;
+  }
+
+  body {
+    @apply bg-background text-text-primary antialiased min-h-dvh transition-colors duration-300;
+    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+
+  ::selection {
+    background-color: rgb(var(--color-primary) / 0.15);
+    color: rgb(var(--color-text-primary));
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-semibold tracking-tight;
+  }
+
+  /* ── Glass Sidebar (decorative glass without blur) ──────────────────── */
+
+  .glass-sidebar {
+    background-image: var(--glass-sidebar-gradient);
+    box-shadow: var(--glass-sidebar-shadow);
+  }
+
+  /* Collapsed-mode pip for status slot in sidebar (offsets tuned for StatusDot size="sm" / 8px) */
+  [data-collapsible="icon"] [data-sidebar="menu-button"] [data-slot="status"] {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    margin-left: 0;
+  }
+}
+
+@layer utilities {
+  /* ── Glass Token Custom Properties ─────────────────────────────────── */
+  :root {
+    /* Vibrancy boost (per-theme) */
+    --glass-saturate: 1.15;
+    --glass-brightness: 1.03;
+
+    /* Panel tokens (dark defaults) */
+    --glass-panel-blur: 20px;
+    --glass-panel-bg-opacity: 0.30;
+    --glass-panel-border-opacity: 0.10;
+    --glass-panel-shadow:
+      0 4px 6px -1px rgba(0, 0, 0, 0.5),
+      0 10px 15px -3px rgba(0, 0, 0, 0.35),
+      0 20px 25px -5px rgba(0, 0, 0, 0.2),
+      0 0 20px rgba(232, 160, 32, 0.04),
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
+      inset 0 1px 1px 0 rgba(255, 255, 255, 0.03);
+    --glass-panel-gradient: radial-gradient(ellipse at 15% 15%, rgba(255, 255, 255, 0.06), transparent 70%);
+
+    /* Floating tokens (dark defaults) */
+    --glass-floating-blur: 28px;
+    --glass-floating-bg-opacity: 0.40;
+    --glass-floating-border-opacity: 0.20;
+    --glass-floating-shadow:
+      0 10px 20px rgba(0, 0, 0, 0.5),
+      0 30px 60px rgba(0, 0, 0, 0.35),
+      0 0 30px rgba(232, 160, 32, 0.06),
+      inset 0 0 0 1px rgba(255, 255, 255, 0.08),
+      inset 0 1px 1px rgba(255, 255, 255, 0.15);
+
+    /* Overlay tokens (dark defaults) */
+    --glass-overlay-blur: 12px;
+    --glass-overlay-bg-opacity: 0.30;
+    --glass-overlay-border-opacity: 0.10;
+    --glass-overlay-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
+  }
+
+  /* ── Glass Classes (consume tokens) ────────────────────────────────── */
+
+  .glass-panel {
+    backdrop-filter: blur(var(--glass-panel-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
+    background-color: rgb(var(--color-surface) / var(--glass-panel-bg-opacity));
+    background-image: var(--glass-panel-gradient);
+    border: 1px solid rgb(255 255 255 / var(--glass-panel-border-opacity));
+    box-shadow: var(--glass-panel-shadow);
+    contain: layout style paint;
+  }
+
+  .glass-floating {
+    backdrop-filter: blur(var(--glass-floating-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
+    background-color: rgb(var(--color-surface) / var(--glass-floating-bg-opacity));
+    border: 1px solid rgb(255 255 255 / var(--glass-floating-border-opacity));
+    box-shadow: var(--glass-floating-shadow);
+    transition: transform 150ms cubic-bezier(0.215, 0.61, 0.355, 1),
+                box-shadow 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
+
+    &::after {
+      content: '';
+      @apply absolute inset-0 rounded-[inherit] pointer-events-none;
+      box-shadow: inset 0 0 10px 0 rgba(200, 220, 240, 0.04);
+    }
+  }
+
+  .glass-overlay {
+    backdrop-filter: blur(var(--glass-overlay-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
+    background-color: rgb(var(--color-surface) / var(--glass-overlay-bg-opacity));
+    border: 1px solid rgb(255 255 255 / var(--glass-overlay-border-opacity));
+    box-shadow: var(--glass-overlay-shadow);
+    @apply transition-colors duration-300;
+  }
+
+  .surface-solid {
+    background-color: rgb(var(--color-surface));
+    border: 1px solid rgb(var(--color-border) / 0.50);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+  }
+
+  /* ── Dashboard Metric Typography ─────────────────────────────────── */
+
+  .metric-value {
+    font-feature-settings: 'tnum';
+    font-variant-numeric: tabular-nums;
+  }
+  .dark .metric-value {
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 -1px 0 rgba(0, 0, 0, 0.4);
+  }
+
+  /* ── Dashboard Card Hover Glow ───────────────────────────────────── */
+
+  .glass-panel-glow-hover {
+    transition: box-shadow 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+  .dark .glass-panel-glow-hover:hover {
+    box-shadow: 0 0 30px -8px rgb(var(--color-accent) / 0.15);
+  }
+  .light .glass-panel-glow-hover:hover,
+  :root .glass-panel-glow-hover:hover {
+    box-shadow: 0 0 20px -6px rgb(var(--color-accent) / 0.08);
+  }
+
+  /* ── Chart Area Ambient Glow ─────────────────────────────────────── */
+
+  .dark .chart-glow-bg {
+    background-image: radial-gradient(ellipse at 50% 100%, rgb(var(--color-accent) / 0.03), transparent 70%);
+  }
+
+  /* ── Hover / Active / Focus States ─────────────────────────────────── */
+
+  .glass-overlay:hover {
+    background-color: rgb(var(--color-background) / 0.30);
+  }
+
+  .glass-floating:hover {
+    transform: translateY(-4px) scale(1.005);
+    box-shadow:
+      0 30px 60px -12px rgba(0, 0, 0, 0.8),
+      0 0 0 1px rgba(255, 255, 255, 0.15),
+      0 0 40px rgba(232, 160, 32, 0.08),
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
+  }
+
+  .glass-floating:active {
+    transform: translateY(0) scale(0.998);
+    transition: transform 50ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  .glass-panel:focus-visible,
+  .glass-floating:focus-visible,
+  .glass-overlay:focus-visible {
+    outline: 2px solid rgb(var(--color-accent));
+    outline-offset: 2px;
+  }
+
+  /* ── Light Mode Overrides ──────────────────────────────────────────── */
+
+  :root[class~="light"] {
+    --glass-panel-bg-opacity: 0.60;
+    --glass-panel-border-opacity: 0.80;
+    --glass-panel-shadow:
+      0 1px 2px rgba(0, 30, 60, 0.06),
+      0 4px 12px rgba(0, 30, 60, 0.08),
+      0 8px 24px rgba(0, 30, 60, 0.04),
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.9),
+      inset 0 -1px 0 0 rgba(0, 30, 60, 0.03);
+    --glass-panel-gradient: radial-gradient(ellipse at 15% 15%, rgba(255, 255, 255, 0.8), transparent 70%);
+
+    --glass-floating-bg-opacity: 0.70;
+    --glass-floating-border-opacity: 0.60;
+    --glass-floating-shadow:
+      0 8px 20px rgba(0, 30, 60, 0.1),
+      0 20px 40px rgba(0, 30, 60, 0.06),
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.9),
+      inset 0 -1px 0 0 rgba(0, 30, 60, 0.03);
+
+    --glass-overlay-bg-opacity: 0.65;
+    --glass-overlay-border-opacity: 0.50;
+    --glass-overlay-shadow:
+      0 4px 20px -2px rgba(0, 30, 60, 0.08),
+      0 8px 32px rgba(0, 30, 60, 0.04),
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.8),
+      inset 0 -1px 0 0 rgba(0, 30, 60, 0.02);
+  }
+
+  :root[class~="light"] .glass-panel {
+    border-color: rgb(var(--color-border) / 0.80);
+    background-color: rgb(255 255 255 / var(--glass-panel-bg-opacity));
+    background-image: var(--glass-panel-gradient);
+  }
+
+  :root[class~="light"] .glass-floating {
+    border-color: rgb(var(--color-border) / 0.60);
+    background-color: rgb(255 255 255 / var(--glass-floating-bg-opacity));
+  }
+
+  :root[class~="light"] .glass-overlay {
+    border-color: rgb(var(--color-border) / 0.50);
+    background-color: rgb(255 255 255 / var(--glass-overlay-bg-opacity));
+  }
+
+  :root[class~="light"] .glass-overlay:hover {
+    background-color: rgb(var(--color-surface) / 0.80);
+  }
+
+  :root[class~="light"] .glass-floating:hover {
+    transform: translateY(-4px) scale(1.005);
+    box-shadow:
+      0 12px 30px rgba(0, 30, 60, 0.12),
+      0 25px 50px rgba(0, 30, 60, 0.08),
+      inset 0 1px 0 0 rgba(255, 255, 255, 1),
+      inset 0 -1px 0 0 rgba(0, 30, 60, 0.04);
+  }
+
+  :root[class~="light"] .glass-floating::after {
+    box-shadow: inset 0 0 12px 0 rgba(200, 220, 240, 0.08);
+  }
+
+  :root[class~="light"] .surface-solid {
+    background-color: #fff;
+    border-color: rgb(var(--color-border) / 0.80);
+    box-shadow: 0 1px 3px rgba(0, 30, 60, 0.06), 0 1px 2px rgba(0, 30, 60, 0.04);
+  }
+
+  /* ── Bloom Overrides ───────────────────────────────────────────────── */
+
+  :root.bloom {
+    --glass-saturate: 1.08;
+    --glass-brightness: 1.01;
+
+    --glass-panel-bg-opacity: 0.70;
+    --glass-panel-border-opacity: 0.30;
+    --glass-panel-shadow:
+      0 4px 12px rgba(45, 35, 24, 0.06),
+      0 8px 24px rgba(45, 35, 24, 0.04),
+      inset 0 1px 0 0 rgba(255, 248, 240, 0.6);
+    --glass-panel-gradient: radial-gradient(ellipse at 15% 15%, rgba(255, 248, 240, 0.5), transparent 70%);
+
+    --glass-floating-bg-opacity: 0.60;
+    --glass-floating-border-opacity: 0.20;
+    --glass-floating-shadow:
+      0 10px 25px rgba(45, 35, 24, 0.08),
+      0 20px 40px rgba(45, 35, 24, 0.06),
+      inset 0 1px 0 0 rgba(255, 248, 240, 0.5);
+
+    --glass-overlay-bg-opacity: 0.60;
+    --glass-overlay-border-opacity: 0.30;
+    --glass-overlay-shadow:
+      0 4px 20px -2px rgba(45, 35, 24, 0.08),
+      inset 0 1px 0 0 rgba(255, 248, 240, 0.4);
+  }
+
+  :root.bloom .glass-panel {
+    border-color: rgb(var(--color-border) / 0.30);
+    background-color: rgb(var(--color-surface) / var(--glass-panel-bg-opacity));
+    background-image: var(--glass-panel-gradient);
+  }
+
+  :root.bloom .glass-floating {
+    border-color: rgb(var(--color-border) / 0.20);
+    background-color: rgb(var(--color-surface) / var(--glass-floating-bg-opacity));
+
+    &::after {
+      box-shadow: inset 0 0 10px 0 rgba(195, 65, 42, 0.03);
+    }
+  }
+
+  :root.bloom .glass-floating:hover {
+    transform: translateY(-6px) scale(1.01) rotate(0.3deg);
+    box-shadow:
+      0 15px 35px rgba(45, 35, 24, 0.1),
+      0 25px 50px rgba(45, 35, 24, 0.07),
+      inset 0 1px 0 0 rgba(255, 248, 240, 0.6);
+  }
+
+  :root.bloom .glass-overlay {
+    border-color: rgb(var(--color-border) / 0.30);
+    background-color: rgb(var(--color-surface) / var(--glass-overlay-bg-opacity));
+  }
+
+  :root.bloom .glass-overlay:hover {
+    background-color: rgb(var(--color-surface) / 0.80);
+  }
+
+  :root.bloom .surface-solid {
+    background-color: rgb(var(--color-surface));
+    border-color: rgb(var(--color-border) / 0.30);
+    box-shadow: 0 1px 3px rgba(45, 35, 24, 0.06), 0 1px 2px rgba(45, 35, 24, 0.04);
+  }
+
+  /* ── Mobile Blur Reduction ─────────────────────────────────────────── */
+
+  @media (hover: none) and (max-width: 1024px) {
+    :root {
+      --glass-panel-blur: 12px;
+      --glass-floating-blur: 16px;
+      --glass-overlay-blur: 8px;
+      --glass-tab-blur: 4px;
+    }
+  }
+
+  /* ── Accessibility: Reduced Transparency ───────────────────────────── */
+
+  @media (prefers-reduced-transparency: reduce) {
+    .glass-panel,
+    .glass-floating,
+    .glass-overlay,
+    .glass-floating:hover,
+    .glass-overlay:hover {
+      backdrop-filter: none;
+      background: rgb(var(--color-surface));
+      border: 1px solid rgb(var(--color-border));
+    }
+    .glass-sidebar {
+      background-image: none;
+      box-shadow: none;
+    }
+    .glass-tab-bar {
+      backdrop-filter: none;
+      background: rgb(var(--color-surface));
+      border: 1px solid rgb(var(--color-border));
+    }
+  }
+
+  /* ── Accessibility: High Contrast ──────────────────────────────────── */
+
+  @media (prefers-contrast: more) {
+    .glass-panel,
+    .glass-floating,
+    .glass-overlay,
+    .glass-floating:hover,
+    .glass-overlay:hover {
+      backdrop-filter: none;
+      background: rgb(var(--color-surface));
+      border: 2px solid rgb(var(--color-border));
+      box-shadow: none;
+    }
+    .glass-sidebar {
+      background-image: none;
+      box-shadow: none;
+    }
+    .glass-tab-bar {
+      backdrop-filter: none;
+      background: rgb(var(--color-surface));
+      border: 2px solid rgb(var(--color-border));
+      box-shadow: none;
+    }
+    .glass-tab-active {
+      box-shadow: 0 0 0 2px rgb(var(--color-border));
+    }
+    .pagination-active {
+      box-shadow: 0 0 0 2px rgb(var(--color-accent));
+    }
+
+    .dark {
+      --color-text-primary: 255 255 255;
+      --color-text-secondary: 240 240 242;
+      --color-text-tertiary: 210 212 218;
+      --color-muted-foreground: 240 240 242;
+      --color-disabled-foreground: 210 212 218;
+      --color-border: 100 105 112;
+      --color-border-hover: 140 145 150;
+    }
+  }
+
+  /* ── Accessibility: Reduced Motion ─────────────────────────────────── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .glass-floating:hover {
+      transform: none;
+    }
+    .bloom .glass-floating:hover {
+      transform: none;
+    }
+  }
+
+  /* ── Glass Tab Bar (recessed trough for tab lists) ─────────────────── */
+
+  :root {
+    --glass-tab-blur: 8px;
+    --glass-tab-bg-opacity: 0.40;
+    --glass-tab-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
+  }
+
+  .glass-tab-bar {
+    backdrop-filter: blur(var(--glass-tab-blur)) saturate(var(--glass-saturate));
+    background-color: rgb(var(--color-surface) / var(--glass-tab-bg-opacity));
+    border: 1px solid rgb(255 255 255 / 0.08);
+    box-shadow: var(--glass-tab-shadow);
+  }
+
+  :root[class~="light"] {
+    --glass-tab-bg-opacity: 0.50;
+    --glass-tab-shadow: inset 0 1px 2px rgba(0, 30, 60, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.5);
+  }
+
+  :root[class~="light"] .glass-tab-bar {
+    border-color: rgb(var(--color-border) / 0.40);
+    background-color: rgb(255 255 255 / var(--glass-tab-bg-opacity));
+  }
+
+  :root.bloom {
+    --glass-tab-bg-opacity: 0.55;
+    --glass-tab-shadow: inset 0 1px 2px rgba(45, 35, 24, 0.06), inset 0 -1px 0 rgba(255, 248, 240, 0.3);
+  }
+
+  :root.bloom .glass-tab-bar {
+    border-color: rgb(var(--color-border) / 0.20);
+    background-color: rgb(var(--color-surface) / var(--glass-tab-bg-opacity));
+  }
+
+  /* ── Glass Tab Active (raised embossed pill) ──────────────────────── */
+
+  .glass-tab-active {
+    background-color: rgb(var(--color-surface));
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  }
+
+  :root[class~="light"] .glass-tab-active {
+    box-shadow: 0 1px 3px rgba(0, 30, 60, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
+    background-color: rgb(var(--color-surface));
+  }
+
+  :root.bloom .glass-tab-active {
+    box-shadow: 0 1px 3px rgba(45, 35, 24, 0.06), inset 0 1px 0 rgba(255, 248, 240, 0.5);
+  }
+
+  /* ── Pagination Active (accent glow pill) ─────────────────────────── */
+
+  .pagination-active {
+    background-color: rgb(var(--color-accent) / 0.10);
+    color: rgb(var(--color-accent));
+    font-weight: 600;
+    box-shadow: 0 0 0 1px rgb(var(--color-accent) / 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  }
+
+  :root[class~="light"] .pagination-active {
+    box-shadow: 0 0 0 1px rgb(var(--color-accent) / 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  }
+
+  :root.bloom .pagination-active {
+    box-shadow: 0 0 0 1px rgb(var(--color-accent) / 0.30), inset 0 1px 0 rgba(255, 248, 240, 0.4);
+  }
+
+  /* ── Touch Target Expansion ──────────────────────────────────────── */
+
+  .touch-target-44 {
+    position: relative;
+  }
+  .touch-target-44::before {
+    content: '';
+    position: absolute;
+    inset: 50% auto auto 50%;
+    transform: translate(-50%, -50%);
+    min-width: 44px;
+    min-height: 44px;
+    width: 100%;
+    height: 100%;
+  }
+
+  /* ── Fallback: No backdrop-filter Support ──────────────────────────── */
+
+  @supports not (backdrop-filter: blur(1px)) {
+    .glass-panel,
+    .glass-floating,
+    .glass-overlay {
+      background-image: none;
+    }
+    .glass-panel { background: rgb(var(--color-surface) / 0.92); }
+    .glass-floating { background: rgb(var(--color-surface) / 0.95); }
+    .glass-overlay { background: rgb(var(--color-surface) / 0.90); }
+    .glass-tab-bar { background: rgb(var(--color-surface) / 0.85); }
+  }
+}
+
+/* Ultrarealistic Scrollbar */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-background;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-border rounded-full border-[2px] border-background;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  @apply bg-text-tertiary;
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+}
+
+@keyframes shimmer-color {
+  0%, 100% { color: var(--shimmer-base); }
+  50% { color: var(--shimmer-color); }
+}
+
+.shimmer-char {
+  animation: shimmer-color ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-4px); }
+}
+
+@keyframes animStar {
+  from {
+    transform: translateY(0px);
+  }
+
+  to {
+    transform: translateY(-2000px);
+  }
+}
+
+/* Agent Avatar animations */
+@keyframes agent-breathe {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.02); }
+}
+
+@keyframes agent-speaking-ring {
+  0% { box-shadow: 0 0 0 0 rgb(var(--color-primary) / 0.3); }
+  50% { box-shadow: 0 0 0 8px rgb(var(--color-primary) / 0); }
+  100% { box-shadow: 0 0 0 0 rgb(var(--color-primary) / 0); }
+}
+
+@keyframes agent-listening-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--color-primary) / 0.3); }
+  50% { box-shadow: 0 0 0 4px rgb(var(--color-primary) / 0); }
+}
+
+.agent-avatar-breathe {
+  animation: agent-breathe 4s ease-in-out infinite;
+}
+
+.agent-avatar-speaking {
+  animation: agent-speaking-ring 1.5s ease-in-out infinite;
+  border-radius: 9999px;
+}
+
+.agent-avatar-listening {
+  animation: agent-listening-pulse 2s ease-in-out infinite;
+  border-radius: 9999px;
+}
+
+/* Avatar3D animations */
+@keyframes avatar-3d-glow {
+  0%, 100% { opacity: 0.3; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(1.05); }
+}
+
+@keyframes avatar-3d-speaking-ring {
+  0% { box-shadow: 0 0 0 0 rgb(var(--color-accent) / 0.3), 0 0 15px rgb(var(--color-accent) / 0.1); }
+  50% { box-shadow: 0 0 0 10px rgb(var(--color-accent) / 0), 0 0 25px 5px rgb(var(--color-accent) / 0.05); }
+  100% { box-shadow: 0 0 0 0 rgb(var(--color-accent) / 0), 0 0 15px rgb(var(--color-accent) / 0); }
+}
+
+@keyframes avatar-3d-listening-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--color-primary) / 0.2); }
+  50% { box-shadow: 0 0 0 6px rgb(var(--color-primary) / 0); }
+}
+
+.avatar-3d-glow {
+  animation: avatar-3d-glow 4s ease-in-out infinite;
+}
+
+.avatar-3d-speaking {
+  animation: avatar-3d-speaking-ring 1.5s ease-in-out infinite;
+  border-radius: 9999px;
+}
+
+.avatar-3d-listening {
+  animation: avatar-3d-listening-pulse 2s ease-in-out infinite;
+  border-radius: 9999px;
+}
+
+/* Generic animated icon draw effect (used by createAnimatedIcon wrapper) */
+.icon-draw-active svg path,
+.icon-draw-active svg line,
+.icon-draw-active svg circle,
+.icon-draw-active svg polyline,
+.icon-draw-active svg rect {
+  stroke-dasharray: 200;
+  stroke-dashoffset: 200;
+  animation: icon-stroke-draw 0.4s ease forwards;
+}
+
+@keyframes icon-stroke-draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+/* Accessibility: respect reduced motion preference */
+@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;
+  }
+}