refactor(css): migrate Login + file icons off legacy vars, delete variables.css

Phase 4 (final) of the "fully MUI" cleanup — no custom stylesheets remain
in src/admin (only the third-party quill.snow.css + leaflet.css imports).

- Login.tsx: every var(--glass-*/bg-*/text-*/accent-*/orb-*/border-*/
  font-*/transition) in its sx/inline styles is now an MUI token
  (bgcolor/color/borderColor: "background.paper" / "text.secondary" /
  "divider" / "primary.main"), a channel-alpha (rgba(var(--mui-palette-
  primary-mainChannel) / a)) for tints, or theme.applyStyles("dark", …)
  for the glass-card shadow. The card sx is now a (theme)=>({}) callback.
- Restores the orb drift animation via the MUI keyframes() helper — the
  @keyframes float had been dropped in Phase 1 (the dead-CSS scan missed
  its use inside an sx animation string); recovered verbatim from git.
- ProjectFileManager: the fallback file-icon color uses
  var(--mui-palette-text-secondary).
- variables.css deleted; its import removed from AdminApp (last one).

tsc -b --noEmit + npm run build clean. applyStyles dark-scheme output and
the channel-alpha pattern were both verified live in Chrome via the Quill
editor, which uses the identical constructs.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/admin/AdminApp.tsx

@@ -11,7 +11,6 @@ import MuiProvider from "./ui/MuiProvider";
 import { LoadingState } from "./ui";
 import Login from "./pages/Login";
 import Dashboard from "./pages/Dashboard";
-import "./variables.css";
 
 const Users = lazy(() => import("./pages/Users"));
 const Attendance = lazy(() => import("./pages/Attendance"));

src/admin/components/ProjectFileManager.tsx

@@ -135,7 +135,7 @@ function getFileIcon(type: string, extension?: string) {
   };
 
   const cfg = iconMap[ext] || {
-    color: "var(--text-muted)",
+    color: "var(--mui-palette-text-secondary)",
     path: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z",
   };
 

src/admin/pages/Login.tsx

@@ -5,6 +5,8 @@ import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import IconButton from "@mui/material/IconButton";
 import CircularProgress from "@mui/material/CircularProgress";
+import { keyframes } from "@mui/system";
+import type { Theme } from "@mui/material/styles";
 import { useAuth } from "../context/AuthContext";
 import { useAlert } from "../context/AlertContext";
 import { useTheme } from "../../context/ThemeContext";
@@ -14,6 +16,12 @@ import {
 } from "../utils/api";
 import { TextField, Button, CheckboxField, Field } from "../ui";
 
+// Drift animation for the decorative background orbs (was @keyframes float).
+const float = keyframes({
+  "0%, 100%": { transform: "translate(0, 0)" },
+  "50%": { transform: "translate(30px, -30px)" },
+});
+
 export default function Login() {
   const { login, verify2FA, isAuthenticated, loading: authLoading } = useAuth();
   const alert = useAlert();
@@ -142,7 +150,7 @@ export default function Login() {
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          bgcolor: "var(--bg-primary)",
+          bgcolor: "background.default",
         }}
       >
         <CircularProgress />
@@ -155,20 +163,24 @@ export default function Login() {
   }
 
   // Shared glass card sx (replaces .admin-login-card)
