fix: improve frontend surface contrast

docs/TASKS/platform-scaffold/004-improve-ui-surface-contrast.md

@@ -0,0 +1,28 @@
+# Task: Improve UI Surface Contrast
+
+## Goal
+
+Increase contrast between the app background, panels, and form controls so inputs are easier to identify against white or near-white surfaces.
+
+## Feature Spec
+
+`docs/FEATURES/platform-scaffold.md`
+
+## Scope
+
+- Update the shared frontend color tokens.
+- Configure Vuetify to use the Socialize light theme colors.
+- Add shared form control and surface defaults for native and Vuetify controls.
+- Avoid feature-specific behavior changes.
+
+## Likely Files
+
+- `frontend/src/assets/main.css`
+- `frontend/src/main.js`
+
+## Validation
+
+```bash
+cd frontend
+npm run build
+```

frontend/src/assets/main.css

@@ -6,12 +6,18 @@
     --socialize-primary: #172033;
     --socialize-accent: #ff8a3d;
     --socialize-highlight: #2fa58d;
-    --h-background: #fffaf2;
+    --h-background: #f4f6f3;
     --h-on-background: #172033;
-    --h-surface: #ffffff;
+    --h-surface: #fbfaf6;
+    --h-surface-muted: #f1f5f2;
     --h-on-surface: #172033;
+    --h-control: #eef3ef;
+    --h-control-hover: #e7eee9;
+    --h-control-focus: #ffffff;
+    --h-border: #c7d2cc;
+    --h-border-strong: #94a39d;
     --h-primary: #172033;
-    --h-on-primary: #fffaf2;
+    --h-on-primary: #fbfaf6;
     --h-secondary: #fff3e2;
     --h-on-secondary: #172033;
     --h-tertiary: #d9f6ee;
@@ -20,6 +26,93 @@
     --h-on-error: #ffffff;
 }
 
+html,
+body,
+#app {
+    min-height: 100%;
+    background: var(--h-background);
+}
+
+input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
+select,
+textarea {
+    background-color: var(--h-control) !important;
+    border-color: var(--h-border) !important;
+    color: var(--h-on-surface);
+}
+
+input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):hover,
+select:hover,
+textarea:hover {
+    background-color: var(--h-control-hover) !important;
+    border-color: var(--h-border-strong) !important;
+}
+
+input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):focus,
+select:focus,
+textarea:focus,
+input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+    background-color: var(--h-control-focus) !important;
+    border-color: var(--socialize-highlight) !important;
+    box-shadow: 0 0 0 3px rgba(47, 165, 141, 0.16);
+    outline: none;
+}
+
+input::placeholder,
+textarea::placeholder {
+    color: #68778a;
+    opacity: 1;
+}
+
+.v-application {
+    background: var(--h-background) !important;
+    color: var(--h-on-background);
+}
+
+.v-card,
+.v-sheet,
+.v-list,
+.v-menu > .v-overlay__content,
+.v-dialog > .v-overlay__content {
+    background-color: var(--h-surface) !important;
+    border: 1px solid var(--h-border);
+}
+
+.v-field {
+    background-color: var(--h-control) !important;
+    color: var(--h-on-surface);
+}
+
+.v-field:hover {
+    background-color: var(--h-control-hover) !important;
+}
+
+.v-field--focused {
+    background-color: var(--h-control-focus) !important;
+}
+
+.v-field__outline {
+    color: var(--h-border-strong);
+}
+
+.v-field--focused .v-field__outline {
+    color: var(--socialize-highlight);
+}
+
+.v-field__input,
+.v-field-label {
+    color: var(--h-on-surface);
+}
+
+.panel,
+[class$='-panel'],
+[class$='-card'],
+div.card {
+    border-color: var(--h-border) !important;
+}
+
 @layer components {
     .btn {
         @apply min-w-24 w-full;

frontend/src/main.js

@@ -54,6 +54,25 @@ const vuetify = createVuetify({
         aliases,
         sets: { mdi },
     },
+    theme: {
+        defaultTheme: 'socializeLight',
+        themes: {
+            socializeLight: {
+                dark: false,
+                colors: {
+                    background: '#f4f6f3',
+                    surface: '#fbfaf6',
+                    primary: '#172033',
+                    secondary: '#fff3e2',
+                    accent: '#ff8a3d',
+                    error: '#bc2f2f',
+                    info: '#2563eb',
+                    success: '#2fa58d',
+                    warning: '#b45309',
+                },
+            },
+        },
+    },
 });
 
 const pinia = createPinia();