Refactor BSC Score to Astro, TypeScript, and modular architecture

src/components/ui/Button.module.css

@@ -0,0 +1,82 @@
+/* Design tokens */
+:root {
+  --color-primary: #ff9800;
+  --color-primary-hover: #ffa726;
+  --color-secondary: #333;
+  --color-secondary-hover: #444;
+  --color-danger: #f44336;
+  --color-danger-hover: #ef5350;
+  --color-white: #fff;
+  --border-radius: 6px;
+  --transition: all 0.2s ease;
+}
+
+.button {
+  border: none;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  font-weight: 600;
+  transition: var(--transition);
+  touch-action: manipulation;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  text-decoration: none;
+  user-select: none;
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Variants */
+.primary {
+  background: var(--color-primary);
+  color: var(--color-white);
+}
+
+.primary:hover:not(.disabled) {
+  background: var(--color-primary-hover);
+}
+
+.secondary {
+  background: var(--color-secondary);
+  color: var(--color-white);
+}
+
+.secondary:hover:not(.disabled) {
+  background: var(--color-secondary-hover);
+}
+
+.danger {
+  background: var(--color-danger);
+  color: var(--color-white);
+}
+
+.danger:hover:not(.disabled) {
+  background: var(--color-danger-hover);
+}
+
+/* Sizes */
+.small {
+  padding: 8px 16px;
+  font-size: 0.875rem;
+}
+
+.medium {
+  padding: 12px 24px;
+  font-size: 1rem;
+}
+
+.large {
+  padding: 18px 32px;
+  font-size: 1.25rem;
+}
+
+/* States */
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}