From 74913c3435220293ffab10d0c93a6a6ff9701cb7 Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Mon, 30 Mar 2026 23:46:38 -0700
Subject: [PATCH] style: refresh shared visual system

---
 frontend/src/index.css            | 351 ++++++++++++++++++++--------
 frontend/src/styles/theme.css     | 375 ++++++++++++++----------------
 frontend/src/styles/utilities.css |  70 +++---
 3 files changed, 483 insertions(+), 313 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index cf34cc8..a0e90fb 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,73 +1,3 @@
-/* :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-} */
-
-
 /**
  * Global Base Styles
  * Uses theme variables defined in theme.css
@@ -77,12 +7,20 @@ button:focus-visible {
   box-sizing: border-box;
 }
 
+html {
+  min-width: 320px;
+  scroll-behavior: smooth;
+}
+
 body {
   font-family: var(--font-family-base);
   font-size: var(--font-size-base);
   line-height: var(--line-height-normal);
   color: var(--color-text-primary);
-  background: var(--color-bg-body);
+  background:
+    radial-gradient(circle at top left, rgba(15, 118, 110, 0.14), transparent 34%),
+    radial-gradient(circle at top right, rgba(245, 158, 11, 0.14), transparent 28%),
+    linear-gradient(180deg, #faf8f3 0%, var(--color-bg-body) 42%, #efe8dc 100%);
   margin: 0;
   padding: 0;
   -webkit-font-smoothing: antialiased;
@@ -90,44 +28,275 @@ body {
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 
+[data-theme="dark"] body,
+body.dark-mode {
+  background:
+    radial-gradient(circle at top left, rgba(45, 212, 191, 0.12), transparent 28%),
+    radial-gradient(circle at top right, rgba(251, 191, 36, 0.08), transparent 24%),
+    linear-gradient(180deg, #101823 0%, var(--color-bg-body) 44%, #0b1220 100%);
+}
+
 #root {
   min-height: 100vh;
 }
 
-.container {
-  max-width: var(--container-max-width);
-  margin: auto;
-  padding: var(--container-padding);
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: color var(--transition-base), opacity var(--transition-base);
 }
 
-h1 {
-  text-align: center;
-  font-size: 1.5em;
+a:hover {
+  color: var(--color-primary-hover);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  font-family: var(--font-family-heading);
+  line-height: var(--line-height-tight);
+  letter-spacing: -0.02em;
+}
+
+p {
+  margin: 0;
 }
 
 input,
-button,
-select {
-  font-size: 1em;
-  margin: 0.3em 0;
-  padding: 0.5em;
+select,
+textarea {
   width: 100%;
-  box-sizing: border-box;
+  font: inherit;
+}
+
+button {
+  font: inherit;
 }
 
 ul {
   list-style: none;
   padding: 0;
+  margin: 0;
 }
 
-li {
-  padding: 0.5em;
-  background: #e9ecef;
-  margin-bottom: 0.5em;
-  border-radius: 4px;
+.page-shell {
+  width: min(100%, var(--page-max-width));
+  margin: 0 auto;
+  padding: clamp(1rem, 2vw, 1.75rem);
+}
+
+.page-shell--narrow {
+  max-width: 560px;
+}
+
+.page-shell--center {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.page-panel {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--border-radius-xl);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88)),
+    var(--color-bg-surface);
+  box-shadow: var(--shadow-xl);
+  backdrop-filter: blur(18px);
+}
+
+[data-theme="dark"] .page-panel,
+body.dark-mode .page-panel {
+  background:
+    linear-gradient(180deg, rgba(20, 29, 42, 0.96), rgba(15, 23, 34, 0.9)),
+    var(--color-bg-surface);
+}
+
+.page-panel::before {
+  content: "";
+  position: absolute;
+  inset: 0 auto auto 0;
+  width: 100%;
+  height: 10px;
+  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
+  opacity: 0.9;
+}
+
+.page-panel-inner {
+  padding: clamp(1.25rem, 3vw, 2.4rem);
+}
+
+.page-panel--compact .page-panel-inner {
+  padding: clamp(1.4rem, 4vw, 2.1rem);
+}
+
+.page-hero {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  margin-bottom: 1.5rem;
+}
+
+.page-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  width: fit-content;
+  padding: 0.45rem 0.8rem;
+  border-radius: var(--border-radius-full);
+  background: var(--color-primary-light);
+  color: var(--color-primary-dark);
+  font-size: 0.78rem;
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.page-title {
+  font-size: clamp(2rem, 4vw, 3.2rem);
+  color: var(--color-text-primary);
+}
+
+.page-subtitle {
+  max-width: 44rem;
+  color: var(--color-text-secondary);
+  font-size: 1.02rem;
+  line-height: 1.7;
+}
+
+.page-tabs {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  padding: 0.45rem;
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--border-radius-full);
+  background: rgba(255, 255, 255, 0.62);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+
+[data-theme="dark"] .page-tabs,
+body.dark-mode .page-tabs {
+  background: rgba(15, 23, 34, 0.72);
+}
+
+.page-tab {
+  min-width: 120px;
+  padding: 0.75rem 1.15rem;
+  border: none;
+  border-radius: var(--border-radius-full);
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
   cursor: pointer;
+  transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base);
 }
 
-li:hover {
-  background: #dee2e6;
+.page-tab:hover {
+  background: rgba(15, 118, 110, 0.08);
+  color: var(--color-text-primary);
+}
+
+.page-tab.active {
+  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
+  color: var(--color-text-inverse);
+  box-shadow: var(--shadow-sm);
+}
+
+.surface-note {
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--border-radius-lg);
+  background: rgba(255, 255, 255, 0.64);
+  padding: 1rem 1.1rem;
+  color: var(--color-text-secondary);
+}
+
+[data-theme="dark"] .surface-note,
+body.dark-mode .surface-note {
+  background: rgba(15, 23, 34, 0.72);
+}
+
+.error-message,
+.success-message {
+  margin-bottom: 1rem;
+  padding: 0.9rem 1rem;
+  border-radius: var(--border-radius-md);
+  border: 1px solid;
+  font-size: var(--font-size-sm);
+  line-height: 1.55;
+}
+
+.error-message {
+  color: var(--color-danger);
+  background: var(--color-danger-light);
+  border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
+}
+
+.success-message {
+  color: var(--color-success);
+  background: var(--color-success-light);
+  border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
+}
+
+.auth-shell {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.auth-card {
+  width: min(100%, 30rem);
+}
+
+.auth-card .page-hero {
+  margin-bottom: 1.25rem;
+}
+
+.auth-subtitle {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  line-height: 1.7;
+}
+
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.9rem;
+}
+
+.auth-footer {
+  margin-top: 1.25rem;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  text-align: center;
+}
+
+@media (max-width: 640px) {
+  .page-shell {
+    padding: 0.85rem;
+  }
+
+  .page-tabs {
+    width: 100%;
+  }
+
+  .page-tab {
+    flex: 1 1 calc(50% - 0.6rem);
+    min-width: 0;
+  }
+
+  .page-title {
+    font-size: clamp(1.8rem, 8vw, 2.4rem);
+  }
 }
diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css
index 75ba26f..78b958a 100644
--- a/frontend/src/styles/theme.css
+++ b/frontend/src/styles/theme.css
@@ -1,9 +1,9 @@
 /**
  * Global Theme Variables
- * 
+ *
  * This file defines the design system for the entire application.
  * All colors, spacing, typography, and other design tokens are centralized here.
- * 
+ *
  * Usage: var(--variable-name)
  * Example: color: var(--color-primary);
  */
