clause agent mode "make it look like papermod"

sass/abstracts/_abstracts.scss

@@ -2,4 +2,5 @@
 @import "variables/typography";
 @import "variables/structure";
 @import "variables/columns";
+@import "variables/custom-properties";
 @import "mixins/mixins";

sass/abstracts/variables/_colors.scss

@@ -1,20 +1,58 @@
-$color__background-body: #fff;
-$color__background-screen: #f1f1f1;
-$color__background-hr: #ccc;
-$color__background-button: #e6e6e6;
-$color__background-pre: #eee;
-$color__background-ins: #fff9c0;
+// PaperMod inspired color palette
+// Light theme colors
+$color__background-body: #ffffff;
+$color__background-screen: #f8f9fa;
+$color__background-hr: #e9ecef;
+$color__background-button: #6c757d;
+$color__background-pre: #f8f9fa;
+$color__background-ins: #fff3cd;
+$color__background-card: #ffffff;
+$color__background-header: rgba(255, 255, 255, 0.95);
 
-$color__text-screen: #21759b;
-$color__text-input: #666;
-$color__text-input-focus: #111;
-$color__link: #4169e1; //royalblue
-$color__link-visited: #800080; //purple
-$color__link-hover: #191970; //midnightblue
-$color__text-main: #404040;
+// Dark theme colors (CSS custom properties will be used for theme switching)
+$color__dark-background-body: #1a1a1a;
+$color__dark-background-screen: #2d2d2d;
+$color__dark-background-card: #212529;
+$color__dark-background-header: rgba(26, 26, 26, 0.95);
 
-$color__border-button: #ccc #ccc #bbb;
-$color__border-button-hover: #ccc #bbb #aaa;
-$color__border-button-focus: #aaa #bbb #bbb;
-$color__border-input: #ccc;
-$color__border-abbr: #666;
+// Text colors
+$color__text-screen: #495057;
+$color__text-input: #495057;
+$color__text-input-focus: #212529;
+$color__text-main: #212529;
+$color__text-muted: #6c757d;
+$color__text-light: #868e96;
+
+// Dark theme text
+$color__dark-text-main: #f8f9fa;
+$color__dark-text-muted: #adb5bd;
+$color__dark-text-light: #6c757d;
+
+// Link colors
+$color__link: #0d6efd;
+$color__link-visited: #6f42c1;
+$color__link-hover: #0a58ca;
+
+// Dark theme links
+$color__dark-link: #6ea8fe;
+$color__dark-link-visited: #a370f7;
+$color__dark-link-hover: #9ec5fe;
+
+// Border colors
+$color__border-button: #6c757d;
+$color__border-button-hover: #5c636a;
+$color__border-button-focus: #565e64;
+$color__border-input: #ced4da;
+$color__border-abbr: #495057;
+$color__border-main: #dee2e6;
+
+// Dark theme borders
+$color__dark-border-main: #495057;
+$color__dark-border-input: #495057;
+
+// Accent colors
+$color__accent-primary: #0d6efd;
+$color__accent-success: #198754;
+$color__accent-warning: #ffc107;
+$color__accent-danger: #dc3545;
+$color__accent-info: #0dcaf0;

sass/abstracts/variables/_custom-properties.scss

