feat: add design system tokens

web/src/app.css

@@ -5,7 +5,10 @@
 	--text-muted: #5c6470;
 	--accent: #2563eb;
 	--accent-hover: #1d4ed8;
+	--accent-contrast: #ffffff;
 	--border: #dfe2e8;
+	--danger: #e5484d;
+	--danger-strong: #b3261e;
 	--check-a: #eceff3;
 	--check-b: #ffffff;
 
@@ -18,6 +21,20 @@
 	--radius-s: 6px;
 	--radius-m: 10px;
 
+	--text-xs: 0.8rem;
+	--text-s: 0.85rem;
+	--text-m: 0.95rem;
+	--text-l: 1.1rem;
+	--text-xl: 1.25rem;
+	--text-xxl: 1.75rem;
+	--leading-tight: 1.25;
+
+	--shadow-card: 0 4px 14px rgb(37 99 235 / 12%);
+	--transition-fast: 120ms ease;
+
+	--control-height: 2.4rem;
+	--control-max-width: 16rem;
+
 	--font-sans:
 		system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 	--font-mono: ui-monospace, 'Cascadia Code', Consolas, monospace;
@@ -46,19 +63,19 @@ body {
 }
 
 h1 {
-	font-size: 1.75rem;
+	font-size: var(--text-xxl);
-	line-height: 1.25;
+	line-height: var(--leading-tight);
 	letter-spacing: -0.01em;
 }
 
 h2 {
-	font-size: 1.25rem;
+	font-size: var(--text-xl);
-	line-height: 1.3;
+	line-height: var(--leading-tight);
 }
 
 p,
 label {
-	font-size: 0.95rem;
+	font-size: var(--text-m);
 }
 
 a {
@@ -89,17 +106,17 @@ button.secondary {
 	border-radius: var(--radius-s);
 	border: 1px solid transparent;
 	font-weight: 600;
-	font-size: 0.95rem;
+	font-size: var(--text-m);
 	cursor: pointer;
 	transition:
-		background 120ms ease,
+		background var(--transition-fast),
-		border-color 120ms ease,
+		border-color var(--transition-fast),
-		color 120ms ease;
+		color var(--transition-fast);
 }
 
 button.primary {
 	background: var(--accent);
-	color: #ffffff;
+	color: var(--accent-contrast);
 }
 
 button.primary:hover:not(:disabled) {
@@ -121,3 +138,45 @@ button:disabled {
 	opacity: 0.55;
 	cursor: not-allowed;
 }
+
+.text-muted {
+	color: var(--text-muted);
+}
+
+.text-caption {
+	font-size: var(--text-s);
+}
+
+.heading-section {
+	font-size: var(--text-l);
+	color: var(--text-muted);
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+}
+
+.panel {
+	background: var(--surface);
+	border: 1px solid var(--border);
+	border-radius: var(--radius-m);
+}
+
+.error-banner {
+	padding: var(--space-2) var(--space-3);
+	border: 1px solid var(--danger);
+	border-radius: var(--radius-s);
+	background: color-mix(in srgb, var(--danger) 8%, var(--surface));
+	color: var(--danger-strong);
+	font-size: var(--text-s);
+}
+
+.visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	overflow: hidden;
+	clip: rect(0 0 0 0);
+	white-space: nowrap;
+	border: 0;
+}