@@ -12,135 +12,139 @@
   /* ============================================
      COLOR PALETTE
      ============================================ */
-  
+
   /* Primary Colors */
   --color-primary: dodgerblue;
-  --color-primary-hover: #0066cc;
-  --color-primary-light: #e7f3ff;
-  --color-primary-dark: #0056b3;
-  
+  --color-primary-hover: #1677d2;
+  --color-primary-light: #dceeff;
+  --color-primary-dark: #0f5db4;
+
   /* Secondary Colors */
-  --color-secondary: #6c757d;
-  --color-secondary-hover: #545b62;
-  --color-secondary-light: #f8f9fa;
-  
+  --color-secondary: #7c5a3c;
+  --color-secondary-hover: #64462e;
+  --color-secondary-light: #f5ede4;
+
+  /* Accent Colors */
+  --color-accent: #f59e0b;
+  --color-accent-light: #fff2d8;
+
   /* Semantic Colors */
-  --color-success: #28a745;
-  --color-success-hover: #218838;
-  --color-success-light: #d4edda;
-  
-  --color-danger: #dc3545;
-  --color-danger-hover: #c82333;
-  --color-danger-light: #f8d7da;
-  
-  --color-warning: #ffc107;
-  --color-warning-hover: #e0a800;
-  --color-warning-light: #fff3cd;
-  
-  --color-info: #17a2b8;
-  --color-info-hover: #138496;
-  --color-info-light: #d1ecf1;
-  
+  --color-success: #15803d;
+  --color-success-hover: #166534;
+  --color-success-light: #dcfce7;
+
+  --color-danger: #dc2626;
+  --color-danger-hover: #b91c1c;
+  --color-danger-light: #fee2e2;
+
+  --color-warning: #d97706;
+  --color-warning-hover: #b45309;
+  --color-warning-light: #ffedd5;
+
+  --color-info: #0369a1;
+  --color-info-hover: #075985;
+  --color-info-light: #dbeafe;
+
   /* Neutral Colors */
   --color-white: #ffffff;
