diff --git a/src/components/atoms/Card/Card.tsx b/src/components/atoms/Card/Card.tsx
index f3a40d4..1a0e6bd 100644
--- a/src/components/atoms/Card/Card.tsx
+++ b/src/components/atoms/Card/Card.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import MuiCard from '@mui/material/Card';
 import type { CardProps as MuiCardProps } from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
-import type { Theme } from '@mui/material/styles';
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
@@ -14,7 +13,7 @@ export interface CardProps extends Omit<MuiCardProps, 'raised' | 'variant'> {
   interactive?: boolean;
   /** Highlights the card as selected — brand border + warm background tint */
   selected?: boolean;
-  /** Padding preset: "default" (24px), "compact" (16px), "none" (no wrapper) */
+  /** Padding preset: "default" (16px mobile / 24px desktop), "compact" (12px mobile / 16px desktop), "none" (no wrapper) */
   padding?: 'default' | 'compact' | 'none';
   /** Content to render inside the card */
   children?: React.ReactNode;
@@ -58,7 +57,18 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
     const muiVariant = variant === 'outlined' ? 'outlined' : undefined;
 
     // Interactive cards need keyboard operability
-    const interactiveProps = interactive ? { tabIndex: 0 as const, role: 'button' as const } : {};
+    const handleKeyDown = interactive
+      ? (e: React.KeyboardEvent<HTMLDivElement>) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            e.currentTarget.click();
+          }
+        }
+      : undefined;
+
+    const interactiveProps = interactive
+      ? { tabIndex: 0 as const, role: 'button' as const, onKeyDown: handleKeyDown }
+      : {};
 
     return (
       <MuiCard
@@ -86,7 +96,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
           // Focus-visible for keyboard accessibility on interactive cards
           interactive && {
             '&:focus-visible': {
-              outline: (theme: Theme) => `2px solid ${theme.palette.primary.main}`,
+              outline: '2px solid var(--fa-color-interactive-focus)',
               outlineOffset: '2px',
             },
           },
@@ -97,9 +107,9 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
         {padding !== 'none' ? (
           <CardContent
             sx={{
-              p: padding === 'compact' ? 4 : 6,
+              p: padding === 'compact' ? { xs: 3, md: 4 } : { xs: 4, md: 6 },
               '&:last-child': {
-                pb: padding === 'compact' ? 4 : 6,
+                pb: padding === 'compact' ? { xs: 3, md: 4 } : { xs: 4, md: 6 },
               },
             }}
           >
diff --git a/src/components/atoms/Input/Input.tsx b/src/components/atoms/Input/Input.tsx
index 3b99dee..63b0b0c 100644
--- a/src/components/atoms/Input/Input.tsx
+++ b/src/components/atoms/Input/Input.tsx
@@ -104,7 +104,7 @@ export const Input = React.forwardRef<HTMLDivElement, InputProps>(
               transform: 'none',
               maxWidth: 'none',
               pointerEvents: 'auto',
-              mb: '10px',
+              mb: 2.5,
               // labelLg typography
               fontFamily: (theme) => theme.typography.labelLg.fontFamily,
               fontSize: (theme) => theme.typography.labelLg.fontSize,
@@ -163,7 +163,7 @@ export const Input = React.forwardRef<HTMLDivElement, InputProps>(
             role={error ? 'alert' : undefined}
             sx={{
               mx: 0,
-              mt: '6px',
+              mt: 1.5,
               // caption typography
               fontFamily: (theme) => theme.typography.caption.fontFamily,
               fontSize: (theme) => theme.typography.caption.fontSize,