From 269782f72f4d198c2c6acd7dc12a55efcaadc80d Mon Sep 17 00:00:00 2001
From: Flegma <Flegma@users.noreply.github.com>
Date: Thu, 18 Jun 2026 12:08:55 +0200
Subject: [PATCH 1/2] bug: tactical-amber CTA gradient now follows branding
 color

The tactical-amber CTA gradient (Play button, match/tournament submit,
join-match, lobby play, settings save bar, veto pills, clip action tile)
hardcoded its two gradient endpoints: hsl(36 100% 65%) and hsl(28 90% 52%).
Only the middle stop, border and glow used --tac-amber, so a non-amber
"Tactical Accent" branding color produced an orange-to-accent-to-orange
gradient instead of a cohesive branded button.

Derive both endpoints from --tac-amber with color-mix (a lighter tint and a
darker shade) so the whole gradient tracks the Tactical Accent color. With the
default amber the gradient is visually unchanged; a custom accent (e.g. blue)
now yields a clean single-hue gradient.

Also points the dark-mode topo background tint at --tac-amber for consistency.
---
 assets/css/tailwind.css                  | 12 ++++++++++--
 components/MatchTableRow.vue             |  2 +-
 components/clips/ClipDetailModal.vue     |  8 ++++----
 components/match/MatchForm.vue           |  4 ++--
 components/tournament/TournamentForm.vue |  2 +-
 layouts/components/MatchLobbies.vue      |  2 +-
 layouts/components/TopoBackground.vue    |  4 ++--
 pages/players/[id].vue                   |  2 +-
 8 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index ebb702ae..8bd94abf 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -78,6 +78,11 @@
 
     --tac-amber: 33 94% 58%;
     --tac-amber-foreground: 0 0% 10%;
+
+    /* CTA gradient endpoints derived from --tac-amber so the whole gradient
+       follows branding (lighter tint -> base -> darker shade). */
+    --tac-amber-cta-from: color-mix(in hsl, hsl(var(--tac-amber)), white 15%);
+    --tac-amber-cta-to: color-mix(in hsl, hsl(var(--tac-amber)), black 12%);
   }
 
   .dark {
@@ -146,6 +151,9 @@
 
     --tac-amber: 33 94% 58%;
     --tac-amber-foreground: 0 0% 10%;
+
+    --tac-amber-cta-from: color-mix(in hsl, hsl(var(--tac-amber)), white 15%);
+    --tac-amber-cta-to: color-mix(in hsl, hsl(var(--tac-amber)), black 12%);
   }
 }
 