-  --color-black: #000000;
-  --color-gray-50: #f9f9f9;
-  --color-gray-100: #f8f9fa;
-  --color-gray-200: #e9ecef;
-  --color-gray-300: #dee2e6;
-  --color-gray-400: #ced4da;
-  --color-gray-500: #adb5bd;
-  --color-gray-600: #6c757d;
-  --color-gray-700: #495057;
-  --color-gray-800: #343a40;
-  --color-gray-900: #212529;
-  
+  --color-black: #0f172a;
+  --color-gray-50: #fcfbf8;
+  --color-gray-100: #f6f3ee;
+  --color-gray-200: #ebe6dd;
+  --color-gray-300: #ddd4c7;
+  --color-gray-400: #b6ab9a;
+  --color-gray-500: #8e8579;
+  --color-gray-600: #6b645b;
+  --color-gray-700: #47423d;
+  --color-gray-800: #2d2a27;
+  --color-gray-900: #1c1917;
+
   /* Text Colors */
-  --color-text-primary: #212529;
-  --color-text-secondary: #6c757d;
-  --color-text-muted: #adb5bd;
-  --color-text-inverse: #ffffff;
-  --color-text-disabled: #6c757d;
-  
+  --color-text-primary: #1f2937;
+  --color-text-secondary: #5b6473;
+  --color-text-muted: #8e98a8;
+  --color-text-inverse: #f8fafc;
+  --color-text-disabled: #9aa4b2;
+
   /* Background Colors */
-  --color-bg-body: #f8f9fa;
-  --color-bg-surface: #ffffff;
-  --color-bg-hover: #f5f5f5;
-  --color-bg-disabled: #e9ecef;
-  
+  --color-bg-body: #f4f1ea;
+  --color-bg-surface: rgba(255, 255, 255, 0.9);
+  --color-bg-elevated: rgba(255, 255, 255, 0.98);
+  --color-bg-hover: #f2f7f6;
+  --color-bg-disabled: #ece7de;
+  --color-bg-hero: linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(245, 158, 11, 0.12));
+
   /* Border Colors */
