organify-ui 0.2.0 → 0.2.2

package/src/globals.css

@@ -1,7 +1,7 @@
 /**
  * organify-ui — Global CSS
  *
- * Human-Glass Design System
+ * Organic Design System — 3 Themes: Dark, Cream, Fluid
  * Import in consuming app: import 'organify-ui/globals.css';
  */
 
@@ -9,25 +9,21 @@
 
 /*
  * Tell Tailwind v4 to scan our component sources & dist output.
- * Tailwind v4 skips node_modules/ by default, so without these
- * directives the utility classes used in our components (bg-primary,
- * bg-error, text-success-light, etc.) are never detected and never
- * generated. Any app that @imports this file gets them automatically.
  */
 @source "./components";
 @source "../dist";
 
 /* ═══════════════════════════════════════════════════════
    Tailwind v4 — @theme (CSS-first token registration)
-   This ensures ALL custom values are available as
-   Tailwind utility classes (e.g. bg-primary, text-cream-base)
    ═══════════════════════════════════════════════════════ */
 @theme {
   /* Brand */
   --color-primary: #241979;
   --color-primary-light: #4F39F6;
+  --color-primary-soft: #3A2E9E;
   --color-primary-glow: #4C35DE;
-  --color-primary-electric: #5b42f2;
+  --color-primary-electric: #4F39F6;
+  --color-primary-electric-light: #7C6AF8;
   --color-primary-dark: #0f0a38;
 
   /* Neutrals */
@@ -52,25 +48,30 @@
   --color-info-light: #60A5FA;
   --color-info-surface: rgba(59, 130, 246, 0.10);
 
-  /* Glass */
-  --color-glass-bg: rgba(31, 31, 33, 0.60);
+  /* Glass — dark defaults */
+  --color-glass-bg: rgba(31, 31, 33, 0.40);
   --color-glass-bg-heavy: rgba(31, 31, 33, 0.80);
-  --color-glass-border: rgba(255, 255, 255, 0.08);
-  --color-glass-border-medium: rgba(255, 255, 255, 0.12);
+  --color-glass-surface: rgba(31, 31, 33, 0.70);
+  --color-glass-border: rgba(255, 255, 255, 0.03);
+  --color-glass-border-medium: rgba(255, 255, 255, 0.08);
   --color-glass-border-strong: rgba(255, 255, 255, 0.20);
   --color-glass-highlight: rgba(255, 255, 255, 0.05);
+
+  /* White transparency scale */
+  --color-white-3: rgba(255, 255, 255, 0.03);
   --color-white-5: rgba(255, 255, 255, 0.05);
+  --color-white-8: rgba(255, 255, 255, 0.08);
   --color-white-10: rgba(255, 255, 255, 0.10);
   --color-white-20: rgba(255, 255, 255, 0.20);
   --color-white-40: rgba(255, 255, 255, 0.40);
   --color-white-60: rgba(255, 255, 255, 0.60);
   --color-white-80: rgba(255, 255, 255, 0.80);
 
-  /* Aliases for component compatibility */
+  /* Card aliases */
   --color-card-surface: #1F1F21;
   --color-card-bg: #1F1F21;
 
-  /* Semantic aliases (component compat) */
+  /* Semantic aliases */
   --color-semantic-success: #10B981;
   --color-semantic-warning: #F59E0B;
   --color-semantic-error: #E0115F;
@@ -78,7 +79,6 @@
 
   /* Cream theme tokens */
   --color-cream-card: #FFFFFF;
-  --color-cream-border: #E5E5E5;
   --color-cream-primary: #241979;
   --color-cream-secondary: #4b5563;
   --color-cream-muted: #9ca3af;
@@ -98,6 +98,12 @@
   --color-disconnected-text: #fecdd3;
   --color-disconnected-border: rgba(244, 63, 94, 0.30);
 
+  /* Fluid theme tokens */
+  --color-fluid-bg: rgba(255, 255, 255, 0.03);
+  --color-fluid-surface: #161618;
+  --color-fluid-border: rgba(255, 255, 255, 0.05);
+  --color-fluid-primary-soft: rgba(124, 106, 248, 0.20);
+
   /* Typography */
   --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
   --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
@@ -114,25 +120,33 @@
   --font-size-caption: 0.6875rem;
   --font-size-label: 0.625rem;
 
-  /* Radius */
+  /* Radius — organic */
   --radius-sm: 0.25rem;
   --radius-md: 0.5rem;
   --radius-lg: 1rem;
   --radius-xl: 1.5rem;
   --radius-2xl: 2rem;
   --radius-3xl: 2.5rem;
+  --radius-4xl: 3rem;
   --radius-full: 9999px;
+  --radius-organic: 2.5rem;
+  --radius-organic-lg: 3rem;
+  --radius-squircle: 1.25rem;
+  --radius-squircle-sm: 1rem;
+  --radius-squircle-lg: 2rem;
   --radius-geo: 0.5rem 2rem 0.5rem 2rem;
   --radius-geo-inv: 2rem 0.5rem 2rem 0.5rem;
   --radius-pill-asym: 4px 16px 16px 4px;
 
   /* Shadows */
-  --shadow-glass: 0 4px 24px -1px rgba(0, 0, 0, 0.20);
-  --shadow-glass-lg: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
+  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.40), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
+  --shadow-glass-sm: 0 4px 24px rgba(0, 0, 0, 0.25);
+  --shadow-glass-lg: 0 12px 48px rgba(0, 0, 0, 0.50), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
   --shadow-glass-xl: 10px 10px 40px rgba(0, 0, 0, 0.40);
   --shadow-glow: 0 0 20px rgba(79, 57, 246, 0.40);
   --shadow-glow-sm: 0 0 10px rgba(79, 57, 246, 0.30);
   --shadow-glow-lg: 0 0 40px rgba(79, 57, 246, 0.50);
+  --shadow-glow-soft: 0 4px 30px rgba(79, 57, 246, 0.15);
   --shadow-glow-primary: 0 0 20px rgba(79, 57, 246, 0.30), 0 4px 12px rgba(79, 57, 246, 0.20);
   --shadow-glow-error: 0 0 20px rgba(224, 17, 95, 0.30), 0 4px 12px rgba(224, 17, 95, 0.20);
   --shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.20);
@@ -141,26 +155,33 @@
   --shadow-neon: 0 0 10px rgba(79, 57, 246, 0.40), 0 0 20px rgba(79, 57, 246, 0.20);
   --shadow-neon-lg: 0 0 30px rgba(79, 57, 246, 0.40), 0 0 60px rgba(79, 57, 246, 0.20);
   --shadow-neon-glow: 0 0 30px rgba(79, 57, 246, 0.40), 0 0 60px rgba(79, 57, 246, 0.20);