@@ -288,9 +296,9 @@ mark {
   border-color: hsl(var(--tac-amber));
   background: linear-gradient(
     135deg,
-    hsl(36 100% 65%) 0%,
+    var(--tac-amber-cta-from) 0%,
     hsl(var(--tac-amber)) 50%,
-    hsl(28 90% 52%) 100%
+    var(--tac-amber-cta-to) 100%
   );
   box-shadow:
     0 0 0 1px hsl(var(--tac-amber) / 0.35),
diff --git a/components/MatchTableRow.vue b/components/MatchTableRow.vue
index c528e3df..11c4ce7c 100644
--- a/components/MatchTableRow.vue
+++ b/components/MatchTableRow.vue
@@ -144,7 +144,7 @@ import MatchOverviewDrawer from "~/components/match/MatchOverviewDrawer.vue";
           <button
             v-if="canJoinMatch"
             type="button"
-            class="group/join relative inline-flex items-center isolate px-[0.7rem] py-[0.28rem] font-sans text-[0.68rem] font-bold tracking-[0.16em] uppercase text-[hsl(0_0%_8%)] [background:linear-gradient(135deg,hsl(36_100%_65%)_0%,hsl(var(--tac-amber))_50%,hsl(28_90%_52%)_100%)] border border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.35),0_4px_14px_-4px_hsl(var(--tac-amber)/0.5)] [transition:transform_180ms_cubic-bezier(0.4,0,0.2,1),box-shadow_180ms_ease] cursor-pointer overflow-hidden whitespace-nowrap hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.55),0_10px_24px_-4px_hsl(var(--tac-amber)/0.7),0_0_20px_hsl(var(--tac-amber)/0.3)] active:translate-y-0"
+            class="group/join relative inline-flex items-center isolate px-[0.7rem] py-[0.28rem] font-sans text-[0.68rem] font-bold tracking-[0.16em] uppercase text-[hsl(0_0%_8%)] [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_50%,var(--tac-amber-cta-to)_100%)] border border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.35),0_4px_14px_-4px_hsl(var(--tac-amber)/0.5)] [transition:transform_180ms_cubic-bezier(0.4,0,0.2,1),box-shadow_180ms_ease] cursor-pointer overflow-hidden whitespace-nowrap hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.55),0_10px_24px_-4px_hsl(var(--tac-amber)/0.7),0_0_20px_hsl(var(--tac-amber)/0.3)] active:translate-y-0"
             @click.stop="navigateToMatch(match.id, $event)"
           >
             <span class="relative z-[1] inline-flex items-center gap-[0.45rem]">
diff --git a/components/clips/ClipDetailModal.vue b/components/clips/ClipDetailModal.vue
index 429fad3b..6b232611 100644
--- a/components/clips/ClipDetailModal.vue
+++ b/components/clips/ClipDetailModal.vue
@@ -1262,9 +1262,9 @@ onMounted(() => {
   border-color: hsl(var(--tac-amber));
   background: linear-gradient(
     135deg,
-    hsl(36 100% 65%) 0%,
+    var(--tac-amber-cta-from) 0%,
     hsl(var(--tac-amber)) 50%,
-    hsl(28 90% 52%) 100%
+    var(--tac-amber-cta-to) 100%
   );
   color: hsl(0 0% 8%);
   font-weight: 700;
@@ -1281,9 +1281,9 @@ onMounted(() => {
   transform: translateY(-1px);
   background: linear-gradient(
     135deg,
-    hsl(36 100% 70%) 0%,
+    color-mix(in hsl, var(--tac-amber-cta-from), white 12%) 0%,
     hsl(var(--tac-amber)) 50%,
-    hsl(28 92% 56%) 100%
+    color-mix(in hsl, var(--tac-amber-cta-to), white 10%) 100%
   );
   color: hsl(0 0% 6%);
   border-color: hsl(var(--tac-amber));
diff --git a/components/match/MatchForm.vue b/components/match/MatchForm.vue
index 89c4533d..2ca3505a 100644
--- a/components/match/MatchForm.vue
+++ b/components/match/MatchForm.vue
@@ -48,7 +48,7 @@ const tickClasses = "w-[10px] h-[2px] bg-[hsl(var(--tac-amber))]";
 const accessBtnClasses =
   "inline-flex items-center justify-center gap-[0.45rem] px-[0.65rem] py-[0.6rem] text-[0.8rem] font-semibold tracking-[0.12em] uppercase bg-[hsl(var(--muted)/0.3)] border border-border text-muted-foreground [transition:color_140ms_ease,background_140ms_ease,border-color_140ms_ease] cursor-pointer hover:text-foreground hover:bg-[hsl(var(--muted)/0.5)]";
 const accessBtnActiveClasses =
-  "!text-[hsl(0_0%_8%)] [background:linear-gradient(135deg,hsl(36_100%_65%)_0%,hsl(var(--tac-amber))_100%)] !border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_6px_16px_-6px_hsl(var(--tac-amber)/0.5)] hover:[background:linear-gradient(135deg,hsl(36_100%_68%)_0%,hsl(var(--tac-amber))_100%)]";
+  "!text-[hsl(0_0%_8%)] [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_100%)] !border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_6px_16px_-6px_hsl(var(--tac-amber)/0.5)] hover:[background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_100%)]";
 const tacLabelClasses =
   "font-mono text-[0.7rem] tracking-[0.22em] uppercase text-muted-foreground";
 </script>
@@ -217,7 +217,7 @@ const tacLabelClasses =
       <button
         type="submit"
         :disabled="submitting"
-        class="group/submit relative isolate inline-flex items-center px-12 py-4 font-bold text-base tracking-[0.22em] uppercase text-[hsl(0_0%_8%)] [background:linear-gradient(135deg,hsl(36_100%_65%)_0%,hsl(var(--tac-amber))_50%,hsl(28_90%_52%)_100%)] border border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_8px_24px_-6px_hsl(var(--tac-amber)/0.6)] [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1),box-shadow_200ms_ease] cursor-pointer overflow-hidden hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_14px_36px_-6px_hsl(var(--tac-amber)/0.8),0_0_28px_hsl(var(--tac-amber)/0.35)] active:translate-y-0 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0"
+        class="group/submit relative isolate inline-flex items-center px-12 py-4 font-bold text-base tracking-[0.22em] uppercase text-[hsl(0_0%_8%)] [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_50%,var(--tac-amber-cta-to)_100%)] border border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_8px_24px_-6px_hsl(var(--tac-amber)/0.6)] [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1),box-shadow_200ms_ease] cursor-pointer overflow-hidden hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_14px_36px_-6px_hsl(var(--tac-amber)/0.8),0_0_28px_hsl(var(--tac-amber)/0.35)] active:translate-y-0 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0"
       >
         <span class="relative z-[1] inline-flex items-center gap-3">
           <Spinner v-if="submitting" class="w-5 h-5" />
diff --git a/components/tournament/TournamentForm.vue b/components/tournament/TournamentForm.vue
index a5cf5cae..158a202a 100644
--- a/components/tournament/TournamentForm.vue
+++ b/components/tournament/TournamentForm.vue
@@ -141,7 +141,7 @@ import MatchOptions from "~/components/MatchOptions.vue";
       <button
         type="submit"
         :disabled="submitting || Object.keys(form.errors).length > 0"
-        class="group/submit relative isolate inline-flex items-center px-12 py-4 font-bold text-base tracking-[0.22em] uppercase text-[hsl(0_0%_8%)] [background:linear-gradient(135deg,hsl(36_100%_65%)_0%,hsl(var(--tac-amber))_50%,hsl(28_90%_52%)_100%)] border border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_8px_24px_-6px_hsl(var(--tac-amber)/0.6)] [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1),box-shadow_200ms_ease] cursor-pointer overflow-hidden hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_14px_36px_-6px_hsl(var(--tac-amber)/0.8),0_0_28px_hsl(var(--tac-amber)/0.35)] active:translate-y-0 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0"
+        class="group/submit relative isolate inline-flex items-center px-12 py-4 font-bold text-base tracking-[0.22em] uppercase text-[hsl(0_0%_8%)] [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_50%,var(--tac-amber-cta-to)_100%)] border border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_8px_24px_-6px_hsl(var(--tac-amber)/0.6)] [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1),box-shadow_200ms_ease] cursor-pointer overflow-hidden hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_14px_36px_-6px_hsl(var(--tac-amber)/0.8),0_0_28px_hsl(var(--tac-amber)/0.35)] active:translate-y-0 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0"
       >
         <span class="relative z-[1] inline-flex items-center gap-3">
           <Spinner v-if="submitting" class="w-5 h-5" />
diff --git a/layouts/components/MatchLobbies.vue b/layouts/components/MatchLobbies.vue
index a7c1b330..52ddfb21 100644
--- a/layouts/components/MatchLobbies.vue
+++ b/layouts/components/MatchLobbies.vue
@@ -63,7 +63,7 @@ const isElevatedUser = computed(() =>
           v-if="showPlayButton"
           to="/play"
           :title="$t('layouts.lobby_panel.find_match')"
-          class="group/play relative isolate mr-2 inline-flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full border border-[hsl(var(--tac-amber))] text-[hsl(0_0%_8%)] no-underline [background:linear-gradient(135deg,hsl(36_100%_65%)_0%,hsl(var(--tac-amber))_50%,hsl(28_90%_52%)_100%)] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_6px_20px_-6px_hsl(var(--tac-amber)/0.6)] transition-[transform,box-shadow] duration-200 ease-out hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_12px_32px_-6px_hsl(var(--tac-amber)/0.8),0_0_24px_hsl(var(--tac-amber)/0.35)] active:translate-y-0"
+          class="group/play relative isolate mr-2 inline-flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full border border-[hsl(var(--tac-amber))] text-[hsl(0_0%_8%)] no-underline [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_50%,var(--tac-amber-cta-to)_100%)] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_6px_20px_-6px_hsl(var(--tac-amber)/0.6)] transition-[transform,box-shadow] duration-200 ease-out hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_12px_32px_-6px_hsl(var(--tac-amber)/0.8),0_0_24px_hsl(var(--tac-amber)/0.35)] active:translate-y-0"
         >
           <Play
             class="relative z-[1] h-4 w-4 fill-current transition-transform duration-300 group-hover/play:scale-110"
diff --git a/layouts/components/TopoBackground.vue b/layouts/components/TopoBackground.vue
index 941d4294..2ed88d7e 100644
--- a/layouts/components/TopoBackground.vue
+++ b/layouts/components/TopoBackground.vue
@@ -56,7 +56,7 @@ withDefaults(defineProps<{ animated?: boolean }>(), { animated: false });
            frame, stacked strokes don't. -->
       <template v-if="animated">
         <g
-          class="text-foreground/[0.12] dark:text-[hsl(36_100%_70%/0.18)]"
+          class="text-foreground/[0.12] dark:text-[hsl(var(--tac-amber)/0.18)]"
           fill="none"
           stroke="currentColor"
           stroke-width="4"
@@ -77,7 +77,7 @@ withDefaults(defineProps<{ animated?: boolean }>(), { animated: false });
           />
         </g>
         <g
-          class="text-foreground/55 dark:text-[hsl(36_100%_70%/0.6)]"
+          class="text-foreground/55 dark:text-[hsl(var(--tac-amber)/0.6)]"
           fill="none"
           stroke="currentColor"
           stroke-width="1.4"
diff --git a/pages/players/[id].vue b/pages/players/[id].vue
index 67d2469a..0baeda39 100644
--- a/pages/players/[id].vue
+++ b/pages/players/[id].vue
@@ -1647,7 +1647,7 @@ const playerHeroSteamLinkClasses =
 const playerHeroRightActionsClasses =
   "mt-auto flex flex-col items-stretch gap-3 pt-6";
 const playerHeroPlayClasses =
-  "group/play relative isolate inline-flex w-full cursor-pointer items-center justify-center overflow-hidden border font-sans text-[0.85rem] font-bold uppercase tracking-[0.18em] no-underline transition-[transform,box-shadow] duration-200 ease-out hover:-translate-y-px active:translate-y-0 py-[0.7rem] px-4 text-[hsl(0_0%_8%)] border-[hsl(var(--tac-amber))] [background:linear-gradient(135deg,hsl(36_100%_65%)_0%,hsl(var(--tac-amber))_50%,hsl(28_90%_52%)_100%)] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_6px_20px_-6px_hsl(var(--tac-amber)/0.6)] hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_12px_32px_-6px_hsl(var(--tac-amber)/0.8),0_0_24px_hsl(var(--tac-amber)/0.35)]";
+  "group/play relative isolate inline-flex w-full cursor-pointer items-center justify-center overflow-hidden border font-sans text-[0.85rem] font-bold uppercase tracking-[0.18em] no-underline transition-[transform,box-shadow] duration-200 ease-out hover:-translate-y-px active:translate-y-0 py-[0.7rem] px-4 text-[hsl(0_0%_8%)] border-[hsl(var(--tac-amber))] [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_50%,var(--tac-amber-cta-to)_100%)] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_6px_20px_-6px_hsl(var(--tac-amber)/0.6)] hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_12px_32px_-6px_hsl(var(--tac-amber)/0.8),0_0_24px_hsl(var(--tac-amber)/0.35)]";
 const playerHeroPlayInnerClasses =
   "relative z-[1] inline-flex items-center gap-[0.65rem]";
 const playerHeroPlayIconClasses =

From fd06720b21728e66203d84cb8040ac0f26ed77f5 Mon Sep 17 00:00:00 2001
From: Flegma <Flegma@users.noreply.github.com>
Date: Thu, 18 Jun 2026 12:47:29 +0200
Subject: [PATCH 2/2] bug: CTA button text follows tactical-accent foreground
 branding

The tactical-amber CTAs hardcoded near-black ink (hsl(0 0% 8%) / 6%) for their
text and the clip action-tile corner accents, so a dark Tactical Accent color
would leave unreadable text. Point them at --tac-amber-foreground (the existing
color_tactical_amber_foreground branding token, already used by MatchActiveAlert
and MatchmakingConfirm) so text contrast is brandable too. The default is
near-black, so light/amber accents are visually unchanged.
---
 assets/css/tailwind.css                  |  2 +-
 components/MatchTableRow.vue             |  2 +-
 components/clips/ClipDetailModal.vue     | 12 ++++++------
 components/match/MatchForm.vue           |  4 ++--
 components/teams/TeamForm.vue            |  2 +-
 components/tournament/TournamentForm.vue |  2 +-
 layouts/components/MatchLobbies.vue      |  2 +-
 pages/players/[id].vue                   |  2 +-
 8 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 8bd94abf..c66fab60 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -292,7 +292,7 @@ mark {
 }
 
 .tac-amber-cta {
-  color: hsl(0 0% 8%);
+  color: hsl(var(--tac-amber-foreground));
   border-color: hsl(var(--tac-amber));
   background: linear-gradient(
     135deg,
diff --git a/components/MatchTableRow.vue b/components/MatchTableRow.vue
index 11c4ce7c..aad8986f 100644
--- a/components/MatchTableRow.vue
+++ b/components/MatchTableRow.vue
@@ -144,7 +144,7 @@ import MatchOverviewDrawer from "~/components/match/MatchOverviewDrawer.vue";
           <button
             v-if="canJoinMatch"
             type="button"
-            class="group/join relative inline-flex items-center isolate px-[0.7rem] py-[0.28rem] font-sans text-[0.68rem] font-bold tracking-[0.16em] uppercase text-[hsl(0_0%_8%)] [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_50%,var(--tac-amber-cta-to)_100%)] border border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.35),0_4px_14px_-4px_hsl(var(--tac-amber)/0.5)] [transition:transform_180ms_cubic-bezier(0.4,0,0.2,1),box-shadow_180ms_ease] cursor-pointer overflow-hidden whitespace-nowrap hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.55),0_10px_24px_-4px_hsl(var(--tac-amber)/0.7),0_0_20px_hsl(var(--tac-amber)/0.3)] active:translate-y-0"
+            class="group/join relative inline-flex items-center isolate px-[0.7rem] py-[0.28rem] font-sans text-[0.68rem] font-bold tracking-[0.16em] uppercase text-[hsl(var(--tac-amber-foreground))] [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_50%,var(--tac-amber-cta-to)_100%)] border border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.35),0_4px_14px_-4px_hsl(var(--tac-amber)/0.5)] [transition:transform_180ms_cubic-bezier(0.4,0,0.2,1),box-shadow_180ms_ease] cursor-pointer overflow-hidden whitespace-nowrap hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.55),0_10px_24px_-4px_hsl(var(--tac-amber)/0.7),0_0_20px_hsl(var(--tac-amber)/0.3)] active:translate-y-0"
             @click.stop="navigateToMatch(match.id, $event)"
           >
             <span class="relative z-[1] inline-flex items-center gap-[0.45rem]">
diff --git a/components/clips/ClipDetailModal.vue b/components/clips/ClipDetailModal.vue
index 6b232611..c521b7c8 100644
--- a/components/clips/ClipDetailModal.vue
+++ b/components/clips/ClipDetailModal.vue
@@ -1266,7 +1266,7 @@ onMounted(() => {
     hsl(var(--tac-amber)) 50%,
     var(--tac-amber-cta-to) 100%
   );
-  color: hsl(0 0% 8%);
+  color: hsl(var(--tac-amber-foreground));
   font-weight: 700;
   letter-spacing: 0.18em;
   box-shadow:
@@ -1274,8 +1274,8 @@ onMounted(() => {
     0 6px 18px -6px hsl(var(--tac-amber) / 0.55);
 }
 .action-tile--primary::after {
-  border-top-color: hsl(0 0% 8% / 0.65);
-  border-right-color: hsl(0 0% 8% / 0.65);
+  border-top-color: hsl(var(--tac-amber-foreground) / 0.65);
+  border-right-color: hsl(var(--tac-amber-foreground) / 0.65);
 }
 .action-tile--primary:hover {
   transform: translateY(-1px);
@@ -1285,7 +1285,7 @@ onMounted(() => {
     hsl(var(--tac-amber)) 50%,
     color-mix(in hsl, var(--tac-amber-cta-to), white 10%) 100%
   );
-  color: hsl(0 0% 6%);
+  color: hsl(var(--tac-amber-foreground));
   border-color: hsl(var(--tac-amber));
   box-shadow:
     0 0 0 1px hsl(var(--tac-amber) / 0.55),
@@ -1293,8 +1293,8 @@ onMounted(() => {
     0 0 24px hsl(var(--tac-amber) / 0.35);
 }
 .action-tile--primary:hover::after {
-  border-top-color: hsl(0 0% 8%);
-  border-right-color: hsl(0 0% 8%);
+  border-top-color: hsl(var(--tac-amber-foreground));
+  border-right-color: hsl(var(--tac-amber-foreground));
 }
 .action-tile--primary:active {
   transform: translateY(0);
diff --git a/components/match/MatchForm.vue b/components/match/MatchForm.vue
index 2ca3505a..f64858f5 100644
--- a/components/match/MatchForm.vue
+++ b/components/match/MatchForm.vue
@@ -48,7 +48,7 @@ const tickClasses = "w-[10px] h-[2px] bg-[hsl(var(--tac-amber))]";
 const accessBtnClasses =
   "inline-flex items-center justify-center gap-[0.45rem] px-[0.65rem] py-[0.6rem] text-[0.8rem] font-semibold tracking-[0.12em] uppercase bg-[hsl(var(--muted)/0.3)] border border-border text-muted-foreground [transition:color_140ms_ease,background_140ms_ease,border-color_140ms_ease] cursor-pointer hover:text-foreground hover:bg-[hsl(var(--muted)/0.5)]";
 const accessBtnActiveClasses =
-  "!text-[hsl(0_0%_8%)] [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_100%)] !border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_6px_16px_-6px_hsl(var(--tac-amber)/0.5)] hover:[background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_100%)]";
+  "!text-[hsl(var(--tac-amber-foreground))] [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_100%)] !border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_6px_16px_-6px_hsl(var(--tac-amber)/0.5)] hover:[background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_100%)]";
 const tacLabelClasses =
   "font-mono text-[0.7rem] tracking-[0.22em] uppercase text-muted-foreground";
 </script>
@@ -217,7 +217,7 @@ const tacLabelClasses =
       <button
         type="submit"
         :disabled="submitting"
-        class="group/submit relative isolate inline-flex items-center px-12 py-4 font-bold text-base tracking-[0.22em] uppercase text-[hsl(0_0%_8%)] [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_50%,var(--tac-amber-cta-to)_100%)] border border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_8px_24px_-6px_hsl(var(--tac-amber)/0.6)] [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1),box-shadow_200ms_ease] cursor-pointer overflow-hidden hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_14px_36px_-6px_hsl(var(--tac-amber)/0.8),0_0_28px_hsl(var(--tac-amber)/0.35)] active:translate-y-0 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0"
+        class="group/submit relative isolate inline-flex items-center px-12 py-4 font-bold text-base tracking-[0.22em] uppercase text-[hsl(var(--tac-amber-foreground))] [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_50%,var(--tac-amber-cta-to)_100%)] border border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_8px_24px_-6px_hsl(var(--tac-amber)/0.6)] [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1),box-shadow_200ms_ease] cursor-pointer overflow-hidden hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_14px_36px_-6px_hsl(var(--tac-amber)/0.8),0_0_28px_hsl(var(--tac-amber)/0.35)] active:translate-y-0 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0"
       >
         <span class="relative z-[1] inline-flex items-center gap-3">
           <Spinner v-if="submitting" class="w-5 h-5" />
diff --git a/components/teams/TeamForm.vue b/components/teams/TeamForm.vue
index 5cac165e..3bc3c65f 100644
--- a/components/teams/TeamForm.vue
+++ b/components/teams/TeamForm.vue
@@ -16,7 +16,7 @@ const labelClasses =
   "font-mono text-[0.7rem] uppercase tracking-[0.18em] text-muted-foreground";
 
 const submitClasses =
-  "w-full bg-[hsl(var(--tac-amber))] hover:bg-[hsl(var(--tac-amber)_/_0.9)] text-[hsl(0_0%_8%)] font-sans font-bold uppercase tracking-[0.18em] disabled:opacity-60";
+  "w-full bg-[hsl(var(--tac-amber))] hover:bg-[hsl(var(--tac-amber)_/_0.9)] text-[hsl(var(--tac-amber-foreground))] font-sans font-bold uppercase tracking-[0.18em] disabled:opacity-60";
 </script>
 
 <template>
diff --git a/components/tournament/TournamentForm.vue b/components/tournament/TournamentForm.vue
index 158a202a..249ffa13 100644
--- a/components/tournament/TournamentForm.vue
+++ b/components/tournament/TournamentForm.vue
@@ -141,7 +141,7 @@ import MatchOptions from "~/components/MatchOptions.vue";
       <button
         type="submit"
         :disabled="submitting || Object.keys(form.errors).length > 0"
-        class="group/submit relative isolate inline-flex items-center px-12 py-4 font-bold text-base tracking-[0.22em] uppercase text-[hsl(0_0%_8%)] [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_50%,var(--tac-amber-cta-to)_100%)] border border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_8px_24px_-6px_hsl(var(--tac-amber)/0.6)] [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1),box-shadow_200ms_ease] cursor-pointer overflow-hidden hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_14px_36px_-6px_hsl(var(--tac-amber)/0.8),0_0_28px_hsl(var(--tac-amber)/0.35)] active:translate-y-0 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0"
+        class="group/submit relative isolate inline-flex items-center px-12 py-4 font-bold text-base tracking-[0.22em] uppercase text-[hsl(var(--tac-amber-foreground))] [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_50%,var(--tac-amber-cta-to)_100%)] border border-[hsl(var(--tac-amber))] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_8px_24px_-6px_hsl(var(--tac-amber)/0.6)] [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1),box-shadow_200ms_ease] cursor-pointer overflow-hidden hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_14px_36px_-6px_hsl(var(--tac-amber)/0.8),0_0_28px_hsl(var(--tac-amber)/0.35)] active:translate-y-0 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0"
       >
         <span class="relative z-[1] inline-flex items-center gap-3">
           <Spinner v-if="submitting" class="w-5 h-5" />
diff --git a/layouts/components/MatchLobbies.vue b/layouts/components/MatchLobbies.vue
index 52ddfb21..6f5bcdb7 100644
--- a/layouts/components/MatchLobbies.vue
+++ b/layouts/components/MatchLobbies.vue
@@ -63,7 +63,7 @@ const isElevatedUser = computed(() =>
           v-if="showPlayButton"
           to="/play"
           :title="$t('layouts.lobby_panel.find_match')"
-          class="group/play relative isolate mr-2 inline-flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full border border-[hsl(var(--tac-amber))] text-[hsl(0_0%_8%)] no-underline [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_50%,var(--tac-amber-cta-to)_100%)] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_6px_20px_-6px_hsl(var(--tac-amber)/0.6)] transition-[transform,box-shadow] duration-200 ease-out hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_12px_32px_-6px_hsl(var(--tac-amber)/0.8),0_0_24px_hsl(var(--tac-amber)/0.35)] active:translate-y-0"
+          class="group/play relative isolate mr-2 inline-flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full border border-[hsl(var(--tac-amber))] text-[hsl(var(--tac-amber-foreground))] no-underline [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_50%,var(--tac-amber-cta-to)_100%)] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_6px_20px_-6px_hsl(var(--tac-amber)/0.6)] transition-[transform,box-shadow] duration-200 ease-out hover:-translate-y-px hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_12px_32px_-6px_hsl(var(--tac-amber)/0.8),0_0_24px_hsl(var(--tac-amber)/0.35)] active:translate-y-0"
         >
           <Play
             class="relative z-[1] h-4 w-4 fill-current transition-transform duration-300 group-hover/play:scale-110"
diff --git a/pages/players/[id].vue b/pages/players/[id].vue
index 0baeda39..a1ef35ce 100644
--- a/pages/players/[id].vue
+++ b/pages/players/[id].vue
@@ -1647,7 +1647,7 @@ const playerHeroSteamLinkClasses =
 const playerHeroRightActionsClasses =
   "mt-auto flex flex-col items-stretch gap-3 pt-6";
 const playerHeroPlayClasses =
-  "group/play relative isolate inline-flex w-full cursor-pointer items-center justify-center overflow-hidden border font-sans text-[0.85rem] font-bold uppercase tracking-[0.18em] no-underline transition-[transform,box-shadow] duration-200 ease-out hover:-translate-y-px active:translate-y-0 py-[0.7rem] px-4 text-[hsl(0_0%_8%)] border-[hsl(var(--tac-amber))] [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_50%,var(--tac-amber-cta-to)_100%)] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_6px_20px_-6px_hsl(var(--tac-amber)/0.6)] hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_12px_32px_-6px_hsl(var(--tac-amber)/0.8),0_0_24px_hsl(var(--tac-amber)/0.35)]";
+  "group/play relative isolate inline-flex w-full cursor-pointer items-center justify-center overflow-hidden border font-sans text-[0.85rem] font-bold uppercase tracking-[0.18em] no-underline transition-[transform,box-shadow] duration-200 ease-out hover:-translate-y-px active:translate-y-0 py-[0.7rem] px-4 text-[hsl(var(--tac-amber-foreground))] border-[hsl(var(--tac-amber))] [background:linear-gradient(135deg,var(--tac-amber-cta-from)_0%,hsl(var(--tac-amber))_50%,var(--tac-amber-cta-to)_100%)] shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.4),0_6px_20px_-6px_hsl(var(--tac-amber)/0.6)] hover:shadow-[0_0_0_1px_hsl(var(--tac-amber)/0.6),0_12px_32px_-6px_hsl(var(--tac-amber)/0.8),0_0_24px_hsl(var(--tac-amber)/0.35)]";
 const playerHeroPlayInnerClasses =
   "relative z-[1] inline-flex items-center gap-[0.65rem]";
 const playerHeroPlayIconClasses =