-  --color-border-light: #e0e0e0;
-  --color-border-medium: #ccc;
-  --color-border-dark: #999;
-  --color-border-disabled: #dee2e6;
-  
+  --color-border-light: rgba(119, 107, 91, 0.18);
+  --color-border-medium: rgba(119, 107, 91, 0.32);
+  --color-border-dark: rgba(91, 81, 69, 0.55);
+  --color-border-disabled: rgba(148, 163, 184, 0.35);
+
   /* ============================================
      SPACING
      ============================================ */
-  --spacing-xs: 0.25rem;    /* 4px */
-  --spacing-sm: 0.5rem;     /* 8px */
-  --spacing-md: 1rem;       /* 16px */
-  --spacing-lg: 1.5rem;     /* 24px */
-  --spacing-xl: 2rem;       /* 32px */
-  --spacing-2xl: 3rem;      /* 48px */
-  --spacing-3xl: 4rem;      /* 64px */
-  
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+  --spacing-3xl: 4rem;
+
   /* ============================================
      TYPOGRAPHY
      ============================================ */
-  --font-family-base: Arial, sans-serif;
-  --font-family-heading: Arial, sans-serif;
-  --font-family-mono: 'Courier New', monospace;
-  
-  /* Font Sizes */
-  --font-size-xs: 0.75rem;   /* 12px */
-  --font-size-sm: 0.875rem;  /* 14px */
-  --font-size-base: 1rem;    /* 16px */
-  --font-size-lg: 1.125rem;  /* 18px */
-  --font-size-xl: 1.25rem;   /* 20px */
-  --font-size-2xl: 1.5rem;   /* 24px */
-  --font-size-3xl: 2rem;     /* 32px */
-  
-  /* Font Weights */
+  --font-family-base: "Aptos", "Segoe UI Variable Text", "Segoe UI", sans-serif;
+  --font-family-heading: "Aptos Display", "Aptos", "Segoe UI Variable Display", "Segoe UI", sans-serif;
+  --font-family-mono: "IBM Plex Mono", "Cascadia Code", "Consolas", monospace;
+
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 2rem;
+  --font-size-4xl: 2.75rem;
+
   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
-  
-  /* Line Heights */
-  --line-height-tight: 1.2;
+
+  --line-height-tight: 1.15;
   --line-height-normal: 1.5;
   --line-height-relaxed: 1.75;
-  
+
   /* ============================================
      BORDERS & RADIUS
      ============================================ */
   --border-width-thin: 1px;
   --border-width-medium: 2px;
   --border-width-thick: 4px;
-  
-  --border-radius-sm: 4px;
-  --border-radius-md: 6px;
-  --border-radius-lg: 8px;
-  --border-radius-xl: 12px;
-  --border-radius-full: 50%;
-  
+
+  --border-radius-sm: 10px;
+  --border-radius-md: 14px;
+  --border-radius-lg: 20px;
+  --border-radius-xl: 28px;
+  --border-radius-full: 999px;
+
   /* ============================================
      SHADOWS
      ============================================ */
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
-  --shadow-card: 0 0 10px rgba(0, 0, 0, 0.08);
-  
+  --shadow-sm: 0 8px 20px rgba(36, 33, 28, 0.06);
+  --shadow-md: 0 16px 34px rgba(36, 33, 28, 0.1);
+  --shadow-lg: 0 24px 56px rgba(36, 33, 28, 0.14);
+  --shadow-xl: 0 32px 80px rgba(36, 33, 28, 0.18);
+  --shadow-card: 0 14px 36px rgba(36, 33, 28, 0.09);
+
   /* ============================================
      TRANSITIONS
      ============================================ */
   --transition-fast: 0.15s ease;
