@vadimcomanescu/nadicode-design-system 2.0.5 → 2.0.7

package/css/tokens.css

@@ -8,7 +8,7 @@
 @layer base {
 
 
-  /* Light theme (default) — Arctic Glow */
+  /* Light theme — Jade Vault */
   :root {
     color-scheme: light;
 
@@ -36,7 +36,7 @@
     --color-secondary-foreground: 24 29 32;
 
     /* Accent */
-    --color-accent: 138 94 8;
+    --color-accent: 5 150 105;
     --color-accent-foreground: 255 255 255;
 
     /* Destructive */
@@ -44,15 +44,15 @@
     --color-destructive-foreground: 255 255 255;
 
     /* Success */
-    --color-success: 26 143 78;
+    --color-success: 22 163 74;
     --color-success-foreground: 255 255 255;
 
     /* Warning */
-    --color-warning: 168 74 8;
+    --color-warning: 202 88 8;
     --color-warning-foreground: 255 255 255;
 
     /* Info */
-    --color-info: 41 112 220;
+    --color-info: 37 99 235;
     --color-info-foreground: 255 255 255;
 
     /* Overlay */
@@ -73,21 +73,23 @@
     --color-text-tertiary: 56 65 71;
 
     /* Interactive */
-    --color-focus-ring: 138 94 8;
-    --color-link: 122 82 16;
+    --color-focus-ring: 5 150 105;
+    --color-link: 4 120 84;
     --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-background: var(--color-background);
+    --sidebar-foreground: var(--color-text-secondary);
+    --sidebar-primary: var(--color-primary);
+    --sidebar-primary-foreground: var(--color-primary-foreground);
+    --sidebar-accent: var(--color-secondary);
+    --sidebar-accent-foreground: var(--color-secondary-foreground);
+    --sidebar-border: var(--color-border);
+    --sidebar-ring: var(--color-focus-ring);
+
+    /* Sidebar layout */
     --sidebar-width: 16rem;
     --sidebar-width-icon: 3rem;
 
@@ -96,16 +98,16 @@
       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;
+    --sidebar-btn-hover-shadow: inset 2px 0 0 0 rgb(5 150 105 / 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
+    --sidebar-btn-active-shadow: inset 2px 0 0 0 rgb(5 150 105), inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
+
+    /* Charts — Jade Vault (Light) */
+    --chart-1: 5 150 105;
+    --chart-2: 124 58 237;
+    --chart-3: 202 88 8;
+    --chart-4: 225 29 72;
+    --chart-5: 8 145 178;
+    --chart-6: 22 133 64;
     --chart-7: 98 48 180;
     --chart-8: 200 88 45;
 
@@ -142,106 +144,108 @@
     --border-width-thick: 4px;
   }
 
-  /* Dark theme — Arctic Glow */
+  /* Dark theme — Jade Vault */
   .dark {
     color-scheme: dark;
 
     /* Background */
-    --color-background: 16 17 20;
+    --color-background: 0 0 0;
 
     /* Surface */
-    --color-surface: 22 25 29;
-    --color-surface-hover: 32 35 40;
-    --color-surface-active: 41 45 51;
-    --color-surface-raised: 51 55 62;
+    --color-surface: 8 12 10;
+    --color-surface-hover: 16 26 21;
+    --color-surface-active: 22 32 28;
+    --color-surface-raised: 30 42 36;
 
     /* 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;
+    --color-border: 38 58 48;
+    --color-border-hover: 52 78 64;
+    --color-border-subtle: 10 158 111 / 0.08;
+    --color-border-subtle-hover: 10 158 111 / 0.15;
 
     /* Primary */
-    --color-primary: 244 244 246;
-    --color-primary-foreground: 16 17 20;
+    --color-primary: 226 232 240;
+    --color-primary-foreground: 0 0 0;
 
     /* Secondary */
-    --color-secondary: 41 45 51;
-    --color-secondary-foreground: 244 244 246;
+    --color-secondary: 22 32 28;
+    --color-secondary-foreground: 226 232 240;
 
     /* Accent */
-    --color-accent: 232 160 32;
-    --color-accent-foreground: 16 17 20;
+    --color-accent: 10 158 111;
+    --color-accent-foreground: 0 0 0;
 
     /* Destructive */
-    --color-destructive: 232 68 74;
+    --color-destructive: 220 38 38;
     --color-destructive-foreground: 255 255 255;
 
     /* Success */
-    --color-success: 52 212 116;
-    --color-success-foreground: 13 21 18;
+    --color-success: 22 163 74;
+    --color-success-foreground: 255 255 255;
 
     /* Warning */
-    --color-warning: 242 140 56;
-    --color-warning-foreground: 22 18 11;
+    --color-warning: 217 119 6;
+    --color-warning-foreground: 0 0 0;
 
     /* Info */
-    --color-info: 74 158 248;
-    --color-info-foreground: 15 21 32;
+    --color-info: 37 99 235;
+    --color-info-foreground: 255 255 255;
 
     /* Overlay */
     --color-overlay: 0 0 0;
-    --color-overlay-foreground: 244 244 246;
+    --color-overlay-foreground: 226 232 240;
 
     /* Muted */
-    --color-muted: 41 45 51;
-    --color-muted-foreground: 224 225 229;
+    --color-muted: 22 32 28;
+    --color-muted-foreground: 180 192 200;
 
     /* 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;
+    --color-text-primary: 226 232 240;
+    --color-text-secondary: 160 174 186;
+    --color-text-tertiary: 168 184 200;
 
     /* 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;
+    --color-focus-ring: 10 158 111;
+    --color-link: 52 211 153;
+    --color-input: 22 32 28;
+    --color-disabled: 52 78 64;
+    --color-disabled-foreground: 168 184 200;
 
     /* 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-background: var(--color-background);
+    --sidebar-foreground: var(--color-primary);
+    --sidebar-primary: var(--color-primary);
+    --sidebar-primary-foreground: var(--color-primary-foreground);
+    --sidebar-accent: var(--color-secondary);
+    --sidebar-accent-foreground: var(--color-secondary-foreground);
+    --sidebar-border: var(--color-border);
+    --sidebar-ring: var(--color-focus-ring);
+
+    /* Sidebar layout */
     --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 0 1px 0 0 rgba(10, 158, 111, 0.08),
       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;
+    --glass-sidebar-gradient: radial-gradient(ellipse at 15% 5%, rgba(10, 158, 111, 0.06), transparent 60%);
+    --sidebar-btn-hover-shadow: inset 2px 0 0 0 rgb(10 158 111 / 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
+    --sidebar-btn-active-shadow: inset 2px 0 0 0 rgb(10 158 111), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
+
+    /* Charts — Jade Vault (Dark) */
+    --chart-1: 10 158 111;
+    --chart-2: 124 58 237;
+    --chart-3: 217 119 6;
+    --chart-4: 225 29 72;
+    --chart-5: 8 145 178;
+    --chart-6: 52 211 153;
     --chart-7: 168 130 255;
-    --chart-8: 255 165 120;
+    --chart-8: 251 146 60;
   }
 
   /* Bloom theme — warm, light-only */
@@ -271,11 +275,11 @@
     --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) */
+    /* Accent */
     --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) */
+    /* Destructive */
     --color-destructive: 195 60 82;
     --color-destructive-foreground: 255 255 255;
 
@@ -306,7 +310,6 @@
     /* 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 */
@@ -317,14 +320,16 @@
     --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-background: var(--color-background);
+    --sidebar-foreground: var(--color-text-secondary);
+    --sidebar-primary: var(--color-primary);
+    --sidebar-primary-foreground: var(--color-primary-foreground);
+    --sidebar-accent: var(--color-secondary);
+    --sidebar-accent-foreground: var(--color-secondary-foreground);
+    --sidebar-border: var(--color-border);
+    --sidebar-ring: var(--color-focus-ring);
+
+    /* Sidebar layout */
     --sidebar-width: 16rem;
     --sidebar-width-icon: 3rem;
 
@@ -403,9 +408,10 @@
       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),
