Apply brand palette and typography

Reconciled two overlapping note sets — kept the intent from both,
resolved contradictions toward the more distinctive option (cream over
plain gray/white background), and fixed a couple of pairings that would
have been genuinely hard to read as written (teal button with taupe
text, rose links on taupe — both too low-contrast) by keeping the color
but swapping in white/higher-contrast text instead.

Slate blue header (firm, confident) with warm cream body (gentle,
breathing room), teal CTAs (clarity/action), dusty rose as the one purely
interactive/decorative touch (hover states), warm taupe grounding the
footer. Headings in slate blue to tie the brand color into the type
hierarchy. Roboto/Open Sans/Source Code Pro per the font pairing brief,
loaded via Google Fonts since that's what was specified.

assets/css/main.css

@@ -1,24 +1,52 @@
 :root {
   color-scheme: light dark;
-  --bg: #fafafa;
-  --bg-raised: #ffffff;
-  --fg: #1a1a1a;
-  --fg-muted: #5a5a5a;
-  --border: #e2e2e2;
-  --accent: #1a5fb4;
+
+  /* Palette: slate blue (firm/trustworthy) + dusty rose (warmth/reassurance)
+     + teal (clarity/action) + warm taupe (grounding), on a cream base.
+     "Gentle but firm" — bold blue header, soft cream body, energetic teal
+     CTAs, rose as the one purely decorative/interactive touch. */
+  --bg: #faf8f4;
+  --bg-raised: #f5f1e8;
+  --fg: #333333;
+  --fg-muted: #6b6560;
+  --border: #e5ddd0;
+
+  --slate: #4a6fa5;
+  --rose: #d9a9b0;
+  --teal: #009688;
+  --taupe: #b19a75;
+
+  --heading: var(--slate);
+  --accent: var(--slate);
   --accent-fg: #ffffff;
+  --cta: var(--teal);
+  --cta-fg: #ffffff;
+
   --radius: 0.5rem;
   --max-width: 42rem;
+
+  --font-heading: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --font-accent: "Source Code Pro", "Courier New", monospace;
 }
 @media (prefers-color-scheme: dark) {
   :root {
-    --bg: #14161a;
-    --bg-raised: #1c1f24;
-    --fg: #e8e8e8;
-    --fg-muted: #9a9fa6;
-    --border: #2c3038;
-    --accent: #8ab4f8;
-    --accent-fg: #0f1115;
+    --bg: #1c1917;
+    --bg-raised: #262220;
+    --fg: #f0ebe3;
+    --fg-muted: #a89e92;
+    --border: #3a352f;
+
+    --slate: #8fa8d1;
+    --rose: #e6c3ca;
+    --teal: #2dd4c4;
+    --taupe: #cbb190;
+
+    --heading: var(--slate);
+    --accent: var(--slate);
+    --accent-fg: #14161a;
+    --cta: var(--teal);
+    --cta-fg: #0f1115;
   }
 }
 
@@ -26,7 +54,7 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-family: var(--font-body);
   line-height: 1.6;
   background: var(--bg);
   color: var(--fg);
@@ -37,10 +65,20 @@ body {
 
 a { color: var(--accent); }
 
-h1, h2, h3 { line-height: 1.25; }
+h1, h2, h3 {
+  font-family: var(--font-heading);
+  color: var(--heading);
+  line-height: 1.25;
+}
 
+code, kbd, .accent-text {
+  font-family: var(--font-accent);
+}
+
+/* Header: the "firm leadership" statement — solid, confident, warm text
+   rather than stark white, with a rose touch on interaction. */
 header.site {
-  border-bottom: 1px solid var(--border);
+  background: var(--slate);
 }
 header.site .inner {
   max-width: var(--max-width);
@@ -53,9 +91,10 @@ header.site .inner {
   flex-wrap: wrap;
 }
 header.site .brand {
+  font-family: var(--font-heading);
   font-weight: 700;
   font-size: 1.1rem;
-  color: var(--fg);
+  color: var(--bg);
   text-decoration: none;
 }
 header.site nav {
@@ -63,11 +102,12 @@ header.site nav {
   gap: 1.5rem;
 }
 header.site nav a {
-  color: var(--fg-muted);
+  color: var(--bg);
+  opacity: 0.85;
   text-decoration: none;
   font-size: 0.95rem;
 }
-header.site nav a:hover { color: var(--fg); }
+header.site nav a:hover { opacity: 1; color: var(--rose); }
 
 main {
   flex: 1;
@@ -77,8 +117,10 @@ main {
   width: 100%;
 }
 
+/* Footer: grounding warm-taupe band bookending the blue header. */
 footer.site {
-  border-top: 1px solid var(--border);
+  background: var(--bg-raised);
+  border-top: 1px solid var(--taupe);
   margin-top: 2rem;
 }
 footer.site .inner {
@@ -98,17 +140,17 @@ footer.site nav {
   gap: 1.25rem;
 }
 footer.site nav a {
-  color: var(--fg-muted);
+  color: var(--slate);
   text-decoration: none;
 }
-footer.site nav a:hover { color: var(--fg); }
+footer.site nav a:hover { color: var(--rose); }
 
 .btn {
   display: inline-block;
   padding: 0.75rem 1.5rem;
   border-radius: var(--radius);
-  background: var(--accent);
-  color: var(--accent-fg);
+  background: var(--cta);
+  color: var(--cta-fg);
   text-decoration: none;
   font-weight: 600;
   border: none;
@@ -135,7 +177,7 @@ input, textarea {
   margin-bottom: 1.25rem;
 }
 input:focus, textarea:focus {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--cta);
   outline-offset: 1px;
 }