refactor(ui): standardize page layouts and component styling

Introduce structural CSS classes for page shells, headers, and surface cards
Update primary theme color to red and neutral to zinc across the application

app/assets/css/main.css

@@ -1,11 +1,169 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 
+:root {
+  color-scheme: light dark;
+}
+
 html {
   scroll-behavior: smooth;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 body {
   min-height: 100dvh;
-  background: var(--ui-bg);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--ui-primary) 7%, transparent) 0, transparent 22rem),
+    var(--ui-bg-muted);
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+}
+
+button,
+a,
+input,
+textarea,
+select {
+  touch-action: manipulation;
+}
+
+::selection {
+  background: color-mix(in srgb, var(--ui-primary) 18%, transparent);
+}
+
+.page-shell {
+  width: min(100%, 80rem);
+  margin-inline: auto;
+  padding: 1.5rem 1rem 2.5rem;
+}
+
+.page-shell-narrow {
+  width: min(100%, 64rem);
+  margin-inline: auto;
+  padding: 1.5rem 1rem 2.5rem;
+}
+
+.page-shell-compact {
+  width: min(100%, 48rem);
+  margin-inline: auto;
+  padding: 1.5rem 1rem 2.5rem;
+}
+
+.page-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
+}
+
+.page-eyebrow {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--ui-primary) 18%, var(--ui-border));
+  background: color-mix(in srgb, var(--ui-primary) 8%, var(--ui-bg));
+  padding: 0.25rem 0.625rem;
+  color: var(--ui-primary);
+  font-size: 0.75rem;
+  font-weight: 650;
+}
+
+.page-title {
+  max-width: 44rem;
+  color: var(--ui-text-highlighted);
+  font-size: clamp(1.875rem, 1.5rem + 1.25vw, 3rem);
+  font-weight: 760;
+  line-height: 1.05;
+}
+
+.page-description {
+  max-width: 42rem;
+  color: var(--ui-text-muted);
+  font-size: 1rem;
+  line-height: 1.65;
+}
+
+.surface-card {
+  border: 1px solid color-mix(in srgb, var(--ui-border) 86%, transparent);
+  background: color-mix(in srgb, var(--ui-bg) 95%, transparent);
+  box-shadow: 0 1px 2px color-mix(in srgb, black 4%, transparent), 0 18px 48px color-mix(in srgb, black 7%, transparent);
+}
+
+.surface-panel {
+  border: 1px solid color-mix(in srgb, var(--ui-border) 88%, transparent);
+  background: color-mix(in srgb, var(--ui-bg-elevated) 76%, var(--ui-bg));
+  box-shadow: inset 0 1px 0 color-mix(in srgb, white 48%, transparent);
+}
+
+.metric-card {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--ui-border) 82%, transparent);
+  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-bg) 98%, white) 0, color-mix(in srgb, var(--ui-bg-elevated) 82%, var(--ui-bg)) 100%);
+  box-shadow: 0 1px 2px color-mix(in srgb, black 4%, transparent);
+}
+
+.metric-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 3px;
+  background: var(--ui-primary);
+  opacity: 0.82;
+}
+
+.compact-table {
+  border-radius: 1rem;
+}
+
+.compact-table :where(th) {
+  background: var(--ui-bg-muted);
+  color: var(--ui-text-muted);
+  font-size: 0.75rem;
+  font-weight: 650;
+  text-transform: uppercase;
+}
+
+.form-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.action-row {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 0.625rem;
+}
+
+@media (min-width: 640px) {
+  .action-row {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}
+
+@media (min-width: 768px) {
+  .page-shell,
+  .page-shell-narrow,
+  .page-shell-compact {
+    padding: 2rem 1.5rem 3rem;
+  }
+
+  .page-header {
+    margin-bottom: 1.5rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+  }
 }