-  --transition-base: 0.2s ease;
-  --transition-slow: 0.3s ease;
-  
+  --transition-base: 0.24s ease;
+  --transition-slow: 0.35s ease;
+
   /* ============================================
      Z-INDEX LAYERS
      ============================================ */
@@ -150,52 +154,50 @@
   --z-modal-backdrop: 900;
   --z-modal: 1000;
   --z-tooltip: 1100;
-  
+
   /* ============================================
      LAYOUT
      ============================================ */
-  --container-max-width: 480px;
+  --container-max-width: 560px;
+  --page-max-width: 1180px;
   --container-padding: var(--spacing-md);
-  
+
   /* ============================================
      COMPONENT-SPECIFIC
      ============================================ */
-  
-  /* Buttons */
-  --button-padding-y: 0.6rem;
-  --button-padding-x: 1.5rem;
-  --button-border-radius: var(--border-radius-sm);
-  --button-font-weight: var(--font-weight-medium);
-  
-  /* Inputs */
-  --input-padding-y: 0.6rem;
-  --input-padding-x: 0.75rem;
-  --input-border-color: var(--color-border-medium);
-  --input-border-radius: var(--border-radius-sm);
+  --button-padding-y: 0.8rem;
+  --button-padding-x: 1.25rem;
+  --button-border-radius: var(--border-radius-full);
+  --button-font-weight: var(--font-weight-semibold);
+
+  --input-padding-y: 0.85rem;
+  --input-padding-x: 1rem;
+  --input-border-color: var(--color-border-light);
+  --input-border-radius: var(--border-radius-md);
   --input-focus-border-color: var(--color-primary);
-  --input-focus-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
-  
-  /* Cards */
+  --input-focus-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
+
   --card-bg: var(--color-bg-surface);
-  --card-padding: var(--spacing-md);
+  --card-padding: var(--spacing-lg);
   --card-border-radius: var(--border-radius-lg);
   --card-shadow: var(--shadow-card);
-  
-  /* Modals */
-  --modal-backdrop-bg: rgba(0, 0, 0, 0.5);
-  --modal-bg: var(--color-white);
+
+  --modal-backdrop-bg: rgba(15, 23, 42, 0.48);
+  --modal-bg: var(--color-bg-elevated);
   --modal-border-radius: var(--border-radius-lg);
   --modal-padding: var(--spacing-lg);
   --modal-max-width: 500px;
-  
+
   /* ============================================
-     SIMPLIFIED ALIASES (for component convenience)
+     SIMPLIFIED ALIASES
      ============================================ */
   --primary: var(--color-primary);
   --primary-dark: var(--color-primary-dark);
   --primary-light: var(--color-primary-light);
   --danger: var(--color-danger);
   --danger-dark: var(--color-danger-hover);
+  --success: var(--color-success);
+  --success-light: var(--color-success-light);
   --text-primary: var(--color-text-primary);
   --text-secondary: var(--color-text-secondary);
   --background: var(--color-bg-body);
@@ -203,108 +205,92 @@
   --card-hover: var(--color-bg-hover);
 }
 
