bug: tactical-amber CTA gradient now follows branding color

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%);
   }
 }
 
@@ -284,13 +292,13 @@ 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,
-    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),

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(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]">

components/clips/ClipDetailModal.vue

@@ -1262,39 +1262,39 @@ 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%);
+  color: hsl(var(--tac-amber-foreground));
   font-weight: 700;
   letter-spacing: 0.18em;
   box-shadow:
     0 0 0 1px hsl(var(--tac-amber) / 0.35),
     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);
   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%);
+  color: hsl(var(--tac-amber-foreground));
   border-color: hsl(var(--tac-amber));
   box-shadow:
     0 0 0 1px hsl(var(--tac-amber) / 0.55),
     0 12px 28px -6px hsl(var(--tac-amber) / 0.75),
     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);

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(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,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(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" />

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>

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(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" />

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(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"

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"

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(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 =