@@ -0,0 +1,74 @@
+// CSS Custom Properties for theme switching
+// This allows dynamic switching between light and dark themes
+
+:root {
+  // Light theme (default)
+  --color-bg-primary: #{$color__background-body};
+  --color-bg-secondary: #{$color__background-screen};
+  --color-bg-card: #{$color__background-card};
+  --color-bg-header: #{$color__background-header};
+  
+  --color-text-primary: #{$color__text-main};
+  --color-text-secondary: #{$color__text-muted};
+  --color-text-tertiary: #{$color__text-light};
+  
+  --color-link: #{$color__link};
+  --color-link-visited: #{$color__link-visited};
+  --color-link-hover: #{$color__link-hover};
+  
+  --color-border-primary: #{$color__border-main};
+  --color-border-secondary: #{$color__border-input};
+  
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  --shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  
+  // Transitions
+  --transition-default: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  --transition-fast: all 0.15s ease-in-out;
+}
+
+// Dark theme
+[data-theme="dark"] {
+  --color-bg-primary: #{$color__dark-background-body};
+  --color-bg-secondary: #{$color__dark-background-screen};
+  --color-bg-card: #{$color__dark-background-card};
+  --color-bg-header: #{$color__dark-background-header};
+  
+  --color-text-primary: #{$color__dark-text-main};
+  --color-text-secondary: #{$color__dark-text-muted};
+  --color-text-tertiary: #{$color__dark-text-light};
+  
+  --color-link: #{$color__dark-link};
+  --color-link-visited: #{$color__dark-link-visited};
+  --color-link-hover: #{$color__dark-link-hover};
+  
+  --color-border-primary: #{$color__dark-border-main};
+  --color-border-secondary: #{$color__dark-border-input};
+  
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
+  --shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.7), 0 10px 10px rgba(0, 0, 0, 0.8);
+}
+
+// Prefers dark color scheme
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --color-bg-primary: #{$color__dark-background-body};
+    --color-bg-secondary: #{$color__dark-background-screen};
+    --color-bg-card: #{$color__dark-background-card};
+    --color-bg-header: #{$color__dark-background-header};
+    
+    --color-text-primary: #{$color__dark-text-main};
+    --color-text-secondary: #{$color__dark-text-muted};
+    --color-text-tertiary: #{$color__dark-text-light};
+    
+    --color-link: #{$color__dark-link};
+    --color-link-visited: #{$color__dark-link-visited};
+    --color-link-hover: #{$color__dark-link-hover};
+    
+    --color-border-primary: #{$color__dark-border-main};
+    --color-border-secondary: #{$color__dark-border-input};
+    
+    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6);
+    --shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.7), 0 10px 10px rgba(0, 0, 0, 0.8);
+  }
+}

sass/abstracts/variables/_typography.scss

@@ -1,7 +1,30 @@
+// PaperMod inspired typography
 // stylelint-disable value-keyword-case
-$font__main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+$font__main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font__heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+$font__code: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
+$font__pre: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
 // stylelint-enable value-keyword-case
-$font__code: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
-$font__pre: "Courier 10 Pitch", courier, monospace;
-$font__line-height-body: 1.5;
-$font__line-height-pre: 1.6;
+
+// Font sizes
+$font__size-base: 16px;
+$font__size-small: 14px;
+$font__size-large: 18px;
+$font__size-h1: 2.5rem;
+$font__size-h2: 2rem;
+$font__size-h3: 1.75rem;
+$font__size-h4: 1.5rem;
+$font__size-h5: 1.25rem;
+$font__size-h6: 1rem;
+
+// Line heights
+$font__line-height-body: 1.6;
+$font__line-height-heading: 1.3;
+$font__line-height-pre: 1.4;
+
+// Font weights
+$font__weight-light: 300;
+$font__weight-normal: 400;
+$font__weight-medium: 500;
+$font__weight-semibold: 600;
+$font__weight-bold: 700;

sass/base/elements/_body.scss

@@ -1,3 +1,11 @@
 body {
-	background: $color__background-body; // Fallback for when there is no custom background color defined.
+	background: var(--color-bg-primary);
+	color: var(--color-text-primary);
+	font-family: $font__main;
+	font-size: $font__size-base;
+	line-height: $font__line-height-body;
+	font-weight: $font__weight-normal;
+	transition: var(--transition-default);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }

sass/base/elements/_links.scss

@@ -1,22 +1,38 @@
 a {
-	color: $color__link;
+	color: var(--color-link);
+	text-decoration: none;
+	transition: var(--transition-fast);
+	border-bottom: 1px solid transparent;
 
 	&:visited {
-		color: $color__link-visited;
+		color: var(--color-link-visited);
 	}
 
 	&:hover,
 	&:focus,
 	&:active {
-		color: $color__link-hover;
+		color: var(--color-link-hover);
+		border-bottom-color: var(--color-link-hover);
 	}
 
 	&:focus {
-		outline: thin dotted;
+		outline: 2px solid var(--color-link);
+		outline-offset: 2px;
+		border-radius: 2px;
 	}
 
 	&:hover,
 	&:active {
 		outline: 0;
 	}
+
+	// Remove underline for navigation links
+	.main-navigation &,
+	.site-branding & {
+		border-bottom: none;
+		
+		&:hover {
+			border-bottom: none;
+		}
+	}
 }

