themes lol

src/features/bracket/components/bracket-pending.tsx

@@ -9,7 +9,7 @@ export function BracketPending() {
         p={0}
         style={{
           overflow: "hidden",
-          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",
           minHeight: "70dvh",

src/features/bracket/components/bracket-view.tsx

@@ -89,7 +89,7 @@ const BracketView: React.FC<BracketViewProps> = ({ bracket, showControls, groupC
       h={`calc(${height})`}
       className={styles["bracket-container"]}
       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",
       }}

src/features/bracket/components/match-card.tsx

@@ -269,7 +269,11 @@ export const MatchCard: React.FC<MatchCardProps> = ({
               w={showToolbar || showEditButton ? 200 : 220}
               withBorder
               pos="relative"
-              className={canTap ? styles["tappable-card"] : undefined}
+              className={
+                canTap
+                  ? `flxn-bracket-card ${styles["tappable-card"]}`
+                  : "flxn-bracket-card"
+              }
               onClick={canTap ? () => onTap!(match) : undefined}
               role={canTap ? "button" : undefined}
               tabIndex={canTap ? 0 : undefined}

src/features/bracket/components/match-slot.tsx

@@ -83,10 +83,10 @@ export const MatchSlot: React.FC<MatchSlotProps> = ({
                   size={14}
                   weight="fill"
                   style={{
-                    color: 'gold',
+                    color: 'var(--flxn-gold)',
                     marginLeft: '2px',
                     marginTop: '-1px',
-                    filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.3))',
+                    filter: 'drop-shadow(0 1px 1px var(--flxn-pop-shadow))',
                     flexShrink: 0
                   }}
                 />