-  const cardSx = {
+  const cardSx = (theme: Theme) => ({
     width: "100%",
     maxWidth: 420,
     maxHeight: "calc(100dvh - 2rem)",
     p: { xs: 4, sm: 5 },
-    background: "var(--glass-bg)",
+    bgcolor: "background.paper",
     backdropFilter: "blur(20px)",
-    border: "1px solid var(--glass-border)",
+    border: "1px solid",
-    borderRadius: "var(--border-radius-lg)",
+    borderColor: "divider",
-    boxShadow: "var(--glass-shadow)",
+    borderRadius: "16px",
+    boxShadow: "0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04)",
+    ...theme.applyStyles("dark", {
+      boxShadow: "0 1px 3px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.15)",
+    }),
     position: "relative" as const,
     zIndex: 1,
     overflowY: "auto" as const,
-  };
+  });
 
   // Framer entrance + shake choreography for the card panels (unchanged)
   const cardMotion = {
@@ -199,7 +211,7 @@ export default function Login() {
         alignItems: "center",
         justifyContent: "center",
         p: 2,
-        background: "var(--bg-primary)",
+        bgcolor: "background.default",
         position: "relative",
         overflow: "hidden",
         boxSizing: "border-box",
@@ -215,10 +227,10 @@ export default function Login() {
           pointerEvents: "none",
           width: 400,
           height: 400,
-          background: "var(--orb-color-1)",
+          background: "rgba(var(--mui-palette-primary-mainChannel) / 0.16)",
           top: "10%",
           left: "20%",
-          animation: "float 20s ease-in-out infinite",
+          animation: `${float} 20s ease-in-out infinite`,
         }}
       />
       <Box
@@ -230,10 +242,10 @@ export default function Login() {
           pointerEvents: "none",
           width: 320,
           height: 320,
-          background: "var(--orb-color-2)",
+          background: "rgba(120, 119, 198, 0.13)",
           bottom: "20%",
           right: "15%",
-          animation: "float 25s ease-in-out infinite reverse",
+          animation: `${float} 25s ease-in-out infinite reverse`,
         }}
       />
 
@@ -247,17 +259,18 @@ export default function Login() {
           right: "1rem",
           width: 44,
           height: 44,
-          background: "var(--glass-bg)",
+          bgcolor: "background.paper",
           backdropFilter: "blur(10px)",
-          border: "1px solid var(--glass-border)",
+          border: "1px solid",
-          color: "var(--text-secondary)",
+          borderColor: "divider",
+          color: "text.secondary",
           overflow: "hidden",
           zIndex: 10,
-          transition: "var(--transition)",
+          transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
           "&:hover": {
-            background: "var(--glass-bg-solid)",
+            bgcolor: "background.paper",
-            color: "var(--text-primary)",
+            color: "text.primary",
-            borderColor: "var(--border-color-hover)",
+            borderColor: "rgba(var(--mui-palette-text-primaryChannel) / 0.15)",
             transform: "scale(1.05)",
           },
         }}
@@ -313,16 +326,13 @@ export default function Login() {
                 sx={{
                   fontSize: "1.5rem",
                   fontWeight: 700,
-                  color: "var(--text-primary)",
+                  color: "text.primary",
-                  fontFamily: "var(--font-heading)",
                   mb: 1,
                 }}
               >
                 Interní systém
               </Typography>
-              <Typography
+              <Typography sx={{ color: "text.secondary", fontSize: "0.95rem" }}>
-                sx={{ color: "var(--text-secondary)", fontSize: "0.95rem" }}
-              >
                 Přihlaste se ke svému účtu
               </Typography>
             </Box>
@@ -388,8 +398,9 @@ export default function Login() {
                   width: 56,
                   height: 56,
                   borderRadius: "50%",
-                  background: "var(--accent-light)",
+                  background:
-                  color: "var(--accent-color)",
+                    "rgba(var(--mui-palette-primary-mainChannel) / 0.1)",
+                  color: "primary.main",
                   mb: 2,
                 }}
               >
