fix(frontend): unify legacy button composition

app/game-frontend/src/assets/main.css

@@ -1,5 +1,6 @@
 @import 'tailwindcss';
 @import './styles/tokens.css';
+@import './styles/legacy-controls.css';
 @import './styles/game-shell.css';
 @import './styles/ref-shell.css';
 
@@ -44,33 +45,3 @@ textarea {
     background-color: #172a52;
     background-image: var(--sammo-texture-blue);
 }
-
-.legacy-button {
-    display: inline-block;
-    border: 1px solid #12195b;
-    border-radius: 3px;
-    background: #141c65;
-    color: #fff;
-    padding: 5px 10px;
-    font-weight: 700;
-    line-height: 1.5;
-    cursor: pointer;
-}
-
-.legacy-button:hover,
-.legacy-button:focus,
-.legacy-button:active {
-    border-color: #0f154c;
-    background: #101651;
-    color: #fff;
-}
-
-.legacy-button:focus-visible {
-    outline: 2px solid #f39c12;
-    outline-offset: 1px;
-}
-
-.legacy-button:disabled {
-    cursor: default;
-    opacity: 0.65;
-}

app/game-frontend/src/assets/styles/legacy-controls.css

@@ -0,0 +1,117 @@
+.legacy-button {
+    display: inline-block;
+    box-sizing: border-box;
+    border: 1px solid var(--sammo-button-base1-border);
+    border-radius: 3px;
+    padding: 5px 10px;
+    background: var(--sammo-button-base1-bg);
+    color: #fff;
+    font: inherit;
+    font-weight: 700;
+    line-height: 1.5;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.legacy-button:hover,
+.legacy-button:focus,
+.legacy-button:active {
+    border-color: var(--sammo-button-base1-hover-border);
+    background: var(--sammo-button-base1-hover-bg);
+    color: #fff;
+}
+
+.legacy-button:focus-visible {
+    outline: 2px solid var(--sammo-color-accent);
+    outline-offset: 1px;
+}
+
+.legacy-button:disabled,
+.legacy-button[aria-disabled='true'] {
+    cursor: default;
+    opacity: 0.65;
+}
+
+/*
+ * Ref Bootstrap 5.2 + Lumen button family. The modifier describes the legacy
+ * semantic role; width and placement remain in the owning scoped component.
+ */
+.legacy-button:is(
+    .legacy-button--primary,
+    .legacy-button--secondary,
+    .legacy-button--danger,
+    .legacy-button--info,
+    .legacy-button--navigation
+) {
+    --legacy-button-bg: var(--sammo-button-primary-bg);
+    --legacy-button-border: var(--sammo-button-primary-border);
+    min-height: 35.5px;
+    margin-top: 0;
+    border-color: var(--legacy-button-border);
+    border-style: solid;
+    border-width: 0 1px 4px;
+    border-radius: 5.25px;
+    padding: 5.25px 10.5px;
+    background: var(--legacy-button-bg);
+    color: #fff;
+    line-height: 21px;
+}
+
+.legacy-button.legacy-button--secondary {
+    --legacy-button-bg: var(--sammo-button-secondary-bg);
+    --legacy-button-border: var(--sammo-button-secondary-border);
+}
+
+.legacy-button.legacy-button--danger {
+    --legacy-button-bg: var(--sammo-button-danger-bg);
+    --legacy-button-border: var(--sammo-button-danger-border);
+}
+
+.legacy-button.legacy-button--info {
+    --legacy-button-bg: var(--sammo-button-info-bg);
+    --legacy-button-border: var(--sammo-button-info-border);
+}
+
+.legacy-button.legacy-button--navigation {
+    --legacy-button-bg: var(--sammo-button-navigation-bg);
+    --legacy-button-border: var(--sammo-button-navigation-border);
+}
+
+.legacy-button:is(
+        .legacy-button--primary,
+        .legacy-button--secondary,
+        .legacy-button--danger,
+        .legacy-button--info,
+        .legacy-button--navigation
+    ):not(:disabled, [aria-disabled='true']):hover {
+    margin-top: 1px;
+    border-color: var(--legacy-button-border);
+    border-bottom-width: 3px;
+    background: var(--legacy-button-bg);
+}
+
+.legacy-button:is(
+        .legacy-button--primary,
+        .legacy-button--secondary,
+        .legacy-button--danger,
+        .legacy-button--info,
+        .legacy-button--navigation
+    ):not(:disabled, [aria-disabled='true']):active {
+    margin-top: 2px;
+    border-color: var(--legacy-button-border);
+    border-bottom-width: 2px;
+    background: var(--legacy-button-bg);
+    box-shadow: none;
+}
+
+.legacy-button:is(
+        .legacy-button--primary,
+        .legacy-button--secondary,
+        .legacy-button--danger,
+        .legacy-button--info,
+        .legacy-button--navigation
+    ):focus {
+    border-color: var(--legacy-button-border);
+    background: var(--legacy-button-bg);
+}

app/game-frontend/src/assets/styles/tokens.css

@@ -6,6 +6,20 @@
     --sammo-color-border: rgba(201, 164, 90, 0.4);
     --sammo-color-action-bg: rgba(16, 16, 16, 0.6);
     --sammo-color-error: #f5b7b1;
+    --sammo-button-base1-bg: #141c65;
+    --sammo-button-base1-border: #12195b;
+    --sammo-button-base1-hover-bg: #101651;
+    --sammo-button-base1-hover-border: #0f154c;
+    --sammo-button-primary-bg: #375a7f;
+    --sammo-button-primary-border: #325172;
+    --sammo-button-secondary-bg: #444;
+    --sammo-button-secondary-border: #3d3d3d;
+    --sammo-button-danger-bg: #e74c3c;
+    --sammo-button-danger-border: #d04436;
+    --sammo-button-info-bg: #3498db;
+    --sammo-button-info-border: #2f89c5;
+    --sammo-button-navigation-bg: #00582c;
+    --sammo-button-navigation-border: #004f28;
     --sammo-texture-walnut: url('/image/game/back_walnut.jpg');
     --sammo-texture-green: url('/image/game/back_green.jpg');
     --sammo-texture-blue: url('/image/game/back_blue.jpg');