-
-/* ============================================
-   DARK MODE
-   ============================================ */
 [data-theme="dark"] {
-  /* Primary Colors */
-  --color-primary: #4da3ff;
-  --color-primary-hover: #66b3ff;
-  --color-primary-light: #1a3a52;
-  --color-primary-dark: #3d8fdb;
+  --color-primary: #5fb2ff;
+  --color-primary-hover: #83c4ff;
+  --color-primary-light: rgba(95, 178, 255, 0.14);
+  --color-primary-dark: #2d8ff0;
+
+  --color-secondary: #f4c27a;
+  --color-secondary-hover: #ffd59e;
+  --color-secondary-light: rgba(244, 194, 122, 0.12);
+  --color-accent: #fbbf24;
+  --color-accent-light: rgba(251, 191, 36, 0.16);
 
-  /* Semantic Colors */
   --color-success: #4ade80;
-  --color-success-hover: #5fe88d;
-  --color-success-light: #1a3a28;
+  --color-success-hover: #86efac;
+  --color-success-light: rgba(74, 222, 128, 0.16);
 
   --color-danger: #f87171;
-  --color-danger-hover: #fa8585;
-  --color-danger-light: #4a2020;
+  --color-danger-hover: #fca5a5;
+  --color-danger-light: rgba(248, 113, 113, 0.16);
 
   --color-warning: #fbbf24;
   --color-warning-hover: #fcd34d;
-  --color-warning-light: #3a2f0f;
+  --color-warning-light: rgba(251, 191, 36, 0.16);
 
   --color-info: #38bdf8;
-  --color-info-hover: #5dc9fc;
-  --color-info-light: #1a2f3a;
+  --color-info-hover: #7dd3fc;
+  --color-info-light: rgba(56, 189, 248, 0.16);
 
-  /* Text Colors */
-  --color-text-primary: #f1f5f9;
-  --color-text-secondary: #94a3b8;
-  --color-text-muted: #64748b;
-  --color-text-inverse: #1e293b;
-  --color-text-disabled: #475569;
+  --color-text-primary: #f4f7fb;
+  --color-text-secondary: #b2bccb;
+  --color-text-muted: #7f8aa0;
+  --color-text-inverse: #0f172a;
+  --color-text-disabled: #667085;
 
-  /* Background Colors */
-  --color-bg-body: #0f172a;
-  --color-bg-surface: #1e293b;
-  --color-bg-hover: #334155;
-  --color-bg-disabled: #1e293b;
+  --color-bg-body: #0f1722;
+  --color-bg-surface: rgba(15, 23, 34, 0.84);
+  --color-bg-elevated: rgba(20, 29, 42, 0.96);
+  --color-bg-hover: rgba(30, 41, 59, 0.95);
+  --color-bg-disabled: rgba(30, 41, 59, 0.7);
+  --color-bg-hero: linear-gradient(135deg, rgba(45, 212, 191, 0.18), rgba(251, 191, 36, 0.16));
 
-  /* Border Colors */
-  --color-border-light: #334155;
-  --color-border-medium: #475569;
-  --color-border-dark: #64748b;
-  --color-border-disabled: #334155;
+  --color-border-light: rgba(148, 163, 184, 0.18);
+  --color-border-medium: rgba(148, 163, 184, 0.32);
+  --color-border-dark: rgba(203, 213, 225, 0.48);
+  --color-border-disabled: rgba(100, 116, 139, 0.3);
 
-  /* Neutral Colors - Dark adjusted */
-  --color-gray-50: #1e293b;
-  --color-gray-100: #1e293b;
-  --color-gray-200: #334155;
-  --color-gray-300: #475569;
-  --color-gray-400: #64748b;
-  --color-gray-500: #94a3b8;
-  --color-gray-600: #cbd5e1;
-  --color-gray-700: #e2e8f0;
-  --color-gray-800: #f1f5f9;
+  --color-gray-50: #111827;
+  --color-gray-100: #172030;
+  --color-gray-200: #1f2937;
+  --color-gray-300: #334155;
+  --color-gray-400: #475569;
+  --color-gray-500: #64748b;
+  --color-gray-600: #94a3b8;
+  --color-gray-700: #cbd5e1;
+  --color-gray-800: #e2e8f0;
   --color-gray-900: #f8fafc;
 
-  /* Shadows - Lighter for dark mode */
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
-  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
-  --shadow-card: 0 0 10px rgba(0, 0, 0, 0.5);
+  --shadow-sm: 0 10px 24px rgba(2, 6, 23, 0.24);
+  --shadow-md: 0 18px 40px rgba(2, 6, 23, 0.34);
+  --shadow-lg: 0 28px 60px rgba(2, 6, 23, 0.42);
+  --shadow-xl: 0 42px 90px rgba(2, 6, 23, 0.5);
+  --shadow-card: 0 18px 44px rgba(2, 6, 23, 0.34);
 
-  /* Modals */
-  --modal-backdrop-bg: rgba(0, 0, 0, 0.8);
-  --modal-bg: var(--color-bg-surface);
-
-  /* Inputs */
-  --input-border-color: var(--color-border-medium);
-  --input-focus-shadow: 0 0 0 2px rgba(77, 163, 255, 0.3);
-
-  /* Cards */
+  --modal-backdrop-bg: rgba(2, 6, 23, 0.72);
+  --modal-bg: var(--color-bg-elevated);
+  --input-focus-shadow: 0 0 0 4px rgba(45, 212, 191, 0.18);
   --card-bg: var(--color-bg-surface);
 }
 
