Fix theme support for Sheet/Docs/Slides

- Add complete sentient-* bridge variables in app.css
- Map all HSL theme variables to sentient-* naming
- Includes: backgrounds, text, accents, borders, surfaces, inputs, status colors, shadows, radius
- Rewrite 3dbevel theme to use CSS variables instead of !important overrides
- All themes now properly cascade to office suite apps

ui/suite/css/app.css

@@ -41,6 +41,77 @@
     --secondary-bg: hsl(var(--card));
     --secondary-fg: hsl(var(--muted-foreground));
 
+    /* ============================================ */
+    /* SENTIENT BRIDGE VARIABLES                   */
+    /* Used by Sheet, Docs, Slides for theming     */
+    /* These map theme variables to app-specific   */
+    /* naming used across office suite apps        */
+    /* ============================================ */
+
+    /* Backgrounds */
+    --sentient-bg-primary: hsl(var(--background));
+    --sentient-bg-secondary: hsl(var(--card));
+    --sentient-bg-tertiary: hsl(var(--muted));
+    --sentient-bg-hover: hsla(var(--primary) / 0.08);
+    --sentient-bg-active: hsla(var(--primary) / 0.15);
+
+    /* Text */
+    --sentient-text-primary: hsl(var(--foreground));
+    --sentient-text-secondary: hsl(var(--muted-foreground));
+    --sentient-text-tertiary: hsla(var(--muted-foreground) / 0.7);
+    --sentient-text-muted: hsla(var(--muted-foreground) / 0.5);
+
+    /* Accent Colors */
+    --sentient-accent: hsl(var(--primary));
+    --sentient-accent-hover: hsl(var(--primary) / 0.85);
+    --sentient-accent-light: hsla(var(--primary) / 0.1);
+    --sentient-accent-dark: hsl(var(--primary) / 0.7);
+
+    /* Borders */
+    --sentient-border: hsl(var(--border));
+    --sentient-border-light: hsla(var(--border) / 0.5);
+    --sentient-border-accent: hsla(var(--primary) / 0.3);
+
+    /* Surfaces */
+    --sentient-surface: hsl(var(--card));
+    --sentient-surface-hover: hsla(var(--primary) / 0.08);
+    --sentient-surface-active: hsla(var(--primary) / 0.15);
+    --sentient-surface-elevated: hsl(var(--popover));
+
+    /* Inputs */
+    --sentient-input-bg: hsl(var(--input));
+    --sentient-input-border: hsl(var(--border));
+    --sentient-input-focus: hsl(var(--ring));
+
+    /* Status Colors */
+    --sentient-success: hsl(142 76% 36%);
+    --sentient-success-bg: hsla(142 76% 36% / 0.15);
+    --sentient-warning: hsl(38 92% 50%);
+    --sentient-warning-bg: hsla(38 92% 50% / 0.15);
+    --sentient-error: hsl(var(--destructive));
+    --sentient-error-bg: hsla(var(--destructive) / 0.15);
+
+    /* Typography */
+    --sentient-font-family:
+        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+        sans-serif;
+
+    /* Shadows */
+    --sentient-shadow-sm: 0 1px 2px 0 hsla(var(--foreground) / 0.05);
+    --sentient-shadow-md:
+        0 4px 6px -1px hsla(var(--foreground) / 0.1),
+        0 2px 4px -1px hsla(var(--foreground) / 0.06);
+    --sentient-shadow-lg:
+        0 10px 15px -3px hsla(var(--foreground) / 0.1),
+        0 4px 6px -2px hsla(var(--foreground) / 0.05);
+
+    /* Border Radius */
+    --sentient-radius: var(--radius);
+    --sentient-radius-sm: calc(var(--radius) * 0.5);
+    --sentient-radius-md: var(--radius);
+    --sentient-radius-lg: calc(var(--radius) * 1.5);
+    --sentient-radius-xl: calc(var(--radius) * 2);
+
     /* Glass Morphism */
     --glass-bg: hsla(var(--background) / 0.7);
     --glass-border: hsla(var(--border) / 0.8);

ui/suite/public/themes/3dbevel.css

