From fc1581a9ff9328a4e95963c9f01d0695242aaa15 Mon Sep 17 00:00:00 2001
From: Andy Charlwood <andrew.charlwood@gmail.com>
Date: Sun, 15 Feb 2026 14:26:53 +0000
Subject: [PATCH] feat: US-008 - Align login card border radius and shadow with
 dashboard design system

---
 Ralph/prd.json                 |  2 +-
 Ralph/progress.txt             | 12 ++++++++++++
 src/components/LoginScreen.tsx | 10 +++++-----
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/Ralph/prd.json b/Ralph/prd.json
index 4d549df..0194823 100644
--- a/Ralph/prd.json
+++ b/Ralph/prd.json
@@ -129,7 +129,7 @@
         "Verify in browser using dev-browser skill"
       ],
       "priority": 8,
-      "passes": false,
+      "passes": true,
       "notes": "Check index.css for whether --radius-card and --radius-sm exist as CSS custom properties. If not, use the hardcoded values (8px and 6px) directly. The card shadow is currently set via inline style — update to the shadow-lg value. The login card borderRadius is in the card's inline style object."
     },
     {
diff --git a/Ralph/progress.txt b/Ralph/progress.txt
index 6dc9763..3a3fa01 100644
--- a/Ralph/progress.txt
+++ b/Ralph/progress.txt
@@ -144,3 +144,15 @@
   - Framer Motion's `animate` prop interpolates from the element's current computed style, so the exit blur animation doesn't need the starting value explicitly
   - Only the initial style needs the constant; the exit target (`blur(0px)`) is always 0
 ---
+
+## 2026-02-15 - US-008: Align login card border radius and shadow with dashboard design system
+- Changed card borderRadius from `12px` to `var(--radius-card, 8px)`
+- Changed card boxShadow from `shadow-sm` (`0 1px 2px rgba(26,43,42,0.05)`) to `var(--shadow-lg, 0 8px 32px rgba(26,43,42,0.12))`
+- Changed username input, password input, and button borderRadius from `4px` to `var(--radius-sm, 6px)`
+- All values use CSS custom property references with fallbacks
+- Files changed: `src/components/LoginScreen.tsx`
+- **Learnings for future iterations:**
+  - CSS tokens `--radius-card`, `--radius-sm`, `--shadow-sm`, `--shadow-md`, `--shadow-lg` are all defined in `index.css` `:root` — use `var()` references with fallback values
+  - The button has 18-space indentation vs 20-space for inputs — `replace_all` may not catch all instances if matching on indentation
+  - The spinner (`borderRadius: '50%'`) and status indicator dot should NOT be changed — they're circles, not card elements
+---
diff --git a/src/components/LoginScreen.tsx b/src/components/LoginScreen.tsx
index 9456935..db68a00 100644
--- a/src/components/LoginScreen.tsx
+++ b/src/components/LoginScreen.tsx
@@ -192,9 +192,9 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
           width: 'clamp(320px, 28vw, 480px)',
           maxWidth: 'calc(100vw - 32px)',
           padding: 'clamp(24px, 2.5vw, 40px)',
-          borderRadius: '12px',
+          borderRadius: 'var(--radius-card, 8px)',
           border: '1px solid #E4EDEB',
-          boxShadow: '0 1px 2px rgba(26,43,42,0.05)',
+          boxShadow: 'var(--shadow-lg, 0 8px 32px rgba(26,43,42,0.12))',
           backgroundColor: 'var(--surface, #FFFFFF)',
         }}
         initial={{ opacity: 0, scale: 0.98 }}
@@ -295,7 +295,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
                     fontSize: 'clamp(13px, 1.1vw, 15px)',
                     backgroundColor: activeField === 'username' ? 'var(--surface, #FFFFFF)' : 'var(--bg-dashboard, #F0F5F4)',
                     border: activeField === 'username' ? '1px solid var(--accent, #0D6E6E)' : '1px solid #E4EDEB',
-                    borderRadius: '4px',
+                    borderRadius: 'var(--radius-sm, 6px)',
                     color: '#111827',
                     minHeight: '38px',
                     display: 'flex',
@@ -337,7 +337,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
                     fontSize: 'clamp(13px, 1.1vw, 15px)',
                     backgroundColor: activeField === 'password' ? 'var(--surface, #FFFFFF)' : 'var(--bg-dashboard, #F0F5F4)',
                     border: activeField === 'password' ? '1px solid var(--accent, #0D6E6E)' : '1px solid #E4EDEB',
-                    borderRadius: '4px',
+                    borderRadius: 'var(--radius-sm, 6px)',
                     color: '#111827',
                     letterSpacing: '0.15em',
                     minHeight: '38px',
@@ -375,7 +375,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
                   color: '#FFFFFF',
                   backgroundColor: buttonBg,
                   border: 'none',
-                  borderRadius: '4px',
+                  borderRadius: 'var(--radius-sm, 6px)',
                   cursor: canLogin ? 'pointer' : 'default',
                   opacity: canLogin ? 1 : 0.6,
                   transition: 'background-color 150ms, opacity 300ms',