sass/base/typography/_headings.scss

@@ -5,4 +5,40 @@ h4,
 h5,
 h6 {
 	clear: both;
+	font-family: $font__heading;
+	font-weight: $font__weight-semibold;
+	line-height: $font__line-height-heading;
+	color: var(--color-text-primary);
+	margin-top: 0;
+	margin-bottom: 1rem;
+}
+
+h1 {
+	font-size: $font__size-h1;
+	font-weight: $font__weight-bold;
+	margin-bottom: 1.5rem;
+}
+
+h2 {
+	font-size: $font__size-h2;
+	margin-top: 2rem;
+	margin-bottom: 1rem;
+}
+
+h3 {
+	font-size: $font__size-h3;
+	margin-top: 1.5rem;
+}
+
+h4 {
+	font-size: $font__size-h4;
+}
+
+h5 {
+	font-size: $font__size-h5;
+}
+
+h6 {
+	font-size: $font__size-h6;
+	font-weight: $font__weight-medium;
 }

sass/components/content/_posts-and-pages.scss

@@ -1,23 +1,298 @@
+// PaperMod inspired post and page styles
 .sticky {
 	display: block;
+	position: relative;
+	
+	&::before {
+		content: '📌';
+		position: absolute;
+		top: 1rem;
+		right: 1rem;
+		font-size: 1.2rem;
+		z-index: 10;
+	}
 }
 
 .post,
 .page {
-	margin: 0 0 1.5em;
+	margin: 0 0 2rem;
+	background: var(--color-bg-card);
+	border-radius: 8px;
+	overflow: hidden;
+	transition: var(--transition-default);
+	
+	&:hover {
+		box-shadow: var(--shadow-hover);
+		transform: translateY(-2px);
+	}
+	
+	// Archive/blog page card layout
+	.home &,
+	.archive &,
+	.search-results & {
+		box-shadow: var(--shadow-card);
+		
+		.entry-header {
+			padding: 1.5rem 1.5rem 0;
+		}
+		
+		.entry-content,
+		.entry-summary {
+			padding: 0 1.5rem;
+		}
+		
+		.entry-footer {
+			padding: 0 1.5rem 1.5rem;
+		}
+	}
+	
+	// Single post/page layout
+	.single &,
+	.page & {
+		box-shadow: none;
+		background: transparent;
+		
+		&:hover {
+			transform: none;
+			box-shadow: none;
+		}
+	}
+}
+
+.entry-header {
+	margin-bottom: 1rem;
+	
+	.entry-title {
+		margin: 0 0 0.5rem;
+		line-height: $font__line-height-heading;
+		
+		a {
+			color: var(--color-text-primary);
+			text-decoration: none;
+			border: none;
+			
+			&:hover {
+				color: var(--color-link);
+				border: none;
+			}
+		}
+		
+		// Different sizes for different contexts
+		.home &,
+		.archive &,
+		.search-results & {
+			font-size: 1.5rem;
+		}
+		
+		.single &,
+		.page & {
+			font-size: 2.5rem;
+			margin-bottom: 1rem;
+		}
+	}
+	
+	.entry-meta {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 1rem;
+		font-size: 0.875rem;
+		color: var(--color-text-secondary);
+		margin-bottom: 1rem;
+		
+		.posted-on,
+		.byline,
+		.cat-links,
+		.tags-links,
+		.comments-link {
+			display: flex;
+			align-items: center;
+			gap: 0.25rem;
+			
+			a {
+				color: var(--color-text-secondary);
+				
+				&:hover {
+					color: var(--color-link);
+				}
+			}
+		}
+		
+		// Icons before meta items (using pseudo-elements)
+		.posted-on::before {
+			content: '📅';
+		}
+		
+		.byline::before {
+			content: '👤';
+		}
+		
+		.cat-links::before {
+			content: '📁';
+		}
+		
+		.tags-links::before {
+			content: '🏷️';
+		}
+		
+		.comments-link::before {
+			content: '💬';
+		}
+	}
+}
+
+.entry-content,
+.entry-summary {
+	margin: 1rem 0;
+	line-height: $font__line-height-body;
+	
+	p {
+		margin-bottom: 1.5rem;
+		
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+	
+	// Better spacing for content elements
+	> * {
+		margin-bottom: 1.5rem;
+		
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+	
+	// Improved blockquote styling
+	blockquote {
+		margin: 2rem 0;
+		padding: 1rem 1.5rem;
+		border-left: 4px solid var(--color-link);
+		background: var(--color-bg-secondary);
+		border-radius: 0 8px 8px 0;
+		
+		p {
+			margin-bottom: 1rem;
+			font-style: italic;
+			
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+		
+		cite {
+			display: block;
+			margin-top: 1rem;
+			font-size: 0.875rem;
+			color: var(--color-text-secondary);
+			font-style: normal;
+			
+			&::before {
+				content: '— ';
+			}
+		}
+	}
+	
+	// Code styling
+	code {
+		background: var(--color-bg-secondary);
+		padding: 0.2rem 0.4rem;
+		border-radius: 4px;
+		font-family: $font__code;
+		font-size: 0.875em;
+	}
+	
+	pre {
+		background: var(--color-bg-secondary);
+		padding: 1rem;
+		border-radius: 8px;
+		overflow-x: auto;
+		line-height: $font__line-height-pre;
+		
+		code {
+			background: none;
+			padding: 0;
+		}
+	}
+}
+
+.entry-footer {
+	margin-top: 1.5rem;
+	padding-top: 1rem;
+	border-top: 1px solid var(--color-border-primary);
+	
+	.cat-links,
+	.tags-links {
+		margin-bottom: 0.5rem;
+		
+		a {
+			display: inline-block;
+			padding: 0.25rem 0.75rem;
+			background: var(--color-bg-secondary);
+			color: var(--color-text-secondary);
+			text-decoration: none;
+			border-radius: 20px;
+			font-size: 0.875rem;
+			margin-right: 0.5rem;
+			margin-bottom: 0.5rem;
+			transition: var(--transition-fast);
+			border: none;
+			
+			&:hover {
+				background: var(--color-link);
+				color: var(--color-bg-primary);
+				border: none;
+			}
+		}
+	}
+}
+
+.page-content {
+	margin: 1.5rem 0 0;
+}
+
+.page-links {
+	clear: both;
+	margin: 2rem 0;
+	text-align: center;
+	
+	a,
+	span {
+		display: inline-block;
+		padding: 0.5rem 1rem;
+		margin: 0 0.25rem;
+		border-radius: 4px;
+		text-decoration: none;
+		transition: var(--transition-fast);
+	}
+	
+	a {
+		background: var(--color-bg-secondary);
+		color: var(--color-text-primary);
+		border: none;
+		
+		&:hover {
+			background: var(--color-link);
+			color: var(--color-bg-primary);
+			border: none;
+		}
+	}
+	
+	span {
+		background: var(--color-link);
+		color: var(--color-bg-primary);
+	}
 }
 
 .updated:not(.published) {
 	display: none;
 }
 
-.page-content,
-.entry-content,
-.entry-summary {
-	margin: 1.5em 0 0;
-}
-
-.page-links {
-	clear: both;
-	margin: 0 0 1.5em;
+// Reading time indicator
+.reading-time {
+	font-size: 0.875rem;
+	color: var(--color-text-secondary);
+	
+	&::before {
+		content: '⏱️ ';
+	}
 }

sass/components/navigation/_footer.scss

@@ -0,0 +1,102 @@
+// PaperMod inspired footer styles
+.site-footer {
+	margin-top: auto;
+	background: var(--color-bg-secondary);
+	border-top: 1px solid var(--color-border-primary);
+	
+	.footer-container {
+		max-width: 1200px;
+		margin: 0 auto;
+		padding: 2rem 1.5rem 1rem;
+		
+		@media (max-width: 768px) {
+			padding: 1.5rem 1rem 1rem;
+		}
+	}
+}
+
+.footer-widgets {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+	gap: 2rem;
+	margin-bottom: 2rem;
+	
+	@media (max-width: 768px) {
+		grid-template-columns: 1fr;
+		gap: 1.5rem;
+		margin-bottom: 1.5rem;
+	}
+	
+	.footer-widget {
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			font-size: 1.125rem;
+			font-weight: $font__weight-semibold;
+			margin-bottom: 1rem;
+			color: var(--color-text-primary);
+		}
+		
+		ul {
+			list-style: none;
+			padding: 0;
+			margin: 0;
+			
+			li {
+				margin-bottom: 0.5rem;
+				
+				a {
+					color: var(--color-text-secondary);
+					transition: var(--transition-fast);
+					
+					&:hover {
+						color: var(--color-link);
+					}
+				}
+			}
+		}
+		
+		p {
+			color: var(--color-text-secondary);
+			line-height: 1.6;
+		}
+	}
+}
+
+.site-info {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding-top: 1rem;
+	border-top: 1px solid var(--color-border-primary);
+	font-size: 0.875rem;
+	color: var(--color-text-secondary);
+	
+	@media (max-width: 768px) {
+		flex-direction: column;
+		gap: 0.5rem;
+		text-align: center;
+	}
+	
+	a {
+		color: var(--color-text-secondary);
+		
+		&:hover {
+			color: var(--color-link);
+		}
+	}
+	
+	.copyright {
+		@media (max-width: 768px) {
+			order: 2;
+		}
+	}
+	
+	.theme-credit {
+		@media (max-width: 768px) {
+			order: 1;
+		}
+	}
+}

sass/components/navigation/_header.scss

@@ -0,0 +1,307 @@
+// PaperMod inspired header styles
+.site-header {
+	position: sticky;
+	top: 0;
+	z-index: 1000;
+	background: var(--color-bg-header);
+	backdrop-filter: blur(10px);
+	border-bottom: 1px solid var(--color-border-primary);
+	transition: var(--transition-default);
+	
+	.header-container {
+		max-width: 1200px;
+		margin: 0 auto;
+		padding: 1rem 1.5rem;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 2rem;
+		
+		@media (max-width: 768px) {
+			padding: 0.75rem 1rem;
+		}
+	}
+}
+
+.site-branding {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	flex-shrink: 0;
+	
+	.site-title {
+		margin: 0;
+		font-size: 1.5rem;
+		font-weight: $font__weight-bold;
+		line-height: 1.2;
+		
+		a {
+			color: var(--color-text-primary);
+			text-decoration: none;
+			border: none;
+			
+			&:hover {
+				color: var(--color-link);
+				border: none;
+			}
+		}
+	}
+	
+	.site-description {
+		display: none;
+		margin: 0;
+		font-size: 0.875rem;
+		color: var(--color-text-secondary);
+		
+		@media (min-width: 768px) {
+			display: block;
+		}
+	}
+	
+	.custom-logo {
+		display: block;
+		max-height: 50px;
+		width: auto;
+	}
+}
+
+.header-actions {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+
+// Navigation styles
+.main-navigation {
+	position: relative;
+	
+	.menu-toggle {
+		display: none;
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 0.5rem;
+		border-radius: 4px;
+		transition: var(--transition-fast);
+		
+		&:hover {
+			background: var(--color-bg-secondary);
+		}
+		
+		@media (max-width: 768px) {
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+		}
+	}
+	
+	.hamburger-icon {
+		display: flex;
+		flex-direction: column;
+		gap: 3px;
+		
+		span {
+			display: block;
+			width: 20px;
+			height: 2px;
+			background: var(--color-text-primary);
+			transition: var(--transition-fast);
+			border-radius: 1px;
+		}
+		
+		.menu-toggle[aria-expanded="true"] & {
+			span:nth-child(1) {
+				transform: rotate(45deg) translate(5px, 5px);
+			}
+			
+			span:nth-child(2) {
+				opacity: 0;
+			}
+			
+			span:nth-child(3) {
+				transform: rotate(-45deg) translate(7px, -6px);
+			}
+		}
+	}
+	
+	.primary-menu {
+		display: flex;
+		align-items: center;
+		gap: 2rem;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		
+		@media (max-width: 768px) {
+			display: none;
+			position: absolute;
+			top: 100%;
+			right: 0;
+			background: var(--color-bg-card);
+			box-shadow: var(--shadow-card);
+			border-radius: 8px;
+			padding: 1rem;
+			min-width: 200px;
+			flex-direction: column;
+			gap: 0.5rem;
+			
+			&.toggled {
+				display: flex;
+			}
+		}
+		
+		li {
+			position: relative;
+			
+			a {
+				display: block;
+				padding: 0.5rem 0;
+				color: var(--color-text-primary);
+				font-weight: $font__weight-medium;
+				transition: var(--transition-fast);
+				border: none;
+				
+				@media (max-width: 768px) {
+					padding: 0.75rem;
+					border-radius: 4px;
+				}
+				
+				&:hover {
+					color: var(--color-link);
+					border: none;
+					
+					@media (max-width: 768px) {
+						background: var(--color-bg-secondary);
+					}
+				}
+			}
+			
+			&.current_page_item > a,
+			&.current-menu-item > a {
+				color: var(--color-link);
+				position: relative;
+				
+				&::after {
+					content: '';
+					position: absolute;
+					bottom: -2px;
+					left: 0;
+					right: 0;
+					height: 2px;
+					background: var(--color-link);
+					border-radius: 1px;
+					
+					@media (max-width: 768px) {
+						display: none;
+					}
+				}
+			}
+		}
+		
+		// Dropdown menus
+		.sub-menu {
+			position: absolute;
+			top: 100%;
+			left: 0;
+			background: var(--color-bg-card);
+			box-shadow: var(--shadow-card);
+			border-radius: 8px;
+			padding: 0.5rem;
+			min-width: 200px;
+			opacity: 0;
+			visibility: hidden;
+			transform: translateY(-10px);
+			transition: var(--transition-fast);
+			z-index: 1000;
+			
+			@media (max-width: 768px) {
+				position: static;
+				opacity: 1;
+				visibility: visible;
+				transform: none;
+				box-shadow: none;
+				background: var(--color-bg-secondary);
+				margin-top: 0.5rem;
+			}
+			
+			li a {
+				padding: 0.75rem;
+				border-radius: 4px;
+				
+				&:hover {
+					background: var(--color-bg-secondary);
+				}
+			}
+		}
+		
+		li:hover .sub-menu {
+			opacity: 1;
+			visibility: visible;
+			transform: translateY(0);
+		}
+	}
+}
+
+// Theme toggle button
+.theme-toggle {
+	background: none;
+	border: none;
+	cursor: pointer;
+	padding: 0.5rem;
+	border-radius: 50%;
+	transition: var(--transition-fast);
+	color: var(--color-text-primary);
+	position: relative;
+	
+	&:hover {
+		background: var(--color-bg-secondary);
+		color: var(--color-link);
+	}
+	
+	&:focus {
+		outline: 2px solid var(--color-link);
+		outline-offset: 2px;
+	}
+	
+	svg {
+		display: block;
+		transition: var(--transition-fast);
+	}
+	
+	.moon-icon {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		opacity: 0;
+		
+		[data-theme="dark"] & {
+			opacity: 1;
+		}
+	}
+	
+	.sun-icon {
+		opacity: 1;
+		
+		[data-theme="dark"] & {
+			opacity: 0;
+		}
+	}
+}
+
+// Skip link
+.skip-link {
+	position: absolute;
+	left: -9999px;
+	top: 1rem;
+	z-index: 999999;
+	padding: 0.5rem 1rem;
+	background: var(--color-text-primary);
+	color: var(--color-bg-primary);
+	text-decoration: none;
+	border-radius: 4px;
+	
+	&:focus {
+		left: 1rem;
+	}
+}

sass/components/navigation/_navigation.scss

@@ -1,6 +1,9 @@
-.main-navigation {
-	display: block;
-	width: 100%;
+// Import modern navigation styles
+@import "header";
+@import "footer";
+
+// Legacy navigation styles (can be removed after testing)
+/*
 
 	ul {
 		display: none;
@@ -107,3 +110,4 @@
 		flex: 1 0 50%;
 	}
 }
+*/

sass/layouts/_content-layout.scss

@@ -0,0 +1,104 @@
+// PaperMod inspired layout styles
+.content-wrapper {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 2rem 1.5rem;
+	display: grid;
+	grid-template-columns: 1fr 300px;
+	gap: 3rem;
+	align-items: start;
+	
+	@media (max-width: 1024px) {
+		grid-template-columns: 1fr;
+		gap: 2rem;
+		padding: 1.5rem 1rem;
+	}
+	
+	@media (max-width: 768px) {
+		padding: 1rem;
+	}
+}
+
+.site-main {
+	min-width: 0; // Prevent grid blowout
+	
+	// Full width on pages without sidebar
+	.no-sidebar & {
+		grid-column: 1 / -1;
+		max-width: 800px;
+		margin: 0 auto;
+	}
+	
+	// Single posts and pages
+	.single &,
+	.page & {
+		max-width: 800px;
+		
+		.no-sidebar & {
+			max-width: 900px;
+		}
+	}
+}
+
+// Archive and blog layouts
+.home,
+.archive,
+.search-results {
+	.content-wrapper {
+		grid-template-columns: 1fr;
+		max-width: 1000px;
+	}
+	
+	.site-main {
+		display: grid;
+		gap: 2rem;
+		
+		// Card grid for archive pages
+		&.card-grid {
+			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+			gap: 2rem;
+			
+			@media (max-width: 768px) {
+				grid-template-columns: 1fr;
+				gap: 1.5rem;
+			}
+		}
+	}
+}
+
+// Site container
+#page {
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+	background: var(--color-bg-primary);
+}
+
+// Skip to content
+.skip-link {
+	&.screen-reader-text {
+		position: absolute !important;
+		clip-path: inset(50%);
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		
+		&:focus {
+			background: var(--color-text-primary);
+			color: var(--color-bg-primary);
+			clip-path: none;
+			display: block;
+			font-size: 0.875rem;
+			font-weight: $font__weight-bold;
+			height: auto;
+			left: 1rem;
+			line-height: normal;
+			padding: 1rem 1.5rem;
+			text-decoration: none;
+			top: 1rem;
+			width: auto;
+			z-index: 100000;
+			border-radius: 4px;
+		}
+	}
+}

sass/style.scss

@@ -1,21 +1,21 @@
 /*!
-Theme Name: _s
-Theme URI: https://underscores.me/
-Author: Automattic
-Author URI: https://automattic.com/
-Description: Hi. I'm a starter theme called <code>_s</code>, or <em>underscores</em>, if you like. I'm a theme meant for hacking so don't use me as a <em>Parent Theme</em>. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
+Theme Name: Achille Press
+Theme URI: https://github.com/your-username/achille-press
+Author: Your Name
+Author URI: https://yourwebsite.com/
+Description: A fast, clean, and responsive WordPress theme inspired by the Hugo PaperMod theme. Features a minimal design with excellent typography, light/dark mode toggle, and optimized performance for modern websites.
 Version: 1.0.0
-Tested up to: 5.4
-Requires PHP: 5.6
+Tested up to: 6.4
+Requires PHP: 7.4
 License: GNU General Public License v2 or later
 License URI: LICENSE
-Text Domain: _s
-Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
+Text Domain: achille-press
+Tags: blog, clean, minimal, responsive, dark-mode, light-mode, accessibility-ready, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, flexible-header, footer-widgets, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, two-columns
 
-This theme, like WordPress, is licensed under the GPL.
-Use it to make something cool, have fun, and share what you've learned.
+This theme is inspired by Hugo PaperMod and built on Underscores foundation.
+Licensed under the GPL v2 or later.
 
-_s is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
+Achille Press is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
 Underscores is distributed under the terms of the GNU GPL v2 or later.
 
 Normalizing styles have been helped along thanks to the fine work of
@@ -73,6 +73,8 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
 /*--------------------------------------------------------------
 # Layouts
 --------------------------------------------------------------*/
+@import "layouts/content-layout";
+@import "layouts/no-sidebar";
 // @import "layouts/content-sidebar"; // Uncomment this line for a sidebar on right side of your content.
 // @import "layouts/sidebar-content"; // Uncomment this line for a sidebar on left side of your content.