+      0 0 20px rgba(10, 158, 111, 0.04),
       inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
-      inset 0 1px 1px 0 rgba(255, 255, 255, 0.03);
+      inset 0 1px 1px 0 rgba(255, 255, 255, 0.03),
+      inset 0 0 12px rgba(255, 255, 255, 0.04);
     --glass-panel-gradient: radial-gradient(ellipse at 15% 15%, rgba(255, 255, 255, 0.06), transparent 70%);
 
     /* Floating tokens (dark defaults) */
@@ -415,49 +421,171 @@
     --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),
+      0 0 30px rgba(10, 158, 111, 0.06),
       inset 0 0 0 1px rgba(255, 255, 255, 0.08),
-      inset 0 1px 1px rgba(255, 255, 255, 0.15);
+      inset 0 1px 1px rgba(255, 255, 255, 0.15),
+      inset 0 0 16px rgba(255, 255, 255, 0.05);
 
     /* 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-overlay-shadow:
+      0 8px 32px 0 rgba(0, 0, 0, 0.4),
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
+      inset 0 0 8px rgba(255, 255, 255, 0.03);
+
+    /* Shared glass tokens (dark defaults) */
+    --glass-noise-opacity: 0.03;
+    --glass-noise-blend: overlay;
+    --glass-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --glass-edge-width: 1px;
+    --glass-edge-from: rgba(255, 255, 255, 0.15);
+    --glass-edge-to: rgba(255, 255, 255, 0.03);
   }
 
   /* ── Glass Classes (consume tokens) ────────────────────────────────── */
 
   .glass-panel {
+    position: relative;
     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));