-
-/* ============================================
-   DARK MODE SUPPORT (Future Implementation)
-   ============================================ */
 @media (prefers-color-scheme: dark) {
   /* Auto mode will use data-theme attribute set by JS */
 }
 
-
-/* Manual dark mode class override (deprecated - use data-theme) */
 .dark-mode {
-  --color-text-primary: #f8f9fa;
-  --color-text-secondary: #adb5bd;
-  --color-bg-body: #212529;
-  --color-bg-surface: #343a40;
-  --color-border-light: #495057;
-  --color-border-medium: #6c757d;
+  --color-text-primary: #f4f7fb;
+  --color-text-secondary: #b2bccb;
+  --color-bg-body: #0f1722;
+  --color-bg-surface: rgba(15, 23, 34, 0.84);
+  --color-border-light: rgba(148, 163, 184, 0.18);
+  --color-border-medium: rgba(148, 163, 184, 0.32);
 }
 
 /* ============================================
    UTILITY CLASSES
    ============================================ */
 
-/* Spacing Utilities */
 .m-0 { margin: 0 !important; }
 .mt-1 { margin-top: var(--spacing-xs) !important; }
 .mt-2 { margin-top: var(--spacing-sm) !important; }
@@ -322,7 +308,6 @@
 .p-3 { padding: var(--spacing-md) !important; }
 .p-4 { padding: var(--spacing-lg) !important; }
 
-/* Text Utilities */
 .text-center { text-align: center !important; }
 .text-left { text-align: left !important; }
 .text-right { text-align: right !important; }
@@ -338,13 +323,11 @@
 .font-weight-semibold { font-weight: var(--font-weight-semibold) !important; }
 .font-weight-bold { font-weight: var(--font-weight-bold) !important; }
 
-/* Display Utilities */
 .d-none { display: none !important; }
 .d-block { display: block !important; }
 .d-flex { display: flex !important; }
 .d-inline-block { display: inline-block !important; }
 
-/* Flex Utilities */
 .flex-column { flex-direction: column !important; }
 .flex-row { flex-direction: row !important; }
 .justify-center { justify-content: center !important; }
