feat(css): apply custom earthy color scheme #3D2200 #F8FDDD #FF851B

static/css/custom.css

@@ -1,88 +1,113 @@
-/* Custom font overrides for DM Mono */
-html {
-  letter-spacing: normal;
+/* Custom color scheme override */
+:root {
+  /* Light theme */
+  --color-background: #F8FDDD;
+  --color-background-secondary: #f0e8cc;
+  --color-background-header: #F8FDDD;
+  --color-text: #3D2200;
+  --color-text-secondary: #5a3a0a;
+  --color-border: #e6d4b3;
+  
+  /* Dark theme (inverted for good contrast) */
+  --color-background-dark: #2d1d00;
+  --color-background-secondary-dark: #4a3700;
+  --color-text-dark: #F8FDDD;
+  --color-text-secondary-dark: #e6d4b3;
+  --color-border-dark: #664b00;
+  
+  /* Accents */
+  --color-accent: #FF851B;
+  --color-accent-hover: #e67315;
 }
 
+/* Light theme overrides */
+.light {
+  background-color: var(--color-background);
+  color: var(--color-text);
+}
+
+.light .content-inner {
+  background-color: var(--color-background);
+  color: var(--color-text);
+}
+
+.light h1, .light h2, .light h3, .light h4, .light h5, .light h6 {
+  color: var(--color-text);
+}
+
+.light a {
+  color: var(--color-accent);
+}
+
+.light a:hover {
+  color: var(--color-accent-hover);
+}
+
+.light .border {
+  border-color: var(--color-border);
+}
+
+/* Dark theme overrides */
+.dark {
+  background-color: var(--color-background-dark);
+  color: var(--color-text-dark);
+}
+
+.dark .content-inner {
+  background-color: var(--color-background-dark);
+  color: var(--color-text-dark);
+}
+
+.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
+  color: var(--color-text-dark);
+}
+
+.dark a {
+  color: var(--color-accent);
+}
+
+.dark a:hover {
+  color: var(--color-accent-hover);
+}
+
+.dark .border {
+  border-color: var(--color-border-dark);
+}
+
+/* Personal theme overrides (if active) */
 body {
-  font-family: 'DM Mono', monospace;
-  font-weight: 400;
-  line-height: 1.6;
+  background-color: var(--color-background, #F8FDDD);
+  color: var(--color-text, #3D2200);
 }
 
-/* Headings */
-h1, h2, h3, h4, h5, h6 {
-  font-family: 'DM Mono', monospace;
-  font-weight: 500;
+header {
+  border-bottom-color: var(--color-border, #e6d4b3);
 }
 
-/* Code blocks and inline code */
-pre, code, kbd, samp {
-  font-family: 'DM Mono', monospace;
+nav a {
+  color: var(--color-text-secondary, #5a3a0a);
 }
 
-/* Logo */
-.logo {
-  font-family: 'DM Mono', monospace;
+nav a:hover, nav a.active {
+  color: var(--color-text, #3D2200);
 }
 
-/* Prism.js syntax highlighting */
-.token,
-.language-css .token,
-.language-scss .token,
-.language-sass .token,
-.language-less .token,
-.language-stylus .token,
-.language-json .token,
-.language-markup .token,
-.language-javascript .token,
-.language-typescript .token,
-.language-jsx .token,
-.language-tsx .token,
-.language-python .token,
-.language-ruby .token,
-.language-java .token,
-.language-c .token,
-.language-cpp .token,
-.language-csharp .token,
-.language-go .token,
-.language-rust .token,
-.language-php .token,
-.language-swift .token,
-.language-kotlin .token,
-.language-scala .token,
-.language-haskell .token,
-.language-elixir .token,
-.language-erlang .token,
-.language-clojure .token,
-.language-lua .token,
-.language-perl .token,
-.language-sql .token,
-.language-graphql .token,
-.language-yaml .token,
-.language-toml .token,
-.language-bash .token,
-.language-shell .token,
-.language-docker .token,
-.language-nginx .token,
-.language-apache .token,
-.language-vim .token,
-.language-git .token,
-.language-diff .token {
-  font-family: 'DM Mono', monospace;
+nav a.active::after {
+  background-color: var(--color-text, #3D2200);
 }
 
-/* Normalize.css overrides */
-code,
-kbd,
-samp,
-pre,
-input,
-textarea,
-select {
-  font-family: 'DM Mono', monospace;
+footer {
+  border-top-color: var(--color-border, #e6d4b3);
+  color: var(--color-text-secondary, #5a3a0a);
 }
 
-/* Keep serif for blockquote decorative element */
-blockquote:before {
-  font-family: Georgia, serif;
+/* Buttons and interactive elements */
+button, .button {
+  background-color: var(--color-accent);
+  color: white;
+  border-color: var(--color-accent);
+}
+
+button:hover, .button:hover {
+  background-color: var(--color-accent-hover);
 }