themes lol

src/features/tournaments/components/podium.tsx

@@ -14,26 +14,20 @@ type PodiumTier = "first" | "second" | "third";
 
 const tierStyles: Record<PodiumTier, React.CSSProperties> = {
   first: {
-    background:
-      "light-dark(color-mix(in srgb, var(--mantine-color-yellow-4) 10%, var(--mantine-color-white)), color-mix(in srgb, var(--mantine-color-yellow-8) 16%, var(--mantine-color-dark-6)))",
-    border:
-      "1px solid light-dark(color-mix(in srgb, var(--mantine-color-yellow-6) 45%, var(--mantine-color-gray-3)), color-mix(in srgb, var(--mantine-color-yellow-6) 35%, var(--mantine-color-dark-4)))",
+    background: "var(--flxn-podium-1-bg)",
+    border: "1px solid var(--flxn-podium-1-border)",
     borderRadius: "var(--mantine-radius-md)",
     boxShadow: "var(--mantine-shadow-md)",
   },
   second: {
-    background:
-      "light-dark(color-mix(in srgb, var(--mantine-color-gray-5) 10%, var(--mantine-color-white)), color-mix(in srgb, var(--mantine-color-gray-5) 10%, var(--mantine-color-dark-6)))",
-    border:
-      "1px solid light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
+    background: "var(--flxn-podium-2-bg)",
+    border: "1px solid var(--flxn-podium-2-border)",
     borderRadius: "var(--mantine-radius-md)",
     boxShadow: "var(--mantine-shadow-xs)",
   },
   third: {
-    background:
-      "light-dark(color-mix(in srgb, var(--mantine-color-orange-5) 8%, var(--mantine-color-white)), color-mix(in srgb, var(--mantine-color-orange-9) 14%, var(--mantine-color-dark-6)))",
-    border:
-      "1px solid light-dark(color-mix(in srgb, var(--mantine-color-orange-6) 35%, var(--mantine-color-gray-3)), color-mix(in srgb, var(--mantine-color-orange-7) 30%, var(--mantine-color-dark-4)))",
+    background: "var(--flxn-podium-3-bg)",
+    border: "1px solid var(--flxn-podium-3-border)",
     borderRadius: "var(--mantine-radius-md)",
     boxShadow: "var(--mantine-shadow-xs)",
   },
@@ -54,8 +48,7 @@ const tierConfig: Record<
   first: {
     color: "yellow",
     label: msg`Champions`,
-    labelColor:
-      "light-dark(var(--mantine-color-yellow-8), var(--mantine-color-yellow-4))",
+    labelColor: "var(--flxn-podium-1-label)",
     icon: <CrownIcon size={24} />,
     iconSize: "xl",
     padding: "md",
@@ -64,8 +57,7 @@ const tierConfig: Record<
   second: {
     color: "gray",
     label: msg`2nd place`,
-    labelColor:
-      "light-dark(var(--mantine-color-gray-6), var(--mantine-color-gray-4))",
+    labelColor: "var(--flxn-podium-2-label)",
     icon: <MedalIcon size={20} />,
     iconSize: "lg",
     padding: "xs",
@@ -74,8 +66,7 @@ const tierConfig: Record<
   third: {
     color: "orange",
     label: msg`3rd place`,
-    labelColor:
-      "light-dark(var(--mantine-color-orange-8), var(--mantine-color-orange-4))",
+    labelColor: "var(--flxn-podium-3-label)",
     icon: <MedalIcon size={18} />,
     iconSize: "lg",
     padding: "xs",

src/features/tournaments/components/setup-group-stage.tsx

@@ -320,7 +320,7 @@ const SetupGroupStage: React.FC<SetupGroupStageProps> = ({
               </Text>
               <Box
                 style={{
-                  backgroundImage: `radial-gradient(circle, var(--mantine-color-default-border) 1px, transparent 1px)`,
+                  backgroundImage: `radial-gradient(circle, var(--flxn-dotgrid-color) 1px, transparent 1px)`,
                   backgroundSize: "16px 16px",
                   backgroundPosition: "0 0, 8px 8px",
                   padding: "1rem",

src/features/tournaments/components/started-tournament/carousel.module.css

@@ -11,6 +11,9 @@
     height: 6px;
     border-radius: 3px;
     background-color: var(--mantine-color-default-border);
+    /* Mantine ships box-shadow: var(--mantine-shadow-sm) on indicators;
+       themes with hard offset shadow tokens render it as a doubled dot. */
+    box-shadow: none;
 }
 
 .indicator.indicator[data-active] {

src/features/tournaments/components/started-tournament/sections/nav-grid.tsx

@@ -39,8 +39,12 @@ interface NavTileProps {
 
 /** A single square-ish nav tile with icon-over-label and press feedback. */
 export const NavTile = ({ label, Icon, onClick, disabled }: NavTileProps) => (
-  <UnstyledButton className={classes.tile} onClick={onClick} disabled={disabled}>
-    <span className={classes.icon}>
+  <UnstyledButton
+    className={`${classes.tile} flxn-tile`}
+    onClick={onClick}
+    disabled={disabled}
+  >
+    <span className={`${classes.icon} flxn-tile-icon`}>
       <Icon size={22} weight="bold" />
     </span>
     <Text size="xs" fw={600} lineClamp={2} lh={1.2}>