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;