diff --git a/frontend-v2/src/app.css b/frontend-v2/src/app.css index 74465c2..f952d74 100644 --- a/frontend-v2/src/app.css +++ b/frontend-v2/src/app.css @@ -106,72 +106,72 @@ /* ── LIGHT MODE ── */ :root { /* Surface hierarchy: canvas (page bg) → surface (sidebars, panels) → card (content containers) */ - --canvas: #F4F5F7; + --canvas: #F3F4F6; --surface: #FFFFFF; - --surface-secondary: #F8F9FA; + --surface-secondary: #F7F8FA; --card: #FFFFFF; - --card-secondary: #F8F9FA; - --card-hover: #F0F1F4; + --card-secondary: #F7F8FA; + --card-hover: #EDEEF2; /* Borders */ - --border: rgba(0,0,0,0.07); - --border-strong: rgba(0,0,0,0.12); + --border: rgba(0,0,0,0.06); + --border-strong: rgba(0,0,0,0.10); /* Text hierarchy: 1 (headings/names) → 2 (body) → 3 (labels/meta) → 4 (placeholder/disabled) */ - --text-1: #1a1a1f; - --text-2: #4a4a55; - --text-3: #6b6b76; - --text-4: #b4b4bd; + --text-1: #111118; + --text-2: #3d3d4a; + --text-3: #6b6b78; + --text-4: #a8a8b3; - /* Accent — indigo */ - --accent: #4F46E5; + /* Accent — deep indigo */ + --accent: #4338CA; --accent-bg: #EEF2FF; - --accent-dim: rgba(79,70,229,0.06); - --accent-border: rgba(79,70,229,0.10); - --accent-focus: rgba(79,70,229,0.12); + --accent-dim: rgba(67,56,202,0.06); + --accent-border: rgba(67,56,202,0.12); + --accent-focus: rgba(67,56,202,0.14); /* Semantic: success */ - --success: #16A34A; - --success-bg: #F0FDF4; - --success-dim: rgba(34,197,94,0.08); + --success: #059669; + --success-bg: #ECFDF5; + --success-dim: rgba(5,150,105,0.07); /* Semantic: error */ --error: #DC2626; --error-bg: #FEF2F2; - --error-dim: rgba(239,68,68,0.08); + --error-dim: rgba(220,38,38,0.06); /* Semantic: warning */ - --warning: #d97706; - --warning-bg: rgba(245,158,11,0.08); + --warning: #D97706; + --warning-bg: rgba(217,119,6,0.07); /* Overlay */ - --overlay: rgba(0,0,0,0.3); - --overlay-strong: rgba(0,0,0,0.5); - --nav-bg: rgba(255,255,255,0.9); + --overlay: rgba(0,0,0,0.25); + --overlay-strong: rgba(0,0,0,0.45); + --nav-bg: rgba(255,255,255,0.92); } /* ── DARK MODE ── */ .dark { - --canvas: #09090b; - --surface: #0f0f12; - --surface-secondary: #111114; - --card: #161619; - --card-secondary: #111114; - --card-hover: #1c1c20; + --canvas: #0a0a0c; + --surface: #111114; + --surface-secondary: #141417; + --card: #18181c; + --card-secondary: #141417; + --card-hover: #1f1f24; - --border: rgba(255,255,255,0.06); - --border-strong: rgba(255,255,255,0.1); + --border: rgba(255,255,255,0.07); + --border-strong: rgba(255,255,255,0.12); - --text-1: #fafafa; + --text-1: #f4f4f5; --text-2: #a1a1aa; --text-3: #71717a; --text-4: #3f3f46; - --accent: #3b82f6; - --accent-bg: rgba(59,130,246,0.1); - --accent-dim: rgba(59,130,246,0.08); - --accent-border: rgba(59,130,246,0.12); - --accent-focus: rgba(59,130,246,0.15); + --accent: #6366F1; + --accent-bg: rgba(99,102,241,0.1); + --accent-dim: rgba(99,102,241,0.08); + --accent-border: rgba(99,102,241,0.14); + --accent-focus: rgba(99,102,241,0.16); --success: #22c55e; --success-bg: rgba(34,197,94,0.1); @@ -240,11 +240,13 @@ color: white; border: none; font-size: var(--text-sm); - font-weight: 500; + font-weight: 600; cursor: pointer; - transition: all var(--transition); + transition: all 0.2s ease; + letter-spacing: 0.01em; } -.btn-primary:hover { opacity: 0.9; } +.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); } +.btn-primary:active { transform: translateY(0); } .btn-primary.full { width: 100%; padding: var(--sp-3) var(--sp-4); @@ -296,7 +298,7 @@ outline: none; transition: border-color var(--transition); } -.input:focus { border-color: var(--accent); } +.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); } .input::placeholder { color: var(--text-4); } /* ── Module (card container) ── @@ -309,12 +311,18 @@ border: 1px solid var(--border); box-shadow: var(--shadow-sm); padding: var(--card-pad); - transition: box-shadow 0.25s ease, transform 0.25s ease; + transition: box-shadow 0.3s ease, transform 0.3s ease; +} +.module:hover { + box-shadow: var(--shadow-md); } .module.primary { padding: var(--card-pad-primary); box-shadow: var(--shadow-md); } +.module.primary:hover { + box-shadow: var(--shadow-lg); +} .module.flush { padding: 0; } .module-header { @@ -351,6 +359,10 @@ gap: var(--inner-gap); padding: var(--row-pad-y) var(--row-pad-x); transition: background 0.15s ease; + border-radius: var(--radius-sm); + margin: 0 calc(-1 * var(--sp-1)); + padding-left: calc(var(--row-pad-x) + var(--sp-1)); + padding-right: calc(var(--row-pad-x) + var(--sp-1)); } .data-row:hover { background: var(--card-hover); } .data-row + .data-row { border-top: 1px solid var(--border); } @@ -418,7 +430,14 @@ } /* ── Page wrapper ── */ -.page { padding: var(--sp-8) 0 var(--sp-20); } +.page { + padding: var(--sp-8) 0 var(--sp-20); + animation: pageIn 0.4s ease both; +} +@keyframes pageIn { + from { opacity: 0; transform: translateY(6px); } + to { opacity: 1; transform: translateY(0); } +} .page-header { margin-bottom: var(--section-gap); } .page-title { font-size: var(--text-xl);