+  --shadow-inner-light: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
   --shadow-cream-sm: 0 2px 8px rgba(0, 0, 0, 0.02);
   --shadow-cream-md: 0 4px 16px rgba(0, 0, 0, 0.03);
   --shadow-cream-lg: 0 8px 32px rgba(0, 0, 0, 0.05);
   --shadow-cream-glow: 0 0 15px rgba(36, 25, 121, 0.10);
+  --shadow-cream-btn: 0 2px 8px rgba(36, 25, 121, 0.08);
+  --shadow-cream-btn-primary: 0 4px 16px rgba(36, 25, 121, 0.20);
+  --shadow-soft-glow: 0 4px 30px rgba(0, 0, 0, 0.12);
 
   /* Animations */
   --animate-shimmer: shimmer 2s infinite;
   --animate-spin-slow: spin-slow 10s linear infinite;
   --animate-glow-pulse: glow-pulse 2s ease-in-out infinite;
-  --animate-float: float 6s ease-in-out infinite;
+  --animate-float: float 20s infinite ease-in-out;
+  --animate-float-subtle: float-subtle 6s infinite ease-in-out;
   --animate-fade-in: fade-in 0.3s ease-out;
-  --animate-slide-up: slide-up 0.3s ease-out;
+  --animate-slide-up: slide-up 0.4s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 /* ═══════════════════════════════════════════════════════
-   CSS Custom Properties — Dark Theme (Primary)
+   CSS Custom Properties — Dark Theme (Primary / Default)
+   Organic-Dark: deep void, glassmorphism, glow accents
    ═══════════════════════════════════════════════════════ */
 :root {
   --org-primary: #241979;
   --org-primary-light: #4F39F6;
+  --org-primary-soft: #3A2E9E;
   --org-primary-glow: #4C35DE;
   --org-bg-void: #191919;
   --org-bg-surface: #1F1F21;
@@ -172,18 +193,29 @@
   --org-error: #E0115F;
   --org-info: #3B82F6;
 
-  --org-glass-bg: rgba(31, 31, 33, 0.60);
+  --org-glass-bg: rgba(31, 31, 33, 0.40);
   --org-glass-bg-heavy: rgba(31, 31, 33, 0.80);
   --org-glass-surface: rgba(31, 31, 33, 0.70);
-  --org-glass-border: rgba(255, 255, 255, 0.08);
-  --org-glass-border-medium: rgba(255, 255, 255, 0.12);
+  --org-glass-border: rgba(255, 255, 255, 0.03);
+  --org-glass-border-medium: rgba(255, 255, 255, 0.08);
   --org-glass-border-strong: rgba(255, 255, 255, 0.20);
   --org-glass-highlight: rgba(255, 255, 255, 0.05);
 
   --org-text: #f3f4f6;
   --org-text-secondary: #d1d5db;
   --org-text-muted: #6b7280;
-  --org-border: rgba(255, 255, 255, 0.08);
+  --org-border: rgba(255, 255, 255, 0.03);
+
+  --org-card-bg: #1F1F21;
+  --org-card-surface: #2A2A2E;
+
+  --org-subtle-5: rgba(255, 255, 255, 0.05);
+  --org-subtle-10: rgba(255, 255, 255, 0.10);
+  --org-subtle-20: rgba(255, 255, 255, 0.20);
+
+  --org-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.40), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
+  --org-shadow-glass-sm: 0 4px 24px rgba(0, 0, 0, 0.25);
+  --org-shadow-glass-lg: 0 12px 48px rgba(0, 0, 0, 0.50), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
 
   color-scheme: dark;
   font-family: 'Inter', system-ui, -apple-system, sans-serif;
@@ -192,32 +224,47 @@
 }
 
 /* ═══════════════════════════════════════════════════════
-   Light Theme Override
+   Cream / Light Theme
+   Organic-Cream: soft whites, indigo accents, light glass
    ═══════════════════════════════════════════════════════ */
 .theme-cream,
 [data-theme='light'] {
   --org-bg-void: #F9F9F7;
   --org-bg-surface: #FFFFFF;
-  --org-bg-elevated: #F5F5F3;
+  --org-bg-elevated: #F0F0EE;
 
   --org-text: #191919;
-  --org-text-secondary: #4b5563;
-  --org-text-muted: #9ca3af;
-
-  --org-glass-bg: rgba(255, 255, 255, 0.65);
-  --org-glass-bg-heavy: rgba(255, 255, 255, 0.80);
-  --org-glass-surface: rgba(255, 255, 255, 0.70);
-  --org-glass-border: rgba(0, 0, 0, 0.04);
-  --org-glass-border-medium: rgba(0, 0, 0, 0.05);
-  --org-glass-border-strong: rgba(0, 0, 0, 0.08);
-  --org-glass-highlight: rgba(0, 0, 0, 0.02);
-  --org-border: rgba(0, 0, 0, 0.06);
+  --org-text-secondary: #374151;
+  --org-text-muted: #6b7280;
+
+  --org-glass-bg: rgba(255, 255, 255, 0.70);
+  --org-glass-bg-heavy: rgba(255, 255, 255, 0.90);
+  --org-glass-surface: rgba(255, 255, 255, 0.80);
+  --org-glass-border: rgba(36, 25, 121, 0.03);
+  --org-glass-border-medium: rgba(36, 25, 121, 0.06);
+  --org-glass-border-strong: rgba(36, 25, 121, 0.15);
+  --org-glass-highlight: rgba(36, 25, 121, 0.02);
+  --org-border: rgba(36, 25, 121, 0.06);
+
+  --org-card-bg: #FFFFFF;
+  --org-card-surface: #FAFAFB;
+
+  --org-subtle-5: rgba(36, 25, 121, 0.02);
+  --org-subtle-10: rgba(36, 25, 121, 0.04);
+  --org-subtle-20: rgba(36, 25, 121, 0.08);
+
+  --org-shadow-glass: 0 4px 24px rgba(36, 25, 121, 0.04);
+  --org-shadow-glass-sm: 0 2px 12px rgba(36, 25, 121, 0.03);
+  --org-shadow-glass-lg: 0 8px 40px rgba(36, 25, 121, 0.06);
 
   color-scheme: light;
   color: #191919;
+  background-color: #F9F9F7;
 }
 
