bug: tactical-amber CTA gradient now follows branding color

[Flegma]

Problem

The prominent "tactical amber" CTA gradient hardcoded two of its three gradient stops, so it never fully followed the App Settings → Branding → Tactical Accent color (--tac-amber).

linear-gradient(135deg,
  hsl(36 100% 65%)      0%    (hardcoded orange)
  hsl(var(--tac-amber)) 50%   (branding)
  hsl(28 90% 52%)       100%  (hardcoded orange)
)

Only the middle stop, border and glow tracked the branding color. Setting a non-amber Tactical Accent (for example a blue brand) produced an orange -> accent -> orange gradient instead of a cohesive branded button.

Fix

Introduce two CSS custom properties derived from --tac-amber and point every CTA gradient endpoint at them:

--tac-amber-cta-from: color-mix(in hsl, hsl(var(--tac-amber)), white 15%); /* lighter tint */
--tac-amber-cta-to:   color-mix(in hsl, hsl(var(--tac-amber)), black 12%); /* darker shade */

Now the whole gradient (light tint, base, dark shade) tracks the Tactical Accent color.

Resulting endpoints

Tactical Accent	from (0%)	mid (50%)	to (100%)
default amber 33 94% 58%	hsl(33 80% 64%)	hsl(33 94% 58%)	hsl(33 83% 51%)
blue 241 76% 58%	hsl(241 65% 64%)	hsl(241 76% 58%)	hsl(241 67% 51%)

With the default amber the gradient is visually ~unchanged from the old hardcoded hsl(36 100% 65%) / hsl(28 90% 52%). A custom accent now yields a clean single-hue gradient.

Affected surfaces

• Player profile Play button (pages/players/[id].vue)
• Match and Tournament submit buttons (MatchForm.vue, TournamentForm.vue)
• Join match button (MatchTableRow.vue) and lobby play button (MatchLobbies.vue)
• Shared .tac-amber-cta class (assets/css/tailwind.css), used by the settings save bar, match active alert, matchmaking confirm and veto confirm pills
• Clip action tile (components/clips/ClipDetailModal.vue)
• Dark-mode topographic background tint (layouts/components/TopoBackground.vue)

Out of scope (intentionally untouched)

Semantically-orange colors that are not branding: bronze / 3rd-place trophy (hsl(28 70% 52%)), Faceit rank orange (hsl(28 95% 55%)), and the T-side replay color (hsl(28 100% 55%)).

Notes

• color-mix() is already used throughout this repo (for example ReplayChrome.vue), so the PostCSS pipeline handles it; it is supported in all current browsers.
• In MatchForm.vue the access-toggle base and hover gradients are now identical; the hover declaration is kept deliberately so the active toggle's gradient is not overridden by the base button's hover:bg-muted.

Testing

• Confirmed no hardcoded CTA-amber stops remain and the semantic colors above are preserved.
• Simulated the color-mix HSL math for default and blue accents (see table).
• Suggested visual check: set App Settings → Branding → Tactical Accent (light and dark) to a non-amber color and confirm the Play / submit buttons render in that hue.

[Flegma]

Added a follow-up commit (fd06720) addressing the foreground/contrast point from review: the CTAs hardcoded near-black text (hsl(0 0% 8%)/6%), so a dark Tactical Accent could render unreadable text. They now use --tac-amber-foreground (the existing color_tactical_amber_foreground branding token, already used by MatchActiveAlert/MatchmakingConfirm). Default stays near-black, so light/amber accents are unchanged; dark accents can now set a light foreground. The clip action-tile corner accents were switched too for coherence.