+    border: none;
     box-shadow: var(--glass-panel-shadow);
+    text-shadow: var(--glass-text-shadow);
     contain: layout style paint;
+    will-change: transform;
+
+    /* Noise texture */
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      z-index: 0;
+      opacity: var(--glass-noise-opacity);
+      mix-blend-mode: var(--glass-noise-blend);
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+      background-repeat: repeat;
+      background-size: 128px 128px;
+    }
+
+    /* Gradient border (replaces solid 1px border) */
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      padding: var(--glass-edge-width);
+      background: linear-gradient(135deg, var(--glass-edge-from), var(--glass-edge-to));
+      -webkit-mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+      -webkit-mask-composite: destination-out;
+      mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+      mask-composite: exclude;
+      pointer-events: none;
+      z-index: 0;
+    }
   }
 
   .glass-floating {
+    position: relative;
     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));
+    border: none;
     box-shadow: var(--glass-floating-shadow);
+    text-shadow: var(--glass-text-shadow);
+    contain: layout style paint;
+    will-change: transform;
     transition: transform 150ms cubic-bezier(0.215, 0.61, 0.355, 1),
                 box-shadow 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
 
+    /* Noise texture */
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      z-index: 0;
+      opacity: var(--glass-noise-opacity);
+      mix-blend-mode: var(--glass-noise-blend);
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+      background-repeat: repeat;
+      background-size: 128px 128px;
+    }
+
+    /* Gradient border (replaces solid 1px border) */
     &::after {
       content: '';
-      @apply absolute inset-0 rounded-[inherit] pointer-events-none;
-      box-shadow: inset 0 0 10px 0 rgba(200, 220, 240, 0.04);
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      padding: var(--glass-edge-width);
+      background: linear-gradient(135deg, var(--glass-edge-from), var(--glass-edge-to));
+      -webkit-mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+      -webkit-mask-composite: destination-out;
+      mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+      mask-composite: exclude;
+      pointer-events: none;
+      z-index: 0;
     }
   }
 
   .glass-overlay {
+    position: relative;
     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));
+    border: none;
     box-shadow: var(--glass-overlay-shadow);
+    text-shadow: var(--glass-text-shadow);
+    contain: layout style paint;
+    will-change: transform;
     @apply transition-colors duration-300;
+
+    /* Noise texture */
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      z-index: 0;
+      opacity: var(--glass-noise-opacity);
+      mix-blend-mode: var(--glass-noise-blend);
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+      background-repeat: repeat;
+      background-size: 128px 128px;
+    }
+
+    /* Gradient border (replaces solid 1px border) */
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      padding: var(--glass-edge-width);
+      background: linear-gradient(135deg, var(--glass-edge-from), var(--glass-edge-to));
+      -webkit-mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+      -webkit-mask-composite: destination-out;
+      mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+      mask-composite: exclude;
+      pointer-events: none;
+      z-index: 0;
+    }
   }
 
   .surface-solid {
@@ -497,6 +625,13 @@
 
   /* ── Hover / Active / Focus States ─────────────────────────────────── */
 
+  .glass-panel {
+    transition: background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+  .glass-panel:hover {
+    background-color: rgb(var(--color-surface) / calc(var(--glass-panel-bg-opacity) + 0.04));
+  }
+
   .glass-overlay:hover {
     background-color: rgb(var(--color-background) / 0.30);
   }
@@ -506,7 +641,7 @@
     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),
+      0 0 40px rgba(10, 158, 111, 0.08),
       inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
   }
 
@@ -532,7 +667,8 @@
       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);