-/* Dark theme (explicit) */
+/* ═══════════════════════════════════════════════════════
+   Dark Theme (explicit)
+   ═══════════════════════════════════════════════════════ */
 [data-theme='dark'] {
   --org-bg-void: #191919;
   --org-bg-surface: #1F1F21;
@@ -227,21 +274,117 @@
   --org-text-secondary: #d1d5db;
   --org-text-muted: #6b7280;
 
-  --org-glass-bg: rgba(31, 31, 33, 0.60);
+  --org-glass-bg: rgba(31, 31, 33, 0.40);
   --org-glass-bg-heavy: rgba(31, 31, 33, 0.80);
   --org-glass-surface: rgba(31, 31, 33, 0.70);
-  --org-glass-border: rgba(255, 255, 255, 0.08);
-  --org-glass-border-medium: rgba(255, 255, 255, 0.12);
+  --org-glass-border: rgba(255, 255, 255, 0.03);
+  --org-glass-border-medium: rgba(255, 255, 255, 0.08);
   --org-glass-border-strong: rgba(255, 255, 255, 0.20);
   --org-glass-highlight: rgba(255, 255, 255, 0.05);
-  --org-border: rgba(255, 255, 255, 0.08);
+  --org-border: rgba(255, 255, 255, 0.03);
+
+  --org-card-bg: #1F1F21;
+  --org-card-surface: #2A2A2E;
+
+  --org-subtle-5: rgba(255, 255, 255, 0.05);
+  --org-subtle-10: rgba(255, 255, 255, 0.10);
+  --org-subtle-20: rgba(255, 255, 255, 0.20);
+
+  --org-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.40), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
+  --org-shadow-glass-sm: 0 4px 24px rgba(0, 0, 0, 0.25);
+  --org-shadow-glass-lg: 0 12px 48px rgba(0, 0, 0, 0.50), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
 
   color-scheme: dark;
   color: #f3f4f6;
