diff --git a/src/app/globals.css b/src/app/globals.css
index 7c8b7db..ceb7236 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -201,6 +201,56 @@ html.custom {
   );
 }
 
+:root {
+  --shadow-rgb: 15 23 42;
+
+  --surface: var(--base);
+  --surface-solid: color-mix(in srgb, var(--base) 96%, var(--background));
+  --surface-sunken: color-mix(in srgb, var(--base) 80%, var(--background));
+
+  --line: color-mix(in srgb, var(--offbase) 70%, transparent);
+  --line-soft: color-mix(in srgb, var(--offbase) 45%, transparent);
+  --line-strong: var(--offbase);
+
+  --soft: color-mix(in srgb, var(--foreground) 74%, var(--muted));
+  --faint: color-mix(in srgb, var(--foreground) 52%, var(--muted));
+
+  --accent-wash: color-mix(in srgb, var(--accent) 12%, transparent);
+  --accent-line: color-mix(in srgb, var(--accent) 40%, transparent);
+  --accent-strong: color-mix(in srgb, var(--accent) 88%, var(--foreground));
+
+  --danger: #dc2626;
+  --danger-wash: color-mix(in srgb, var(--danger) 12%, transparent);
+
+  --elev-1: 0 1px 2px rgb(var(--shadow-rgb) / 0.10);
+  --elev-2: 0 6px 16px rgb(var(--shadow-rgb) / 0.16);
+  --elev-3: 0 18px 45px rgb(var(--shadow-rgb) / 0.22);
+
+  --dur-fast: 120ms;
+  --dur-base: 180ms;
+  --dur-slow: 260ms;
+  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+
+html.light,
+html.lavender,
+html.rose,
+html.sand,
+html.sky,
+html.slate {
+  --shadow-rgb: 15 23 42;
+}
+
+html.dark,
+html.ocean,
+html.forest,
+html.sunset,
+html.sea,
+html.mint,
+html.custom {
+  --shadow-rgb: 0 0 0;
+}
+
 body {
   color: var(--foreground);
   background: var(--background);
@@ -248,6 +298,17 @@ h1, h2, h3, h4, h5, h6 {
   to { opacity: 1; }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 1ms !important;
+  }
+}
+
 /* Hide react-pdf's default tiny "Loading page..." placeholder to avoid jarring layout shifts. */
 .pdf-viewer .react-pdf__message {
   display: none !important;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index faf6453..74165b5 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -18,6 +18,38 @@ export default {
         accent: "var(--accent)",
         "secondary-accent": "var(--secondary-accent)",
         muted: "var(--muted)",
+        surface: "var(--surface)",
+        "surface-solid": "var(--surface-solid)",
+        "surface-sunken": "var(--surface-sunken)",
+        line: "var(--line)",
+        "line-soft": "var(--line-soft)",
+        "line-strong": "var(--line-strong)",
+        soft: "var(--soft)",
+        faint: "var(--faint)",
+        "accent-wash": "var(--accent-wash)",
+        "accent-line": "var(--accent-line)",
+        "accent-strong": "var(--accent-strong)",
+        danger: "var(--danger)",
+        "danger-wash": "var(--danger-wash)",
+      },
+      boxShadow: {
+        "elev-1": "var(--elev-1)",
+        "elev-2": "var(--elev-2)",
+        "elev-3": "var(--elev-3)",
+      },
+      borderRadius: {
+        sm: "6px",
+        md: "10px",
+        lg: "14px",
+        pill: "999px",
+      },
+      transitionDuration: {
+        fast: "var(--dur-fast)",
+        base: "var(--dur-base)",
+        slow: "var(--dur-slow)",
+      },
+      transitionTimingFunction: {
+        standard: "var(--ease)",
       },
       animation: {
         'spin-slow': 'spin 2s linear infinite',