style(css): enforce high-contrast typography and explicit text colors across dark and light backgrounds

src/frontend/src/assets/douzone.css

@@ -1,27 +1,27 @@
 /* Douzone ERP & Enterprise Premium Design System for Vue 3 SPA */
 
 :root {
-  --douzone-navy: #2C3E50;
+  --douzone-navy: #1E293B;
-  --douzone-slate: #34495E;
+  --douzone-slate: #334155;
-  --douzone-bg: #F4F6F9;
+  --douzone-bg: #F1F5F9;
   --douzone-border: #CBD5E1;
   --douzone-input-bg: #FFFFFF;
-  --douzone-readonly-bg: #ECF0F1;
+  --douzone-readonly-bg: #F8FAFC;
 
-  --status-pass: #2ECC71;
+  --status-pass: #059669;
-  --status-pass-bg: #E8F8F5;
+  --status-pass-bg: #D1FAE5;
-  --status-pass-text: #117864;
+  --status-pass-text: #047857;
 
-  --status-warning: #F39C12;
+  --status-warning: #D97706;
-  --status-warning-bg: #FEF9E7;
+  --status-warning-bg: #FEF3C7;
-  --status-warning-text: #B9770E;
+  --status-warning-text: #92400E;
 
-  --status-error: #E74C3C;
+  --status-error: #DC2626;
-  --status-error-bg: #FDEDEC;
+  --status-error-bg: #FFE4E6;
-  --status-error-text: #922B21;
+  --status-error-text: #9F1239;
 
-  --focus-highlight: #2980B9;
+  --focus-highlight: #2563EB;
-  --focus-box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.25);
+  --focus-box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
 }
 
 * {
@@ -40,6 +40,18 @@ body {
   overflow: hidden;
 }
 
+/* Form Element Fonts & High Contrast Defaults */
+input, select, textarea, button {
+  font-family: inherit;
+  font-size: inherit;
+  color: #0F172A;
+}
+
+input::placeholder, textarea::placeholder {
+  color: #94A3B8 !important;
+  opacity: 1;
+}
+
 /* Base Layout Utilities */
 .flex { display: flex; }
 .flex-col { display: flex; flex-direction: column; }
@@ -68,6 +80,7 @@ body {
 .p-2 { padding: 8px; }
 .p-3 { padding: 12px; }
 .p-4 { padding: 16px; }
+.p-5 { padding: 20px; }
 .p-6 { padding: 24px; }
 
 .px-2 { padding-left: 8px; padding-right: 8px; }
@@ -96,53 +109,56 @@ body {
 .sticky { position: sticky; }
 .bottom-0 { bottom: 0; }
 
-/* Colors & Backgrounds */
+/* Backgrounds & Text Color Contrast Safety */
-.bg-white { background-color: #FFFFFF; }
+.bg-white { background-color: #FFFFFF; color: #0F172A; }
-.bg-slate-50 { background-color: #F8FAFC; }
+.bg-slate-50 { background-color: #F8FAFC; color: #0F172A; }
-.bg-slate-100 { background-color: #F1F5F9; }
+.bg-slate-100 { background-color: #F1F5F9; color: #0F172A; }
-.bg-slate-200 { background-color: #E2E8F0; }
+.bg-slate-200 { background-color: #E2E8F0; color: #0F172A; }
-.bg-slate-800 { background-color: #1E293B; }
+.bg-slate-800 { background-color: #1E293B; color: #F8FAFC; }
-.bg-slate-900 { background-color: #0F172A; }
+.bg-slate-900 { background-color: #0F172A; color: #F8FAFC; }
-.bg-blue-50 { background-color: #EFF6FF; }
+.bg-blue-50 { background-color: #EFF6FF; color: #1E40AF; }
-.bg-blue-100 { background-color: #DBEAFE; }
+.bg-blue-100 { background-color: #DBEAFE; color: #1E40AF; }
-.bg-blue-600 { background-color: #2563EB; }
+.bg-blue-600 { background-color: #2563EB; color: #FFFFFF; }
-.bg-blue-700 { background-color: #1D4ED8; }
+.bg-blue-700 { background-color: #1D4ED8; color: #FFFFFF; }
-.bg-emerald-50 { background-color: #ECFDF5; }
+.bg-emerald-50 { background-color: #ECFDF5; color: #047857; }
-.bg-emerald-100 { background-color: #D1FAE5; }
+.bg-emerald-100 { background-color: #D1FAE5; color: #047857; }
-.bg-emerald-600 { background-color: #059669; }
+.bg-emerald-600 { background-color: #059669; color: #FFFFFF; }
-.bg-amber-50 { background-color: #FFFBEB; }
+.bg-amber-50 { background-color: #FFFBEB; color: #92400E; }
-.bg-amber-100 { background-color: #FEF3C7; }
+.bg-amber-100 { background-color: #FEF3C7; color: #92400E; }
-.bg-rose-50 { background-color: #FFF1F2; }
+.bg-rose-50 { background-color: #FFF1F2; color: #9F1239; }
-.bg-rose-100 { background-color: #FFE4E6; }
+.bg-rose-100 { background-color: #FFE4E6; color: #9F1239; }
-.bg-rose-600 { background-color: #E11D48; }
+.bg-rose-600 { background-color: #E11D48; color: #FFFFFF; }
 
-/* Text Styles */
+/* Text Color Classes */
 .text-xs { font-size: 12px; }
 .text-sm { font-size: 14px; }
 .text-base { font-size: 16px; }
 .text-xl { font-size: 20px; }
 .font-bold { font-weight: 700; }
+.font-extrabold { font-weight: 800; }
 .font-semibold { font-weight: 600; }
 .font-medium { font-weight: 500; }
 .font-mono { font-family: monospace; }
 .text-right { text-align: right; }
 .text-center { text-align: center; }
 
-.text-white { color: #FFFFFF; }
+.text-white { color: #FFFFFF !important; }
-.text-slate-400 { color: #94A3B8; }
+.text-amber-300 { color: #FCD34D !important; }
-.text-slate-500 { color: #64748B; }
+.text-slate-400 { color: #94A3B8 !important; }
-.text-slate-600 { color: #475569; }
+.text-slate-500 { color: #64748B !important; }
-.text-slate-700 { color: #334155; }
+.text-slate-600 { color: #475569 !important; }
-.text-slate-800 { color: #1E293B; }
+.text-slate-700 { color: #334155 !important; }
-.text-slate-900 { color: #0F172A; }
+.text-slate-800 { color: #1E293B !important; }
-.text-blue-600 { color: #2563EB; }
+.text-slate-900 { color: #0F172A !important; }
-.text-blue-700 { color: #1D4ED8; }
+.text-blue-600 { color: #2563EB !important; }
-.text-blue-800 { color: #1E40AF; }
+.text-blue-700 { color: #1D4ED8 !important; }
-.text-emerald-600 { color: #059669; }
+.text-blue-800 { color: #1E40AF !important; }
-.text-emerald-700 { color: #047857; }
+.text-emerald-600 { color: #059669 !important; }
-.text-amber-800 { color: #92400E; }
+.text-emerald-700 { color: #047857 !important; }
-.text-rose-700 { color: #BE123C; }
+.text-amber-800 { color: #92400E !important; }
-.text-rose-800 { color: #9F1239; }
+.text-rose-600 { color: #DC2626 !important; }
+.text-rose-700 { color: #BE123C !important; }
+.text-rose-800 { color: #9F1239 !important; }
 
 /* Borders & Shadows */
 .border { border-width: 1px; border-style: solid; }
@@ -161,22 +177,24 @@ body {
 .rounded-lg { border-radius: 8px; }
 .rounded-full { border-radius: 9999px; }
 
-.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
+.shadow-xs { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
+.shadow-sm { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
 .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
 .transition { transition: all 0.15s ease-in-out; }
 
-/* AG Grid Enterprise High-Density Theme Override */
+/* AG Grid High-Contrast Custom Theme Override */
 .ag-theme-alpine {
   width: 100%;
   height: 100%;
-  min-height: 400px;
+  min-height: 200px;
-  --ag-header-background-color: #F8FAFC;
+  --ag-header-background-color: #F1F5F9;
-  --ag-header-foreground-color: #1E293B;
+  --ag-header-foreground-color: #0F172A;
+  --ag-data-color: #0F172A;
   --ag-selected-row-background-color: rgba(37, 99, 235, 0.12);
-  --ag-row-hover-color: rgba(226, 232, 240, 0.6);
+  --ag-row-hover-color: rgba(226, 232, 240, 0.7);
   --ag-font-size: 12px;
   --ag-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  --ag-border-color: #E2E8F0;
+  --ag-border-color: #CBD5E1;
   --ag-row-height: 36px;
   --ag-header-height: 38px;
 }
@@ -188,5 +206,5 @@ body {
 
 .ag-header-cell-label {
   font-weight: 700 !important;
-  color: #1E293B !important;
+  color: #0F172A !important;
 }