+      inset 0 -1px 0 0 rgba(0, 30, 60, 0.03),
+      inset 0 0 12px rgba(255, 255, 255, 0.08);
     --glass-panel-gradient: radial-gradient(ellipse at 15% 15%, rgba(255, 255, 255, 0.8), transparent 70%);
 
     --glass-floating-bg-opacity: 0.70;
@@ -541,7 +677,8 @@
       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);
+      inset 0 -1px 0 0 rgba(0, 30, 60, 0.03),
+      inset 0 0 16px rgba(255, 255, 255, 0.06);
 
     --glass-overlay-bg-opacity: 0.65;
     --glass-overlay-border-opacity: 0.50;
@@ -549,25 +686,33 @@
       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);
+      inset 0 -1px 0 0 rgba(0, 30, 60, 0.02),
+      inset 0 0 8px rgba(255, 255, 255, 0.05);
+
+    --glass-noise-opacity: 0.025;
+    --glass-noise-blend: overlay;
+    --glass-text-shadow: 0 1px 1px rgba(0, 30, 60, 0.06);
+    --glass-edge-from: rgba(255, 255, 255, 0.8);
+    --glass-edge-to: rgba(255, 255, 255, 0.2);
   }
 
   :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-panel:hover {
+    background-color: rgb(255 255 255 / calc(var(--glass-panel-bg-opacity) + 0.04));
+  }
+
   :root[class~="light"] .glass-overlay:hover {
     background-color: rgb(var(--color-surface) / 0.80);
   }
@@ -581,10 +726,6 @@
       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);
@@ -602,7 +743,8 @@
     --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);
+      inset 0 1px 0 0 rgba(255, 248, 240, 0.6),
+      inset 0 0 12px rgba(255, 248, 240, 0.06);
     --glass-panel-gradient: radial-gradient(ellipse at 15% 15%, rgba(255, 248, 240, 0.5), transparent 70%);
 
     --glass-floating-bg-opacity: 0.60;
@@ -610,28 +752,30 @@
     --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);
+      inset 0 1px 0 0 rgba(255, 248, 240, 0.5),
+      inset 0 0 16px rgba(255, 248, 240, 0.05);
 
     --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);
+      inset 0 1px 0 0 rgba(255, 248, 240, 0.4),
+      inset 0 0 8px rgba(255, 248, 240, 0.04);
+
+    --glass-noise-opacity: 0.02;
+    --glass-noise-blend: soft-light;
+    --glass-text-shadow: 0 1px 1px rgba(45, 35, 24, 0.05);
+    --glass-edge-from: rgba(255, 248, 240, 0.5);
+    --glass-edge-to: rgba(255, 248, 240, 0.1);
   }
 
   :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 {
@@ -643,10 +787,13 @@
   }
 
   :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-panel:hover {
+    background-color: rgb(var(--color-surface) / calc(var(--glass-panel-bg-opacity) + 0.04));
+  }
+
   :root.bloom .glass-overlay:hover {
     background-color: rgb(var(--color-surface) / 0.80);
   }
@@ -679,6 +826,16 @@
       backdrop-filter: none;
       background: rgb(var(--color-surface));
       border: 1px solid rgb(var(--color-border));
+      will-change: auto;
+      text-shadow: none;
+    }
+    .glass-panel::before,
+    .glass-floating::before,
+    .glass-overlay::before,
+    .glass-panel::after,
+    .glass-floating::after,
+    .glass-overlay::after {
+      display: none;
     }
     .glass-sidebar {
       background-image: none;
@@ -703,6 +860,16 @@
       background: rgb(var(--color-surface));
       border: 2px solid rgb(var(--color-border));
       box-shadow: none;
+      will-change: auto;
+      text-shadow: none;
+    }
+    .glass-panel::before,
+    .glass-floating::before,
+    .glass-overlay::before,
+    .glass-panel::after,
+    .glass-floating::after,
+    .glass-overlay::after {
+      display: none;
     }
     .glass-sidebar {
       background-image: none;
@@ -834,6 +1001,17 @@
     .glass-floating,
     .glass-overlay {
       background-image: none;
+      border: 1px solid rgb(var(--color-border));
+      will-change: auto;
+      text-shadow: none;
+    }
+    .glass-panel::before,
+    .glass-floating::before,
+    .glass-overlay::before,
+    .glass-panel::after,
+    .glass-floating::after,
+    .glass-overlay::after {
+      display: none;
     }
     .glass-panel { background: rgb(var(--color-surface) / 0.92); }
     .glass-floating { background: rgb(var(--color-surface) / 0.95); }