diff --git a/frontend/src/styles/utilities.css b/frontend/src/styles/utilities.css
index b92d9da..226db6e 100644
--- a/frontend/src/styles/utilities.css
+++ b/frontend/src/styles/utilities.css
@@ -61,17 +61,21 @@
    ============================================ */
 
 .card {
-  background: var(--color-bg-surface);
+  background: var(--card-bg);
+  border: 1px solid var(--color-border-light);
   border-radius: var(--card-border-radius);
   padding: var(--card-padding);
   box-shadow: var(--shadow-card);
+  backdrop-filter: blur(14px);
 }
 
 .card-elevated {
-  background: var(--color-bg-surface);
-  border-radius: var(--card-border-radius);
-  padding: var(--spacing-lg);
-  box-shadow: var(--shadow-lg);
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--border-radius-xl);
+  padding: clamp(1.5rem, 3vw, 2.25rem);
+  box-shadow: var(--shadow-xl);
+  backdrop-filter: blur(18px);
 }
 
 .card-title {
@@ -87,67 +91,76 @@
 
 .btn {
   padding: var(--button-padding-y) var(--button-padding-x);
-  border: none;
+  border: 1px solid transparent;
   border-radius: var(--button-border-radius);
   font-size: var(--font-size-base);
   font-weight: var(--button-font-weight);
   cursor: pointer;
-  transition: var(--transition-base);
+  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
   text-align: center;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  min-height: 46px;
 }
 
 .btn-primary {
-  background: var(--color-primary);
+  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
   color: var(--color-text-inverse);
+  box-shadow: 0 14px 30px rgba(15, 118, 110, 0.18);
 }
 
 .btn-primary:hover:not(:disabled) {
-  background: var(--color-primary-hover);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+  box-shadow: 0 18px 34px rgba(15, 118, 110, 0.24);
 }
 
 .btn-secondary {
-  background: var(--color-primary);
-  color: var(--color-text-inverse);
+  background: rgba(255, 255, 255, 0.72);
+  color: var(--color-text-primary);
+  border-color: var(--color-border-light);
 }
 
 .btn-secondary:hover:not(:disabled) {
-  background: var(--color-primary-hover);
+  background: var(--color-bg-hover);
+  border-color: var(--color-border-medium);
+  transform: translateY(-1px);
 }
 
 .btn-danger {
-  background: var(--color-danger);
+  background: linear-gradient(135deg, var(--color-danger), var(--color-danger-hover));
   color: var(--color-text-inverse);
 }
 
 .btn-danger:hover:not(:disabled) {
-  background: var(--color-danger-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 16px 30px rgba(220, 38, 38, 0.18);
 }
 
 .btn-success {
-  background: var(--color-success);
+  background: linear-gradient(135deg, var(--color-success), var(--color-success-hover));
   color: var(--color-text-inverse);
 }
 
 .btn-success:hover:not(:disabled) {
-  background: var(--color-success-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 16px 30px rgba(21, 128, 61, 0.18);
 }
 
 .btn-outline {
-  background: transparent;
+  background: rgba(255, 255, 255, 0.28);
   color: var(--color-primary);
   border: var(--border-width-thin) solid var(--color-primary);
 }
 
 .btn-outline:hover:not(:disabled) {
-  background: var(--color-primary);
-  color: var(--color-text-inverse);
+  background: var(--color-primary-light);
+  transform: translateY(-1px);
 }
 
 .btn-ghost {
-  background: var(--color-bg-surface);
+  background: rgba(255, 255, 255, 0.62);
   color: var(--color-text-primary);
   border: var(--border-width-thin) solid var(--color-border-medium);
 }
@@ -175,6 +188,8 @@
 .btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
+  box-shadow: none;
+  transform: none;
 }
 
 /* ============================================
@@ -200,8 +215,8 @@
   border-radius: var(--input-border-radius);
   font-size: var(--font-size-base);
   color: var(--color-text-primary);
-  background: var(--color-bg-surface);
-  transition: var(--transition-base);
+  background: rgba(255, 255, 255, 0.72);
+  transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), transform var(--transition-base);
   box-sizing: border-box;
 }
 
@@ -209,6 +224,8 @@
   outline: none;
   border-color: var(--input-focus-border-color);
   box-shadow: var(--input-focus-shadow);
+  background: var(--color-bg-elevated);
+  transform: translateY(-1px);
 }
 
 .form-input::placeholder {
@@ -222,7 +239,7 @@
   border-radius: var(--input-border-radius);
   font-size: var(--font-size-base);
   color: var(--color-text-primary);
-  background: var(--color-bg-surface);
+  background: rgba(255, 255, 255, 0.72);
   cursor: pointer;
   transition: var(--transition-base);
 }
@@ -231,6 +248,7 @@
   outline: none;
   border-color: var(--input-focus-border-color);
   box-shadow: var(--input-focus-shadow);
+  background: var(--color-bg-elevated);
 }
 
 /* ============================================