@@ -410,16 +421,13 @@ export default function Login() {
                 sx={{
                   fontSize: "1.5rem",
                   fontWeight: 700,
-                  color: "var(--text-primary)",
+                  color: "text.primary",
-                  fontFamily: "var(--font-heading)",
                   mb: 1,
                 }}
               >
                 Dvoufaktorové ověření
               </Typography>
-              <Typography
+              <Typography sx={{ color: "text.secondary", fontSize: "0.95rem" }}>
-                sx={{ color: "var(--text-secondary)", fontSize: "0.95rem" }}
-              >
                 {useBackupCode
                   ? "Zadejte jeden ze záložních kódů"
                   : "Zadejte 6místný kód z autentizační aplikace"}
@@ -492,12 +500,12 @@ export default function Login() {
                   setTotpCode("");
                 }}
                 sx={{
-                  color: "var(--text-secondary)",
+                  color: "text.secondary",
                   fontSize: "0.875rem",
                   fontWeight: 400,
                   textTransform: "none",
                   "&:hover": {
-                    color: "var(--text-primary)",
+                    color: "text.primary",
                     textDecoration: "underline",
                     background: "transparent",
                   },
@@ -511,12 +519,12 @@ export default function Login() {
                 variant="text"
                 onClick={handleBack}
                 sx={{
-                  color: "var(--text-secondary)",
+                  color: "text.secondary",
                   fontSize: "0.875rem",
                   fontWeight: 400,
                   textTransform: "none",
                   "&:hover": {
-                    color: "var(--text-primary)",
+                    color: "text.primary",
                     textDecoration: "underline",
                     background: "transparent",
                   },

src/admin/variables.css

@@ -1,164 +0,0 @@
-/* ============================================================================
-   CSS Variables
-   ============================================================================ */
-
-:root {
-  /* Spacing scale */
-  --space-1: 0.25rem;
-  --space-2: 0.5rem;
-  --space-3: 0.75rem;
-  --space-4: 1rem;
-  --space-5: 1.25rem;
-  --space-6: 1.5rem;
-  --space-8: 2rem;
-  --space-10: 2.5rem;
-  --space-12: 3rem;
-
-  /* Shared colors */
-  --accent-color: #d63031;
-  --accent-hover: #b52626;
-  --success: #22c55e;
-  --warning: #f59e0b;
-  --danger: #ef4444;
-  --info: #3b82f6;
-  --error: var(--danger);
-  --muted: #9ca3af;
-  --gradient: #d63031;
-  --gradient-subtle: rgba(214, 48, 49, 0.9);
-
-  /* Shared layout */
-  --border-radius: 10px;
-  --border-radius-sm: 8px;
-  --border-radius-lg: 16px;
-  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-
-  /* Motion durations (respect prefers-reduced-motion in code) */
-  --motion-fast: 0.2s;
-  --motion-base: 0.25s;
-  --motion-slow: 0.5s;
-  --font-heading: "Urbanist", sans-serif;
-  --font-body: "Plus Jakarta Sans", sans-serif;
-  --font-mono: "DM Mono", "Menlo", monospace;
-  --safe-top: env(safe-area-inset-top, 0px);
-  --safe-bottom: env(safe-area-inset-bottom, 0px);
-  --safe-left: env(safe-area-inset-left, 0px);
-  --safe-right: env(safe-area-inset-right, 0px);
-  --navbar-height: calc(76px + var(--safe-top));
-}
-
-/* ---- Dark theme ---- */
-[data-theme="dark"] {
-  --bg-primary: #0f0f0f;
-  --bg-secondary: #171717;
-  --bg-tertiary: #1e1e1e;
-  --text-primary: #ffffff;
-  --text-secondary: #a0a0a0;
-  --text-muted: #666666;
-  --text-tertiary: #555555;
-  --border-color: rgba(255, 255, 255, 0.08);
-  --border-color-hover: rgba(255, 255, 255, 0.15);
-  --glass-bg: #171717;
-  --glass-bg-solid: #171717;
-  --glass-border: rgba(255, 255, 255, 0.08);
-  --glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.15);
-  --card-bg: #1a1a1a;
-  --card-bg-hover: #1e1e1e;
-  --input-bg: #1a1a1a;
-  --glow-color: rgba(214, 48, 49, 0.15);
-  --accent-light: rgba(214, 48, 49, 0.1);
-  --accent-soft: #2a1a1a;
-  --accent-glow: rgba(214, 48, 49, 0.3);
-  --success-light: rgba(34, 197, 94, 0.1);
-  --success-soft: #1a2a1e;
-  --warning-light: rgba(245, 158, 11, 0.1);
-  --warning-soft: #2a2518;
-  --danger-light: rgba(239, 68, 68, 0.1);
-  --danger-soft: #2a1a1a;
-  --info-light: rgba(59, 130, 246, 0.1);
-  --info-soft: #1a1e2a;
-  --muted-light: rgba(107, 114, 128, 0.15);
-  --orb-color-1: rgba(214, 48, 49, 0.2);
-  --orb-color-2: rgba(120, 119, 198, 0.15);
-  --calendar-icon-filter: invert(1);
-  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
-  --table-row-hover: rgba(255, 255, 255, 0.02);
-  --row-current: color-mix(in srgb, var(--success) 5%, transparent);
-  --row-current-hover: color-mix(in srgb, var(--success) 8%, transparent);
-  --row-draft: color-mix(in srgb, var(--warning) 6%, transparent);
-  --row-expired: color-mix(in srgb, var(--danger) 5%, transparent);
-}
-
-/* ---- Light theme ---- */
-[data-theme="light"] {
-  --success: #15803d;
-  --warning: #b45309;
-  --danger: #b91c1c;
-  --info: #1d4ed8;
-  --accent-color: #c73030;
-  --accent-hover: #b52828;
-  --muted: #6b7280;
-  --bg-primary: #f4f3f1;
-  --bg-secondary: #ffffff;
-  --bg-tertiary: #eeecea;
-  --text-primary: #1a1a1a;
-  --text-secondary: #555555;
-  --text-muted: #717180;
-  --text-tertiary: #8a8a96;
-  --border-color: rgba(0, 0, 0, 0.1);
-  --border-color-hover: rgba(0, 0, 0, 0.18);
-  --glass-bg: #ffffff;
-  --glass-bg-solid: #ffffff;
-  --glass-border: rgba(0, 0, 0, 0.08);
-  --glass-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
-  --card-bg: #ffffff;
-  --card-bg-hover: #ffffff;
-  --input-bg: #ffffff;
-  --glow-color: rgba(222, 58, 58, 0.08);
-  --accent-light: rgba(222, 58, 58, 0.08);
-  --accent-soft: #fff0f0;
-  --accent-glow: rgba(222, 58, 58, 0.15);
-  --success-light: rgba(34, 197, 94, 0.1);
-  --success-soft: #e8fbf7;
-  --warning-light: rgba(245, 158, 11, 0.1);
-  --warning-soft: #fef9ec;
-  --danger-light: rgba(239, 68, 68, 0.1);
-  --danger-soft: #fef2f2;
-  --info-light: rgba(59, 130, 246, 0.1);
-  --info-soft: #ebf3fd;
-  --muted-light: rgba(107, 114, 128, 0.12);
-  --calendar-icon-filter: none;
-  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
-  --table-row-hover: rgba(0, 0, 0, 0.03);
-  --row-current: var(--success-soft);
-  --row-current-hover: color-mix(in srgb, var(--success) 12%, transparent);
-  --row-draft: var(--warning-soft);
-  --row-expired: var(--danger-soft);
-  --orb-color-1: rgba(214, 48, 49, 0.12);
-  --orb-color-2: rgba(120, 119, 198, 0.1);
-}
-
-/* Light mode - jemnejsi stiny */
-[data-theme="light"] .admin-toast {
-  box-shadow:
-    0 2px 8px rgba(0, 0, 0, 0.08),
-    0 1px 3px rgba(0, 0, 0, 0.06);
-}
-
-[data-theme="light"] .react-datepicker {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
-}
-
-[data-theme="light"] .admin-rich-editor .ql-snow .ql-picker-options,
-[data-theme="light"] .admin-rich-editor .ql-snow .ql-tooltip {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-}
-
-[data-theme="light"] .admin-customer-dropdown,
-[data-theme="light"] .offers-template-menu {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-}
-
-[data-theme="light"] .dash-quick-btn:hover {
-  filter: brightness(0.9);
-}