@@ -1,66 +1,121 @@
-body, .card, .popover, .input, .button, .menu, .dialog {
+:root {
-  font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
+    /* 3D Bevel Theme - Windows 95/Classic Mac style */
-  background: #c0c0c0 !important;
+    --background: 0 0% 75%; /* #c0c0c0 - Classic gray */
-  color: #000 !important;
+    --foreground: 0 0% 0%; /* Black text */
-  border-radius: 0 !important;
+    --card: 0 0% 88%; /* #e0e0e0 - Lighter gray */
-  box-shadow: none !important;
+    --card-foreground: 0 0% 0%; /* Black */
+    --popover: 0 0% 82%; /* #d0d0d0 */
+    --popover-foreground: 0 0% 0%; /* Black */
+    --primary: 240 100% 33%; /* #0000aa - Classic blue */
+    --primary-foreground: 0 0% 100%; /* White */
+    --secondary: 0 0% 88%; /* #e0e0e0 */
+    --secondary-foreground: 0 0% 0%; /* Black */
+    --muted: 0 0% 75%; /* #c0c0c0 */
+    --muted-foreground: 0 0% 25%; /* #404040 */
+    --accent: 240 100% 50%; /* Blue accent */
+    --accent-foreground: 0 0% 100%; /* White */
+    --destructive: 0 100% 40%; /* Red */
+    --destructive-foreground: 0 0% 100%; /* White */
+    --border: 0 0% 25%; /* #404040 - Dark border */
+    --input: 0 0% 100%; /* White input bg */
+    --ring: 240 100% 50%; /* Blue focus ring */
+    --radius: 0rem; /* No border radius - sharp corners */
+    --chart-1: 240 100% 33%; /* Blue */
+    --chart-2: 120 100% 25%; /* Green */
+    --chart-3: 0 100% 40%; /* Red */
+    --chart-4: 300 100% 33%; /* Purple */
+    --chart-5: 60 100% 40%; /* Yellow */
+
+    /* 3D Bevel specific - raised/sunken effects */
+    --bevel-light: 0 0% 100%; /* White highlight */
+    --bevel-dark: 0 0% 25%; /* Dark shadow */
 }
 
-.card, .popover, .menu, .dialog {
+/* 3D Bevel effect for buttons and raised elements */
-  border: 2px solid #fff !important;
+.button,
-  border-bottom: 2px solid #404040 !important;
+button,
-  border-right: 2px solid #404040 !important;
+.btn,
-  padding: 8px !important;
+.btn-icon,
-  background: #e0e0e0 !important;
+.btn-primary,
+.btn-secondary,
+input[type="button"],
+input[type="submit"] {
+    border-style: solid;
+    border-width: 2px;
+    border-color: hsl(var(--bevel-light)) hsl(var(--bevel-dark))
+        hsl(var(--bevel-dark)) hsl(var(--bevel-light));
+    box-shadow: none;
 }
 
-.button, button, input[type="button"], input[type="submit"] {
+.button:active,
-  background: #e0e0e0 !important;
+button:active,
-  color: #000 !important;
+.btn:active,
-  border: 2px solid #fff !important;
+.btn-icon:active,
-  border-bottom: 2px solid #404040 !important;
+input[type="button"]:active,
-  border-right: 2px solid #404040 !important;
+input[type="submit"]:active {
-  padding: 4px 12px !important;
+    border-color: hsl(var(--bevel-dark)) hsl(var(--bevel-light))
-  font-weight: bold !important;
+        hsl(var(--bevel-light)) hsl(var(--bevel-dark));
-  box-shadow: none !important;
-  outline: none !important;
 }
 
-input, textarea, select {
+/* Sunken effect for inputs */
-  background: #fff !important;
+input:not([type="button"]):not([type="submit"]):not([type="checkbox"]):not(
-  color: #000 !important;
+        [type="radio"]
-  border: 2px solid #fff !important;
+    ),
-  border-bottom: 2px solid #404040 !important;
+textarea,
-  border-right: 2px solid #404040 !important;
+select {
-  font-family: inherit !important;
+    border-style: solid;
-  box-shadow: none !important;
+    border-width: 2px;
+    border-color: hsl(var(--bevel-dark)) hsl(var(--bevel-light))
+        hsl(var(--bevel-light)) hsl(var(--bevel-dark));
+    box-shadow: none;
 }
 
-.menu {
+/* Cards and panels - raised */
-  background: #d0d0d0 !important;
+.card,
-  border: 2px solid #fff !important;
+.modal-content,
-  border-bottom: 2px solid #404040 !important;
+.popover,
-  border-right: 2px solid #404040 !important;
+.dropdown-menu,
+.context-menu {
+    border-style: solid;
+    border-width: 2px;
+    border-color: hsl(var(--bevel-light)) hsl(var(--bevel-dark))
+        hsl(var(--bevel-dark)) hsl(var(--bevel-light));
+    box-shadow: none;
 }
 
+/* Scrollbar styling */
 ::-webkit-scrollbar {
-  width: 16px !important;
+    width: 16px;
-  background: #c0c0c0 !important;
+    background: hsl(var(--muted));
 }
 ::-webkit-scrollbar-thumb {
-  background: #404040 !important;
+    background: hsl(var(--muted));
-  border: 2px solid #fff !important;
+    border-style: solid;
-  border-bottom: 2px solid #404040 !important;
+    border-width: 2px;
-  border-right: 2px solid #404040 !important;
+    border-color: hsl(var(--bevel-light)) hsl(var(--bevel-dark))
+        hsl(var(--bevel-dark)) hsl(var(--bevel-light));
+}
+::-webkit-scrollbar-track {
+    background: hsl(var(--background));
 }
 
+/* Font override for retro feel */
+body {
+    font-family: "IBM Plex Mono", "Courier New", monospace;
+}
+
+/* Links - classic blue underlined */
 a {
-  color: #0000aa !important;
+    color: hsl(var(--primary));
-  text-decoration: underline !important;
+    text-decoration: underline;
+}
+a:visited {
+    color: hsl(300 100% 33%);
 }
 
+/* Horizontal rules */
 hr {
-  border: none !important;
+    border: none;
-  border-top: 2px solid #404040 !important;
+    border-top: 2px solid hsl(var(--bevel-dark));
-  margin: 8px 0 !important;
+    margin: 8px 0;
 }