+  background-color: #191919;
+}
+
+/* ═══════════════════════════════════════════════════════
+   Fluid Theme — vibrant mesh, neon glows, deep blacks
+   ═══════════════════════════════════════════════════════ */
+[data-theme='fluid'] {
+  --org-bg-void: #0b0c10;
+  --org-bg-surface: #161618;
+  --org-bg-elevated: #1a1a1c;
+
+  --org-text: #e5e7eb;
+  --org-text-secondary: #9CA3AF;
+  --org-text-muted: #6B6B76;
+
+  --org-glass-bg: rgba(255, 255, 255, 0.03);
+  --org-glass-bg-heavy: rgba(22, 22, 24, 0.90);
+  --org-glass-surface: rgba(22, 22, 24, 0.80);
+  --org-glass-border: rgba(255, 255, 255, 0.05);
+  --org-glass-border-medium: rgba(255, 255, 255, 0.08);
+  --org-glass-border-strong: rgba(255, 255, 255, 0.10);
+  --org-glass-highlight: rgba(255, 255, 255, 0.05);
+  --org-border: rgba(255, 255, 255, 0.05);
+
+  --org-card-bg: #161618;
+  --org-card-surface: #1a1a1c;
+
+  --org-subtle-5: rgba(255, 255, 255, 0.03);
+  --org-subtle-10: rgba(255, 255, 255, 0.06);
+  --org-subtle-20: rgba(255, 255, 255, 0.10);
+
+  --org-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.60);
+  --org-shadow-glass-sm: 0 4px 24px rgba(0, 0, 0, 0.40);
+  --org-shadow-glass-lg: 0 12px 48px rgba(0, 0, 0, 0.70);
+
+  color-scheme: dark;
+  color: #e5e7eb;
+  background-color: #0b0c10;
 }
 
 /* ═══════════════════════════════════════════════════════
-   Base Reset / Defaults
+   Theme-Aware Utility Classes
+   ═══════════════════════════════════════════════════════ */
+
+/* Borders */
+.border-theme { border-color: var(--org-border); }
+.border-theme-subtle { border-color: var(--org-glass-border); }
+.border-theme-medium { border-color: var(--org-glass-border-medium); }
+.border-theme-strong { border-color: var(--org-glass-border-strong); }
+
+/* Backgrounds */
+.bg-theme-void { background-color: var(--org-bg-void); }
+.bg-theme-surface { background-color: var(--org-bg-surface); }
+.bg-theme-elevated { background-color: var(--org-bg-elevated); }
+.bg-theme-card { background-color: var(--org-card-bg); }
+.bg-theme-card-surface { background-color: var(--org-card-surface); }
+.bg-theme-subtle { background: var(--org-subtle-5); }
+.bg-theme-subtle-10 { background: var(--org-subtle-10); }
+.bg-theme-subtle-20 { background: var(--org-subtle-20); }
+.bg-theme-glass { background: var(--org-glass-bg); }
+.bg-theme-glass-heavy { background: var(--org-glass-bg-heavy); }
+.bg-theme-highlight { background: var(--org-glass-highlight); }
+
+/* Text */
+.text-theme { color: var(--org-text); }
+.text-theme-secondary { color: var(--org-text-secondary); }
+.text-theme-muted { color: var(--org-text-muted); }
+
+/* Hover */
+.hover\:border-theme-medium:hover { border-color: var(--org-glass-border-medium); }
+.hover\:border-theme-strong:hover { border-color: var(--org-glass-border-strong); }
+.hover\:bg-theme-subtle:hover { background: var(--org-subtle-5); }
+.hover\:bg-theme-subtle-10:hover { background: var(--org-subtle-10); }
+.hover\:bg-theme-card-surface:hover { background-color: var(--org-card-surface); }
+.hover\:bg-theme-highlight:hover { background-color: var(--org-glass-highlight); }
+.hover\:bg-theme-glass:hover { background-color: var(--org-glass-bg); }
+
+/* Focus */
+.focus\:border-primary:focus { border-color: var(--org-primary-light); }
+.focus\:ring-primary:focus { box-shadow: 0 0 0 3px rgba(79, 57, 246, 0.20); }
+
+/* Divider */
+.divide-theme > * + * { border-color: var(--org-glass-border); }
+
+/* Tooltip border */
+.border-r-theme-glass-heavy { border-right-color: var(--org-glass-bg-heavy); }
+
+/* ═══════════════════════════════════════════════════════
+   Base Reset
    ═══════════════════════════════════════════════════════ */
 * {
   box-sizing: border-box;
@@ -256,14 +399,124 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* ═══════════════════════════════════════════════════════
+   Global Typography — Auto Theme Aware
+   ═══════════════════════════════════════════════════════ */
+h1, h2, h3, h4, h5, h6 {
+  color: var(--org-text);
+  font-weight: 600;
+  line-height: 1.25;
+  margin: 0;
+}
+
+h1 { font-size: 2.5rem; letter-spacing: -0.025em; }
+h2 { font-size: 2rem; letter-spacing: -0.02em; }
+h3 { font-size: 1.5rem; letter-spacing: -0.015em; }
+h4 { font-size: 1.25rem; }
+h5 { font-size: 1rem; }
+h6 { font-size: 0.875rem; }
+
+p {
+  color: var(--org-text-secondary);
+  line-height: 1.6;
+  margin: 0;
+}
+
+small, .text-sm {
+  color: var(--org-text-muted);
+  font-size: 0.875rem;
+}
+
+label {
+  color: var(--org-text-secondary);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+a {
+  color: var(--color-primary-light);
+  text-decoration: none;
+  transition: color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
+}
+a:hover { color: var(--color-primary-electric-light); }
+
+strong, b {
+  color: var(--org-text);
+  font-weight: 600;
+}
+
+code, pre, kbd, samp {
+  font-family: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
+  font-size: 0.875em;
+  color: var(--org-text);
+  background: var(--org-subtle-5);
+  border-radius: 0.5rem;
+  padding: 0.125rem 0.375rem;
+}
+
+pre {
+  padding: 1rem;
+  overflow-x: auto;
+  border: 1px solid var(--org-border);
+  border-radius: 1rem;
+}
+
+ul, ol {
+  color: var(--org-text-secondary);
+  padding-left: 1.5rem;
+  margin: 0;
+}
+
+li { line-height: 1.6; }
+
+blockquote {
+  border-left: 3px solid var(--color-primary-light);
+  padding-left: 1rem;
+  margin: 0;
+  color: var(--org-text-secondary);
+  font-style: italic;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--org-border);
+  margin: 1.5rem 0;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--org-text);
+}
+
+th {
+  color: var(--org-text);
+  font-weight: 600;
+  text-align: left;
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--org-border);
+}
+
+td {
+  color: var(--org-text-secondary);
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--org-subtle-5);
+}
+
+input, textarea, select, button {
+  font-family: inherit;
+  font-size: inherit;
+  color: var(--org-text);
+}
+
 /* ═══════════════════════════════════════════════════════
    Background Patterns
    ═══════════════════════════════════════════════════════ */
 .bg-dark-mesh {
   background-color: #191919;
   background-image:
-    radial-gradient(circle at 15% 15%, rgba(36, 25, 121, 0.15) 0%, transparent 40%),
-    radial-gradient(circle at 85% 85%, rgba(60, 20, 100, 0.08) 0%, transparent 40%);
+    radial-gradient(circle at 80% 10%, rgba(36, 25, 121, 0.15) 0%, transparent 40%),
+    radial-gradient(circle at 20% 80%, rgba(60, 20, 100, 0.08) 0%, transparent 40%);
 }
 
 .bg-cream-mesh {
@@ -273,6 +526,15 @@ body {
     radial-gradient(circle at 85% 85%, rgba(60, 20, 100, 0.03) 0%, transparent 40%);
 }
 
+.bg-fluid-mesh {
+  background-color: #0b0c10;
+  background-image:
+    radial-gradient(at 0% 0%, #241979 0px, transparent 50%),
+    radial-gradient(at 100% 0%, #4F39F6 0px, transparent 50%),
+    radial-gradient(at 100% 100%, #241979 0px, transparent 50%),
+    radial-gradient(at 0% 100%, #110c3b 0px, transparent 50%);
+}
+
 .grid-overlay {
   position: relative;
 }
@@ -281,8 +543,7 @@ body {
   content: '';
   position: absolute;
   inset: 0;
-  background-image:
-    radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
   background-size: 32px 32px;
   pointer-events: none;
   z-index: 0;
@@ -306,62 +567,103 @@ body {
 }
 
 /* ═══════════════════════════════════════════════════════
-   Glass Panels
-   Human-Glass: glassmorphism with depth layers
+   Glow Orbs — ambient decorative elements
+   ═══════════════════════════════════════════════════════ */
+.glow-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.15;
+  pointer-events: none;
+  animation: float 20s infinite ease-in-out;
+}
+
+.glow-orb-primary {
+  background: #4F39F6;
+  width: 300px;
+  height: 300px;
+}
+
+.glow-orb-secondary {
+  background: #241979;
+  width: 200px;
+  height: 200px;
+}
+
+.glow-orb-sm {
+  width: 120px;
+  height: 120px;
+  filter: blur(40px);
+}
+
+/* Watermark */
+.watermark-d {
+  position: absolute;
+  font-size: 20rem;
+  font-weight: 700;
+  opacity: 0.01;
+  color: white;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* ═══════════════════════════════════════════════════════
+   Glass Panels — Organic Design System
+   blur(40px) saturate(180%), organic border-radius 2.5rem
    ═══════════════════════════════════════════════════════ */
 .glass-panel {
-  background: linear-gradient(145deg, rgba(31, 31, 33, 0.90), rgba(31, 31, 33, 0.70));
-  backdrop-filter: blur(48px) saturate(1.2);
-  -webkit-backdrop-filter: blur(48px) saturate(1.2);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 2rem;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30);
+  background: var(--org-glass-bg-heavy);
+  backdrop-filter: blur(40px) saturate(180%);
+  -webkit-backdrop-filter: blur(40px) saturate(180%);
+  border: 1px solid var(--org-glass-border);
+  border-radius: 2.5rem;
+  box-shadow: var(--org-shadow-glass);
 }
 
 .glass-panel-alt {
-  background: linear-gradient(145deg, rgba(31, 31, 33, 0.85), rgba(31, 31, 33, 0.65));
-  backdrop-filter: blur(32px) saturate(1.1);
-  -webkit-backdrop-filter: blur(32px) saturate(1.1);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 1.5rem;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.20);
+  background: var(--org-glass-surface);
+  backdrop-filter: blur(32px) saturate(160%);
+  -webkit-backdrop-filter: blur(32px) saturate(160%);
+  border: 1px solid var(--org-glass-border-medium);
+  border-radius: 2rem;
+  box-shadow: var(--org-shadow-glass-sm);
 }
 
 .glass-panel-highlight {
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05));
-  backdrop-filter: blur(48px) saturate(1.2);
-  -webkit-backdrop-filter: blur(48px) saturate(1.2);
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  border-radius: 2rem;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.20);
+  background: var(--org-glass-highlight);
+  backdrop-filter: blur(40px) saturate(180%);
+  -webkit-backdrop-filter: blur(40px) saturate(180%);
+  border: 1px solid var(--org-glass-border-strong);
+  border-radius: 2.5rem;
+  box-shadow: var(--org-shadow-glass);
 }
 
 .glass-card {
-  background: linear-gradient(145deg, rgba(31, 31, 33, 0.80), rgba(31, 31, 33, 0.60));
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 1.5rem;
-  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  background: var(--org-glass-bg);
+  backdrop-filter: blur(24px) saturate(150%);
+  -webkit-backdrop-filter: blur(24px) saturate(150%);
+  border: 1px solid var(--org-glass-border);
+  border-radius: 2rem;
+  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .glass-card:hover {
-  border-color: rgba(255, 255, 255, 0.15);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30);
+  border-color: var(--org-glass-border-strong);
+  box-shadow: var(--org-shadow-glass);
   transform: translateY(-2px);
 }
 
 /* ═══════════════════════════════════════════════════════
-   Glass Buttons
+   Glass Buttons — squircle radius, organic easing
    ═══════════════════════════════════════════════════════ */
 .glass-button {
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--org-glass-highlight);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  color: white;
+  border: 1px solid var(--org-glass-border-medium);
+  color: var(--org-text);
   padding: 0.625rem 1.25rem;
-  border-radius: 0.75rem;
+  border-radius: 1.25rem;
   font-size: 0.8125rem;
   font-weight: 500;
   cursor: pointer;
@@ -369,14 +671,14 @@ body {
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
   text-decoration: none;
 }
 
 .glass-button:hover {
-  background: rgba(255, 255, 255, 0.14);
-  border-color: rgba(255, 255, 255, 0.25);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.20);
+  background: var(--org-glass-border-medium);
+  border-color: var(--org-glass-border-strong);
+  box-shadow: var(--org-shadow-glass-sm);
 }
 
 .glass-button:active {
@@ -384,11 +686,11 @@ body {
 }
 
 .glass-btn-primary {
-  background: linear-gradient(135deg, #4F39F6, #4C35DE);
-  border: 1px solid rgba(79, 57, 246, 0.50);
+  background: linear-gradient(135deg, #4F39F6, #241979);
+  border: 1px solid rgba(79, 57, 246, 0.40);
   color: white;
   padding: 0.625rem 1.25rem;
-  border-radius: 0.75rem;
+  border-radius: 1.25rem;
   font-size: 0.8125rem;
   font-weight: 500;
   cursor: pointer;
@@ -396,12 +698,12 @@ body {
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
   box-shadow: 0 0 20px rgba(79, 57, 246, 0.30);
 }
 
 .glass-btn-primary:hover {
-  background: linear-gradient(135deg, #5b42f2, #5a3ee6);
+  background: linear-gradient(135deg, #5b42f2, #2d1f99);
   box-shadow: 0 0 30px rgba(79, 57, 246, 0.45);
   transform: translateY(-1px);
 }
@@ -412,10 +714,10 @@ body {
 
 .glass-btn-outline {
   background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  color: rgba(255, 255, 255, 0.80);
+  border: 1px solid var(--org-glass-border-strong);
+  color: var(--org-text-secondary);
   padding: 0.625rem 1.25rem;
-  border-radius: 0.75rem;
+  border-radius: 1.25rem;
   font-size: 0.8125rem;
   font-weight: 500;
   cursor: pointer;
@@ -423,44 +725,44 @@ body {
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .glass-btn-outline:hover {
-  border-color: rgba(255, 255, 255, 0.30);
-  background: rgba(255, 255, 255, 0.05);
-  color: white;
+  border-color: var(--org-primary-light);
+  background: var(--org-glass-highlight);
+  color: var(--org-text);
 }
 
 .glass-btn-sm {
   padding: 0.375rem 0.75rem;
   font-size: 0.75rem;
-  border-radius: 0.5rem;
+  border-radius: 1rem;
 }
 
 .glass-btn-lg {
   padding: 0.875rem 2rem;
   font-size: 0.9375rem;
-  border-radius: 1rem;
+  border-radius: 1.5rem;
 }
 
 /* ═══════════════════════════════════════════════════════
-   Glass Inputs
+   Glass Inputs — squircle radius, focus glow
    ═══════════════════════════════════════════════════════ */
 .glass-input,
 .input-glass {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--org-glass-highlight);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 0.75rem;
+  border: 1px solid var(--org-glass-border);
+  border-radius: 1.25rem;
   padding: 0.75rem 1rem;
   font-size: 0.875rem;
   font-weight: 300;
   color: var(--org-text);
   outline: none;
   width: 100%;
-  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .glass-input::placeholder,
@@ -472,16 +774,16 @@ body {
 .glass-input:focus,
 .input-glass:focus {
   border-color: rgba(79, 57, 246, 0.50);
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--org-glass-border-medium);
   box-shadow: 0 0 0 3px rgba(79, 57, 246, 0.10), 0 0 20px rgba(79, 57, 246, 0.08);
 }
 
 .glass-textarea {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--org-glass-highlight);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 0.75rem;
+  border: 1px solid var(--org-glass-border);
+  border-radius: 1.25rem;
   padding: 0.75rem 1rem;
   font-size: 0.875rem;
   font-weight: 300;
@@ -490,12 +792,12 @@ body {
   width: 100%;
   min-height: 100px;
   resize: vertical;
-  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .glass-textarea:focus {
   border-color: rgba(79, 57, 246, 0.50);
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--org-glass-border-medium);
   box-shadow: 0 0 0 3px rgba(79, 57, 246, 0.10);
 }
 
@@ -511,8 +813,8 @@ body {
   font-size: 0.6875rem;
   font-weight: 500;
   letter-spacing: 0.025em;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--org-glass-highlight);
+  border: 1px solid var(--org-glass-border);
   color: var(--org-text-secondary);
 }
 
@@ -547,12 +849,12 @@ body {
 }
 
 /* ═══════════════════════════════════════════════════════
-   Alerts — Glow variants
+   Alerts — Organic glow variants
    ═══════════════════════════════════════════════════════ */
 .alert-success {
   background: rgba(16, 185, 129, 0.08);
   border: 1px solid rgba(16, 185, 129, 0.25);
-  border-radius: 1rem;
+  border-radius: 1.25rem;
   padding: 1rem 1.25rem;
   box-shadow: 0 0 20px rgba(16, 185, 129, 0.10);
 }
@@ -560,7 +862,7 @@ body {
 .alert-error {
   background: rgba(224, 17, 95, 0.08);
   border: 1px solid rgba(224, 17, 95, 0.25);
-  border-radius: 1rem;
+  border-radius: 1.25rem;
   padding: 1rem 1.25rem;
   box-shadow: 0 0 20px rgba(224, 17, 95, 0.10);
 }
@@ -568,7 +870,7 @@ body {
 .alert-warning {
   background: rgba(245, 158, 11, 0.08);
   border: 1px solid rgba(245, 158, 11, 0.25);
-  border-radius: 1rem;
+  border-radius: 1.25rem;
   padding: 1rem 1.25rem;
   box-shadow: 0 0 20px rgba(245, 158, 11, 0.10);
 }
@@ -576,7 +878,7 @@ body {
 .alert-info {
   background: rgba(59, 130, 246, 0.08);
   border: 1px solid rgba(59, 130, 246, 0.25);
-  border-radius: 1rem;
+  border-radius: 1.25rem;
   padding: 1rem 1.25rem;
   box-shadow: 0 0 20px rgba(59, 130, 246, 0.10);
 }
@@ -590,14 +892,14 @@ body {
    Toasts — Floating notifications
    ═══════════════════════════════════════════════════════ */
 .toast {
-  background: linear-gradient(145deg, rgba(31, 31, 33, 0.95), rgba(31, 31, 33, 0.85));
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 1rem;
+  background: var(--org-glass-bg-heavy);
+  backdrop-filter: blur(40px) saturate(180%);
+  -webkit-backdrop-filter: blur(40px) saturate(180%);
+  border: 1px solid var(--org-glass-border);
+  border-radius: 1.25rem;
   padding: 0.875rem 1.25rem;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.40);
-  animation: slide-up 0.3s ease-out;
+  box-shadow: var(--org-shadow-glass);
+  animation: slide-up 0.4s cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .toast-success { border-left: 3px solid #10B981; }
@@ -609,8 +911,8 @@ body {
    Skeleton Loader
    ═══════════════════════════════════════════════════════ */
 .skeleton {
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 0.5rem;
+  background: var(--org-glass-highlight);
+  border-radius: 1rem;
   overflow: hidden;
   position: relative;
 }
@@ -619,13 +921,13 @@ body {
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
+  background: linear-gradient(90deg, transparent, var(--org-glass-border-medium), transparent);
   animation: shimmer 2s infinite;
   transform: translateX(-100%);
 }
 
 .skeleton-shimmer {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--org-glass-highlight);
   position: relative;
   overflow: hidden;
 }
@@ -634,7 +936,7 @@ body {
   content: '';
   position: absolute;
   inset: 0;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
+  background: linear-gradient(90deg, transparent, var(--org-glass-border-medium), transparent);
   animation: shimmer 2s infinite;
   transform: translateX(-100%);
 }
@@ -645,7 +947,7 @@ body {
 .progress-track {
   width: 100%;
   height: 6px;
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--org-glass-highlight);
   border-radius: 9999px;
   overflow: hidden;
 }
@@ -653,9 +955,9 @@ body {
 .progress-fill {
   height: 100%;
   border-radius: 9999px;
-  background: linear-gradient(90deg, #4F39F6, #4C35DE);
+  background: linear-gradient(90deg, #4F39F6, #241979);
   box-shadow: 0 0 10px rgba(79, 57, 246, 0.40);
-  transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: width 500ms cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .progress-fill-success {
@@ -676,47 +978,33 @@ body {
 /* ═══════════════════════════════════════════════════════
    Glows & Shadows
    ═══════════════════════════════════════════════════════ */
-.shadow-glow {
-  box-shadow: 0 0 20px rgba(79, 57, 246, 0.40);
-}
-
-.shadow-glow-primary {
-  box-shadow: 0 0 20px rgba(79, 57, 246, 0.30), 0 4px 12px rgba(79, 57, 246, 0.20);
-}
-
-.shadow-glow-error {
-  box-shadow: 0 0 20px rgba(224, 17, 95, 0.30), 0 4px 12px rgba(224, 17, 95, 0.20);
-}
-
-.shadow-neon {
-  box-shadow: 0 0 10px rgba(79, 57, 246, 0.40), 0 0 20px rgba(79, 57, 246, 0.20);
-}
-
-.shadow-neon-glow {
-  box-shadow: 0 0 30px rgba(79, 57, 246, 0.40), 0 0 60px rgba(79, 57, 246, 0.20);
-}
+.shadow-glow { box-shadow: 0 0 20px rgba(79, 57, 246, 0.40); }
+.shadow-glow-primary { box-shadow: 0 0 20px rgba(79, 57, 246, 0.30), 0 4px 12px rgba(79, 57, 246, 0.20); }
+.shadow-glow-error { box-shadow: 0 0 20px rgba(224, 17, 95, 0.30), 0 4px 12px rgba(224, 17, 95, 0.20); }
+.shadow-glow-soft { box-shadow: 0 4px 30px rgba(79, 57, 246, 0.15); }
+.shadow-neon { box-shadow: 0 0 10px rgba(79, 57, 246, 0.40), 0 0 20px rgba(79, 57, 246, 0.20); }
+.shadow-neon-glow { box-shadow: 0 0 30px rgba(79, 57, 246, 0.40), 0 0 60px rgba(79, 57, 246, 0.20); }
 
 .shadow-glass-lg {
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30), 0 1px 1px rgba(255, 255, 255, 0.05) inset;
+  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.50), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
 }
 
 .shadow-glass-xl {
-  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.40), 0 1px 1px rgba(255, 255, 255, 0.05) inset;
+  box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.40);
+}
+
+.shadow-inner-light {
+  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
 }
 
 /* ═══════════════════════════════════════════════════════
    Text Effects
    ═══════════════════════════════════════════════════════ */
-.text-glow {
-  text-shadow: 0 0 15px rgba(79, 57, 246, 0.60);
-}
-
-.text-glow-sm {
-  text-shadow: 0 0 8px rgba(79, 57, 246, 0.40);
-}
+.text-glow { text-shadow: 0 0 15px rgba(79, 57, 246, 0.60); }
+.text-glow-sm { text-shadow: 0 0 8px rgba(79, 57, 246, 0.40); }
 
 .text-gradient {
-  background: linear-gradient(to right, #4F39F6, #4C35DE);
+  background: linear-gradient(to right, #4F39F6, #241979);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -732,35 +1020,19 @@ body {
 /* ═══════════════════════════════════════════════════════
    Geometric Clips
    ═══════════════════════════════════════════════════════ */
-.clip-geo {
-  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 100% 100%, 0 100%);
-}
-
-.clip-geo-inv {
-  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 0);
-}
-
-.clip-geo-br {
-  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 0);
-}
-
-.rounded-pill-asym {
-  border-radius: 12px 16px 12px 16px;
-}
+.clip-geo { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 100% 100%, 0 100%); }
+.clip-geo-inv { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 0); }
+.clip-geo-br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 0); }
+.rounded-pill-asym { border-radius: 12px 16px 12px 16px; }
 
 /* ═══════════════════════════════════════════════════════
-   Icons — thin-icon utility for SVG icons
+   Icons — thin-icon utility
    ═══════════════════════════════════════════════════════ */
-.thin-icon {
-  stroke-width: 1;
-}
-
-.thin-icon svg {
-  stroke-width: 1;
-}
+.thin-icon { stroke-width: 1; }
+.thin-icon svg { stroke-width: 1; }
 
 /* ═══════════════════════════════════════════════════════
-   Dock / Bottom Nav
+   Dock / Bottom Nav — Organic Glass
    ═══════════════════════════════════════════════════════ */
 .dock-glass {
   position: fixed;
@@ -772,9 +1044,9 @@ body {
   gap: 0.25rem;
   padding: 0.5rem 0.75rem;
   background: linear-gradient(145deg, rgba(31, 31, 33, 0.92), rgba(31, 31, 33, 0.80));
-  backdrop-filter: blur(48px) saturate(1.2);
-  -webkit-backdrop-filter: blur(48px) saturate(1.2);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(40px) saturate(180%);
+  -webkit-backdrop-filter: blur(40px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.03);
   border-radius: 9999px;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.50);
   z-index: 50;
@@ -786,16 +1058,16 @@ body {
   justify-content: center;
   width: 2.75rem;
   height: 2.75rem;
-  border-radius: 0.75rem;
+  border-radius: 1rem;
   background: transparent;
   border: none;
   color: rgba(255, 255, 255, 0.50);
   cursor: pointer;
-  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .dock-btn:hover {
-  background: rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.05);
   color: white;
 }
 
@@ -815,7 +1087,7 @@ body {
   border-radius: 9999px;
   overflow: hidden;
   background: linear-gradient(135deg, rgba(79, 57, 246, 0.20), rgba(79, 57, 246, 0.10));
-  border: 2px solid rgba(255, 255, 255, 0.10);
+  border: 2px solid rgba(255, 255, 255, 0.08);
   flex-shrink: 0;
 }
 
@@ -824,30 +1096,25 @@ body {
 .avatar-lg { width: 3.5rem; height: 3.5rem; font-size: 1rem; }
 .avatar-xl { width: 5rem; height: 5rem; font-size: 1.5rem; }
 
-.avatar-group {
-  display: flex;
-}
-
-.avatar-group .avatar + .avatar {
-  margin-left: -0.5rem;
-}
+.avatar-group { display: flex; }
+.avatar-group .avatar + .avatar { margin-left: -0.5rem; }
 
 /* ═══════════════════════════════════════════════════════
-   Metric Card
+   Metric Card — Organic glass
    ═══════════════════════════════════════════════════════ */
 .metric-card {
-  background: linear-gradient(145deg, rgba(31, 31, 33, 0.80), rgba(31, 31, 33, 0.60));
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  border-radius: 1.5rem;
+  background: var(--org-glass-bg-heavy);
+  backdrop-filter: blur(40px) saturate(180%);
+  -webkit-backdrop-filter: blur(40px) saturate(180%);
+  border: 1px solid var(--org-glass-border);
+  border-radius: 2.5rem;
   padding: 1.5rem;
-  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .metric-card:hover {
-  border-color: rgba(255, 255, 255, 0.12);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+  border-color: var(--org-glass-border-medium);
+  box-shadow: var(--org-shadow-glass);
 }
 
 /* ═══════════════════════════════════════════════════════
@@ -864,7 +1131,7 @@ body {
   flex: 1;
   border-radius: 2px 2px 0 0;
   background: rgba(79, 57, 246, 0.40);
-  transition: height 500ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition: height 500ms cubic-bezier(0.25, 1, 0.5, 1);
   min-width: 4px;
 }
 
@@ -875,21 +1142,14 @@ body {
 /* ═══════════════════════════════════════════════════════
    Scrollbar
    ═══════════════════════════════════════════════════════ */
-.custom-scrollbar::-webkit-scrollbar {
-  width: 4px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-track {
-  background: transparent;
-}
-
+.custom-scrollbar::-webkit-scrollbar { width: 4px; }
+.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.05);
   border-radius: 9999px;
 }
-
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.15);
+  background: rgba(255, 255, 255, 0.10);
 }
 
 /* ═══════════════════════════════════════════════════════
@@ -908,8 +1168,8 @@ body {
   width: 4rem;
   height: 4rem;
   border-radius: 1.5rem;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: var(--org-glass-highlight);
+  border: 1px solid var(--org-glass-border);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -918,41 +1178,42 @@ body {
 }
 
 /* ═══════════════════════════════════════════════════════
-   Light Theme Overrides — Glass Components
+   Light / Cream Theme Overrides — Glass Components
    ═══════════════════════════════════════════════════════ */
 [data-theme='light'] .glass-panel,
 .theme-cream .glass-panel {
-  background: rgba(255, 255, 255, 0.65);
-  border-color: rgba(0, 0, 0, 0.04);
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03);
+  background: rgba(255, 255, 255, 0.70);
+  border-color: rgba(36, 25, 121, 0.03);
+  box-shadow: 0 4px 24px rgba(36, 25, 121, 0.04);
+  backdrop-filter: blur(40px) saturate(180%);
 }
 
 [data-theme='light'] .glass-panel-alt,
 .theme-cream .glass-panel-alt {
   background: rgba(255, 255, 255, 0.80);
-  border-color: rgba(0, 0, 0, 0.06);
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+  border-color: rgba(36, 25, 121, 0.06);
+  box-shadow: 0 2px 12px rgba(36, 25, 121, 0.03);
 }
 
 [data-theme='light'] .glass-panel-highlight,
 .theme-cream .glass-panel-highlight {
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.60));
-  border-color: rgba(0, 0, 0, 0.06);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
+  border-color: rgba(36, 25, 121, 0.06);
+  box-shadow: 0 4px 16px rgba(36, 25, 121, 0.03);
 }
 
 [data-theme='light'] .glass-card,
 .theme-cream .glass-card {
   background: rgba(255, 255, 255, 0.70);
-  border-color: rgba(0, 0, 0, 0.04);
+  border-color: rgba(36, 25, 121, 0.03);
 }
 
 [data-theme='light'] .glass-input,
 [data-theme='light'] .input-glass,
 .theme-cream .glass-input,
 .theme-cream .input-glass {
-  background: rgba(0, 0, 0, 0.03);
-  border-color: rgba(0, 0, 0, 0.08);
+  background: rgba(255, 255, 255, 0.60);
+  border-color: rgba(36, 25, 121, 0.06);
   color: #191919;
 }
 
@@ -968,33 +1229,40 @@ body {
 .theme-cream .glass-input:focus,
 .theme-cream .input-glass:focus {
   border-color: rgba(79, 57, 246, 0.40);
-  background: rgba(0, 0, 0, 0.04);
+  background: rgba(255, 255, 255, 0.80);
   box-shadow: 0 0 0 3px rgba(79, 57, 246, 0.08);
 }
 
 [data-theme='light'] .glass-button,
 .theme-cream .glass-button {
-  background: rgba(0, 0, 0, 0.04);
-  border-color: rgba(0, 0, 0, 0.08);
+  background: rgba(255, 255, 255, 0.60);
+  border-color: rgba(36, 25, 121, 0.06);
   color: #191919;
+  box-shadow: 0 2px 8px rgba(36, 25, 121, 0.08);
 }
 
 [data-theme='light'] .glass-button:hover,
 .theme-cream .glass-button:hover {
-  background: rgba(0, 0, 0, 0.08);
-  border-color: rgba(0, 0, 0, 0.12);
+  background: rgba(255, 255, 255, 0.80);
+  border-color: rgba(36, 25, 121, 0.10);
+  box-shadow: 0 4px 16px rgba(36, 25, 121, 0.10);
+}
+
+[data-theme='light'] .glass-btn-primary,
+.theme-cream .glass-btn-primary {
+  box-shadow: 0 4px 16px rgba(36, 25, 121, 0.20);
 }
 
 [data-theme='light'] .glass-btn-outline,
 .theme-cream .glass-btn-outline {
-  border-color: rgba(0, 0, 0, 0.12);
+  border-color: rgba(36, 25, 121, 0.12);
   color: #191919;
 }
 
 [data-theme='light'] .glass-pill,
 .theme-cream .glass-pill {
-  background: rgba(0, 0, 0, 0.04);
-  border-color: rgba(0, 0, 0, 0.06);
+  background: rgba(255, 255, 255, 0.60);
+  border-color: rgba(36, 25, 121, 0.06);
   color: #4b5563;
 }
 
@@ -1002,28 +1270,28 @@ body {
 [data-theme='light'] .skeleton-shimmer,
 .theme-cream .skeleton,
 .theme-cream .skeleton-shimmer {
-  background: rgba(0, 0, 0, 0.04);
+  background: rgba(36, 25, 121, 0.03);
 }
 
 [data-theme='light'] .skeleton::after,
 [data-theme='light'] .skeleton-shimmer::after,
 .theme-cream .skeleton::after,
 .theme-cream .skeleton-shimmer::after {
-  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.04), transparent);
+  background: linear-gradient(90deg, transparent, rgba(36, 25, 121, 0.04), transparent);
 }
 
 [data-theme='light'] .toast,
 .theme-cream .toast {
-  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.90));
-  border-color: rgba(0, 0, 0, 0.06);
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
+  background: rgba(255, 255, 255, 0.90);
+  border-color: rgba(36, 25, 121, 0.06);
+  box-shadow: 0 12px 40px rgba(36, 25, 121, 0.08);
 }
 
 [data-theme='light'] .dock-glass,
 .theme-cream .dock-glass {
   background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.80));
-  border-color: rgba(0, 0, 0, 0.06);
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
+  border-color: rgba(36, 25, 121, 0.06);
+  box-shadow: 0 12px 40px rgba(36, 25, 121, 0.08);
 }
 
 [data-theme='light'] .dock-btn,
@@ -1033,7 +1301,7 @@ body {
 
 [data-theme='light'] .dock-btn:hover,
 .theme-cream .dock-btn:hover {
-  background: rgba(0, 0, 0, 0.05);
+  background: rgba(36, 25, 121, 0.03);
   color: #191919;
 }
 
@@ -1050,7 +1318,8 @@ body {
 [data-theme='light'] .metric-card,
 .theme-cream .metric-card {
   background: rgba(255, 255, 255, 0.70);
-  border-color: rgba(0, 0, 0, 0.04);
+  border-color: rgba(36, 25, 121, 0.03);
+  box-shadow: 0 4px 24px rgba(36, 25, 121, 0.04);
 }
 
 [data-theme='light'] .mini-chart-bar,
@@ -1065,27 +1334,64 @@ body {
 
 [data-theme='light'] .custom-scrollbar::-webkit-scrollbar-thumb,
 .theme-cream .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.08);
+  background: rgba(36, 25, 121, 0.06);
 }
 
 [data-theme='light'] .custom-scrollbar::-webkit-scrollbar-thumb:hover,
 .theme-cream .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.15);
+  background: rgba(36, 25, 121, 0.10);
 }
 
 [data-theme='light'] .empty-state-icon,
 .theme-cream .empty-state-icon {
-  background: rgba(0, 0, 0, 0.04);
-  border-color: rgba(0, 0, 0, 0.06);
+  background: rgba(36, 25, 121, 0.03);
+  border-color: rgba(36, 25, 121, 0.06);
+}
+
+[data-theme='light'] .shadow-glass-lg,
+.theme-cream .shadow-glass-lg {
+  box-shadow: 0 8px 32px rgba(36, 25, 121, 0.06);
+}
+
+/* ═══════════════════════════════════════════════════════
+   Fluid Theme Overrides — neon glows, squircle panels
+   ═══════════════════════════════════════════════════════ */
+[data-theme='fluid'] .glass-panel {
+  background: rgba(255, 255, 255, 0.03);
+  border-color: rgba(255, 255, 255, 0.05);
+  border-radius: 2rem;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.60);
+}
+
+[data-theme='fluid'] .glass-card {
+  background: rgba(255, 255, 255, 0.03);
+  border-color: rgba(255, 255, 255, 0.05);
+  border-radius: 1.5rem;
+}
+
+[data-theme='fluid'] .glass-btn-primary {
+  box-shadow: 0 0 20px rgba(79, 57, 246, 0.40), 0 0 40px rgba(79, 57, 246, 0.15);
+}
+
+[data-theme='fluid'] .glass-btn-primary:hover {
+  box-shadow: 0 0 30px rgba(79, 57, 246, 0.50), 0 0 60px rgba(79, 57, 246, 0.25);
+}
+
+[data-theme='fluid'] .glass-input:focus,
+[data-theme='fluid'] .input-glass:focus {
+  box-shadow: 0 0 0 3px rgba(79, 57, 246, 0.15), 0 0 20px rgba(79, 57, 246, 0.10);
+}
+
+[data-theme='fluid'] .metric-card {
+  background: rgba(255, 255, 255, 0.03);
+  border-color: rgba(255, 255, 255, 0.05);
 }
 
 /* ═══════════════════════════════════════════════════════
    Keyframes
    ═══════════════════════════════════════════════════════ */
 @keyframes shimmer {
-  100% {
-    transform: translateX(100%);
-  }
+  100% { transform: translateX(100%); }
 }
 
 @keyframes spin-slow {
@@ -1099,6 +1405,12 @@ body {
 }
 
 @keyframes float {
+  0% { transform: translate(0, 0) rotate(0deg); }
+  50% { transform: translate(-20px, 20px) rotate(2deg); }
+  100% { transform: translate(0, 0) rotate(0deg); }
+}
+
+@keyframes float-subtle {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-8px); }
 }
@@ -1113,6 +1425,10 @@ body {
   to { opacity: 1; transform: translateY(0); }
 }
 
+@keyframes draw-line {
+  to { stroke-dashoffset: 0; }
+}
+
 @keyframes org-loader-spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
@@ -1127,3 +1443,21 @@ body {
   0%, 100% { opacity: 0.2; }
   50% { opacity: 0.4; }
 }
+
+@keyframes cta-pulse {
+  0% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.05); opacity: 0.6; }
+  100% { transform: scale(1.1); opacity: 0; }
+}
+
+.animate-cta-pulse {
+  animation: cta-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.animate-float {
+  animation: float 20s infinite ease-in-out;
+}
+
+.animate-float-subtle {
+  animation: float-subtle 6s infinite ease-in-out;
+}