legacy UI (#4612)

# Description of Changes

<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

---------

Co-authored-by: Claude <[email protected]>
Co-authored-by: EthanHealy01 <[email protected]>
Co-authored-by: EthanHealy01 <[email protected]>

frontend/src/styles/theme.css

@@ -1,6 +1,17 @@
 /* CSS variables for Tailwind + Mantine integration */
 
 :root {
+  /* Global animation durations */
+  --fullscreen-anim-duration-in: 0.28s;
+  --fullscreen-anim-duration-out: 0.22s;
+
+  /* Z-index constants (added in this PR) */
+  --z-over-fullscreen-surface: 1400;
+  --z-fullscreen-surface: 1200;
+  --z-fullscreen-favorite-star: 2;
+  --z-fullscreen-icon-svg: 1;
+  --z-toolpicker-star: 1;
+
   /* Standard gray scale */
   --gray-50: 249 250 251;
   --gray-100: 243 244 246;
@@ -48,6 +59,22 @@
   --color-yellow-200: #fef08a;
   --color-yellow-300: #fde047;
   --color-yellow-400: #facc15;
+
+  /* Category colors - consistent across light and dark modes */
+  --category-color-removal: #ef4444;        /* Red for removal tools */
+  --category-color-security: #f59e0b;       /* Orange for security tools */
+  --category-color-formatting: #8b5cf6;     /* Purple for formatting tools */
+  --category-color-extraction: #06b6d4;      /* Cyan for extraction tools */
+  --category-color-signing: #10b981;        /* Green for signing tools */
+  --category-color-general: #3b82f6;        /* Blue for general tools */
+  --category-color-verification: #f97316;    /* Orange for verification tools */
+  --category-color-automation: #ec4899;     /* Pink for automation tools */
+  --category-color-developer: #6b7280;      /* Gray for developer tools */
+  --category-color-default: #6b7280;        /* Default gray */
+
+  /* Special section colors - consistent across light and dark modes */
+  --special-color-favorites: #FFC107;      /* Yellow/gold for favorites */
+  --special-color-recommended: #1BB1D4;    /* Cyan for recommended */
   --color-yellow-500: #eab308;
   --color-yellow-600: #ca8a04;
   --color-yellow-700: #a16207;
@@ -277,6 +304,22 @@
   --color-gray-800: #e5e7eb;
   --color-gray-900: #f3f4f6;
 
+  /* Category colors - same as light mode for consistency */
+  --category-color-removal: #ef4444;        /* Red for removal tools */
+  --category-color-security: #f59e0b;       /* Orange for security tools */
+  --category-color-formatting: #8b5cf6;     /* Purple for formatting tools */
+  --category-color-extraction: #06b6d4;      /* Cyan for extraction tools */
+  --category-color-signing: #10b981;        /* Green for signing tools */
+  --category-color-general: #3b82f6;        /* Blue for general tools */
+  --category-color-verification: #f97316;    /* Orange for verification tools */
+  --category-color-automation: #ec4899;     /* Pink for automation tools */
+  --category-color-developer: #6b7280;      /* Gray for developer tools */
+  --category-color-default: #6b7280;        /* Default gray */
+
+  /* Special section colors - same as light mode for consistency */
+  --special-color-favorites: #FFC107;      /* Yellow/gold for favorites */
+  --special-color-recommended: #1BB1D4;    /* Cyan for recommended */
+
   /* Success (green) - dark */
   --color-green-50: #052e16;
   --color-green-100: #064e3b;
@@ -445,4 +488,11 @@
 /* Smooth transitions for theme switching */
 * {
   transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
-}
+}
+:root {
+  --shadow-color: rgba(15, 23, 42, 0.55);
+}
+
+[data-theme="dark"] {
+  --shadow-color: rgba(0, 0, 0, 0.75);
+}