🎨 style: establish console design system

apps/web/app/globals.css

@@ -26,6 +26,10 @@
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -42,41 +46,49 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
 }
 
 :root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --radius: 0.25rem;
+  --font-sans: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
+  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
+  --background: oklch(0.965 0.012 95);
+  --foreground: oklch(0.18 0.018 75);
+  --card: oklch(0.99 0.006 95);
+  --card-foreground: oklch(0.18 0.018 75);
+  --popover: oklch(0.995 0.004 95);
+  --popover-foreground: oklch(0.18 0.018 75);
+  --primary: oklch(0.75 0.205 125);
+  --primary-foreground: oklch(0.15 0.025 125);
+  --secondary: oklch(0.91 0.022 95);
+  --secondary-foreground: oklch(0.24 0.018 75);
+  --muted: oklch(0.925 0.012 95);
+  --muted-foreground: oklch(0.48 0.018 75);
+  --accent: oklch(0.88 0.04 112);
+  --accent-foreground: oklch(0.2 0.028 110);
+  --destructive: oklch(0.57 0.205 28);
+  --success: oklch(0.59 0.155 132);
+  --success-foreground: oklch(0.28 0.09 132);
+  --warning: oklch(0.72 0.15 76);
+  --warning-foreground: oklch(0.34 0.09 66);
+  --border: oklch(0.79 0.018 90);
+  --input: oklch(0.76 0.02 90);
+  --ring: oklch(0.68 0.19 125);
+  --chart-1: oklch(0.75 0.205 125);
+  --chart-2: oklch(0.66 0.16 205);
+  --chart-3: oklch(0.58 0.18 50);
+  --chart-4: oklch(0.72 0.17 80);
+  --chart-5: oklch(0.55 0.16 300);
+  --sidebar: oklch(0.17 0.02 75);
+  --sidebar-foreground: oklch(0.91 0.015 95);
+  --sidebar-primary: oklch(0.75 0.205 125);
+  --sidebar-primary-foreground: oklch(0.15 0.025 125);
+  --sidebar-accent: oklch(0.25 0.025 90);
+  --sidebar-accent-foreground: oklch(0.96 0.01 95);
+  --sidebar-border: oklch(0.31 0.025 80);
+  --sidebar-ring: oklch(0.75 0.205 125);
 }
 
 .dark {
@@ -117,8 +129,77 @@
   * {
     @apply border-border outline-ring/50;
   }
+  html {
+    @apply bg-background;
+  }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground antialiased;
+    min-width: 320px;
+    background-image:
+      linear-gradient(to right, color-mix(in oklch, var(--border) 22%, transparent) 1px, transparent 1px),
+      linear-gradient(to bottom, color-mix(in oklch, var(--border) 22%, transparent) 1px, transparent 1px);
+    background-size: 32px 32px;
+  }
+  h1,
+  h2,
+  h3 {
+    letter-spacing: -0.025em;
+  }
+  ::selection {
+    background: var(--primary);
+    color: var(--primary-foreground);
+  }
+}
+
+@layer components {
+  .page-shell {
+    @apply mx-auto w-full max-w-[1600px] space-y-6;
+  }
+
+  .page-heading {
+    @apply flex flex-col gap-4 border-b-2 border-foreground pb-5 sm:flex-row sm:items-end sm:justify-between;
+  }
+
+  .page-eyebrow {
+    @apply mb-2 block font-mono text-[10px] font-bold uppercase tracking-[0.22em] text-muted-foreground;
+  }
+
+  .page-title {
+    @apply text-3xl font-black leading-none tracking-[-0.04em] sm:text-4xl;
+  }
+
+  .page-description {
+    @apply mt-2 max-w-2xl text-sm leading-6 text-muted-foreground;
+  }
+
+  .auth-grid {
+    background-image:
+      linear-gradient(to right, color-mix(in oklch, white 9%, transparent) 1px, transparent 1px),
+      linear-gradient(to bottom, color-mix(in oklch, white 9%, transparent) 1px, transparent 1px);
+    background-size: 36px 36px;
+  }
+
+  .server-form [data-slot="tabs-content"] {
+    @apply border border-border bg-background/65 p-4 sm:p-6;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+@media (max-width: 767px) {
+  .server-form .grid-cols-2,
+  .server-form .grid-cols-3,
+  .server-form .grid-cols-4 {
+    grid-template-columns: minmax(0, 1fr);
   }
 }