Update styles.css

styles.css

@@ -1,3 +1,45 @@
+:root {
+
+  /* Text colors */
+  --primarytext-color: #0f0e09;
+  --secondarytext-color: #696966;
+
+  /* Primary colors - Blue theme */
+  --primary-dark: #1e3a8a;        /* Deep blue */
+  --primary-light: #3b82f6;       /* Medium blue */
+  
+  /* Secondary colors - Blue shades */
+  --secondary-dark: #1d4ed8;      /* Darker blue */
+  --secondary-light: #60a5fa;     /* Light blue */
+
+  /* Chat colors */
+  --user_message: #bfdbfe;        /* Light blue bubble for user */
+  --ai_message: #14b8a6;          /* Medium teal for AI */
+  --chathistory_area: #f3f4f6;    /* Very light grey for chat history */
+  
+  /* Text, Chat, UI */
+  --Send: #3b82f6;                /* Send button - medium blue (lighter than clear) */
+  --clear: #1e40af;               /* Clear button - darker blue */
+  --Send-hover: #2563eb;          /* Send button hover */
+  --clear-hover: #1d4ed8;         /* Clear button hover */
+  --text_areabackground: #f3f4f6; /* Very light grey for text areas */
+
+
+  /* Border thickness variables */
+  --border-thin: 1px;
+  --border-medium: 2px;
+  
+  /* Semantic border variables */
+  --border-default: 1px;
+  --border-focus: 2px;
+  --border-hover: 3px;
+  
+  /* Component-specific borders */
+  --button-border: 2px;
+  --input-border: 1px;
+  --card-border: 1px;
+}
+
 /* Import Oswald font - Google Fonts */
 @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
 
@@ -11,19 +53,23 @@
     visibility: hidden !important;
 }
 
+/* Specific text elements - ENSURE VISIBILITY */
+body, p, span, div, h1, h2, h3, h4, h5, h6, label, a {
+    color: var(--primarytext-color) !important;
 }
 
-/* Apply Oswald globally */
-*, *::before, *::after {
-    font-family: "Oswald", sans-serif !important;
-    color: #120f0e !important;
+/* All Gradio text elements - OVERRIDE GRADIO DEFAULTS */
+.gradio-container,
+.gradio-container *:not(textarea):not(input):not(button) {
+    color: var(--primarytext-color) !important;
 }
 
+/* Title header with transparent background */
 .title-header {
-    background-color: rgb(240, 236, 230) !important;
+    background-color: transparent;
     padding: 10px 20px;
     margin: 0 !important;
-    border-bottom: 1pt solid #59524f;
+    border-bottom: var(--border-focus) solid var(--primary-dark);
     text-align: left;
     flex-shrink: 0 !important;
     height: 60px !important;
@@ -35,25 +81,77 @@
 .title-header h1 {
     font-size: 1.5rem;
     font-weight: 600 !important;
-    color: #120f0e !important;
+    color: var(--primarytext-color) !important;
     margin: 0;
     padding: 0;
 }
 
-/* Input controls styling - acts as footer */
-.input-controls {
-    padding: 15px 20px !important;
+/* More aggressive Gradio overrides - keep current background */
+.gradio-container, 
+.gradio-container *,
+[data-testid="block-container"],
+.contain {
     background-color: rgb(240, 236, 230) !important;
-    border-top: 1pt solid #59524f;
-    flex-shrink: 0 !important;
-    width: 100% !important;
+    font-family: "Oswald", sans-serif !important;
+}
+
+/* Chat container - target all possible selectors */
+[data-testid="chatbot"], 
+.chatbot,
+.gradio-chatbot,
+#main-chatbot,
+[role="log"] {
+    background-color: var(--chathistory_area) !important;
+    border: var(--border-default) solid var(--primary-dark) !important;
+    border-radius: 6px !important;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Text input - target all possible selectors */
+[data-testid="textbox"] textarea,
+.gradio-textbox textarea,
+textarea {
+    background-color: var(--text_areabackground) !important;
+    border: var(--input-border) solid var(--secondary-dark) !important;
+    border-radius: 6px !important;
+    color: var(--primarytext-color) !important;
+    font-family: "Oswald", sans-serif !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Buttons - target all possible selectors */
+[data-testid="button"],
+.gradio-button,
+button.send-button,
+button.clear-button {
+    border-radius: 6px !important;
+    font-family: "Oswald", sans-serif !important;
+    font-weight: 500 !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+    color: var(--primarytext-color) !important;
+}
+
+/* Send button specific */
+button.send-button,
+[data-testid="button"]:nth-of-type(1) {
+    background-color: var(--Send) !important;
+    color: var(--primarytext-color) !important;
+    border: var(--button-border) solid var(--secondary-dark) !important;
+}
+
+/* Clear button specific */
+button.clear-button,
+[data-testid="button"]:nth-of-type(2) {
+    background-color: var(--clear) !important;
+    color: var(--primarytext-color) !important;
+    border: var(--button-border) solid var(--secondary-dark) !important;
 }
 
-/* Main container styling - viewport height with no top margin */
-.gradio-container-5-42-0 {
+/* Background area behind everything */
+.gradio-container {
     background-color: rgb(240, 236, 230) !important;
     font-family: "Oswald", sans-serif !important;
-    color: #120f0e !important;
+    color: var(--primarytext-color) !important;
     padding: 0 !important;
     margin: 0 !important;
     height: 100vh !important;
@@ -64,7 +162,7 @@
 }
 
 /* Target Gradio's internal structure */
-.gradio-container-5-42-0 > div {
+.gradio-container > div {
     height: 95% !important;
     display: flex !important;
     flex-direction: column !important;
@@ -72,105 +170,259 @@
     margin-top: 0 !important;
 }
 
-/* Chat styling - FLEX to fill space */
-.gradio-container-5-42-0 .gradio-chatbot {
-    background-color: #d9d1ce !important;
-    border: 1pt solid #59524f !important;
+/* Main container wrapper */
+.main-container {
+    padding-bottom: 50px !important;
+}
+
+/* Chat history container/box */
+#main-chatbot {
+    border: var(--border-default) solid var(--primary-dark);
+    background-color: var(--chathistory_area);
     border-radius: 6px !important;
     padding: 15px !important;
-    flex: 1 !important;              /* Fill all remaining space */
-    min-height: 0 !important;        /* Prevent overflow issues */
+    flex: 1 !important;
+    min-height: 0 !important;
     overflow-y: auto !important;
     margin: 15px 20px !important;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    color: var(--primarytext-color) !important;
+}
+
+/* Gradio-specific chat container selectors */
+.gradio-container .gradio-chatbot {
+    background-color: var(--chathistory_area) !important;
+    border: var(--border-default) solid var(--primary-dark) !important;
+    border-radius: 6px !important;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
+}
+
+.gradio-container .gradio-chatbot > div {
+    background-color: var(--chathistory_area) !important;
+}
+
+.gradio-container .gradio-chatbot .message {
+    background-color: transparent !important;
+}
+
+/* User message text box */
+.message.user {
+    border: 1pt solid var(--secondary-dark);
+    background-color: var(--user_message);
 }
 
-/* Message styling */
-.gradio-container-5-42-0 .gradio-chatbot .message.bot .markdown {
-    background-color: #f09c7d !important;
-    color: #120f0e !important;
+/* User message markdown styling */
+.message.user .markdown,
+.message.user .markdown * {
+    background-color: var(--user_message) !important;
+    color: var(--primarytext-color) !important;
     border-radius: 8px !important;
     padding: 12px 16px !important;
-    border: 1pt solid #59524f !important;
+    border: var(--border-default) solid var(--primary-dark) !important;
     max-width: 70%;
-    margin-left: 0;
-    margin-right: auto;
+    margin-left: auto;
+    margin-right: 0;
     word-wrap: break-word;
     font-weight: 400 !important;
     margin-bottom: 10px !important;
 }
 
-.gradio-container-5-42-0 .gradio-chatbot .message.user .markdown {
-    background-color: #a69189 !important;
-    color: #120f0e !important;
+/* AI message text box */
+.message.bot {
+    border: 1pt solid var(--secondary-dark);
+    background-color: var(--ai_message);
+}
+
+/* AI message markdown styling */
+.message.bot .markdown,
+.message.bot .markdown * {
+    background-color: var(--ai_message) !important;
+    color: var(--primarytext-color) !important;
     border-radius: 8px !important;
     padding: 12px 16px !important;
-    border: 1pt solid #59524f !important;
+    border: var(--border-default) solid var(--secondary-dark) !important;
     max-width: 70%;
-    margin-left: auto;
-    margin-right: 0;
+    margin-left: 0;
+    margin-right: auto;
     word-wrap: break-word;
     font-weight: 400 !important;
     margin-bottom: 10px !important;
 }
 
-/* Input controls styling */
-.input-controls {
-    padding: 15px 20px !important;
-    background-color: rgb(240, 236, 230) !important;
-    border-top: 1pt solid #59524f;
-    flex-shrink: 0 !important;
+/* Chat message text content - CRITICAL FIX */
+.message.user .markdown p,
+.message.user .markdown span,
+.message.user .markdown div,
+.message.bot .markdown p,
+.message.bot .markdown span,
+.message.bot .markdown div {
+    color: var(--primarytext-color) !important;
+}
+
+/* Input textbox */
+.input-textbox {
+    border: var(--border-default) solid var(--primary-dark);
+    background-color: var(--text_areabackground);
 }
 
+/* Input textbox textarea styling */
 .input-textbox textarea {
-    background-color: #f0ece6 !important;
-    border: 1pt solid #59524f !important;
+    background-color: var(--text_areabackground) !important;
+    border: var(--input-border) solid var(--secondary-dark) !important;
     border-radius: 6px !important;
-    color: #120f0e !important;
+    color: var(--primarytext-color) !important;
     font-family: "Oswald", sans-serif !important;
     padding: 10px !important;
     resize: none !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* More specific Gradio textarea selectors */
+.gradio-container textarea {
+    background-color: var(--text_areabackground) !important;
+    border: var(--input-border) solid var(--secondary-dark) !important;
+    border-radius: 6px !important;
+    color: var(--primarytext-color) !important;
+    font-family: "Oswald", sans-serif !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
 }
 
+.gradio-container .gradio-textbox textarea {
+    background-color: var(--text_areabackground) !important;
+    border: var(--input-border) solid var(--secondary-dark) !important;
+    border-radius: 6px !important;
+    color: var(--primarytext-color) !important;
+    font-family: "Oswald", sans-serif !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+}
+
+.gradio-container .gradio-textbox {
+    background-color: transparent !important;
+    border: none !important;
+}
+
+/* Input textbox focus state */
 .input-textbox textarea:focus {
-    border-color: #f09c7d !important;
-    box-shadow: 0 0 0 2px rgba(240, 156, 125, 0.2) !important;
+    border-color: var(--secondary-light) !important;
+    box-shadow: 0 0 0 var(--border-focus) rgba(96, 165, 250, 0.2) !important;
 }
 
-.button-column {
-    margin-left: 10px !important;
-    min-width: 80px !important;
+/* General textarea styling */
+textarea {
+    border: var(--border-default) solid var(--primary-dark);
+    background-color: var(--text_areabackground);
+    background-color: var(--text_areabackground) !important;
+    border: var(--input-border) solid var(--secondary-dark) !important;
+    border-radius: 6px !important;
+    color: var(--primarytext-color) !important;
+    font-family: "Oswald", sans-serif !important;
+    padding: 10px !important;
+    resize: none !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* General textarea focus state */
+textarea:focus {
+    border-color: var(--secondary-light) !important;
+    box-shadow: 0 0 0 var(--border-focus) rgba(96, 165, 250, 0.2) !important;
+}
+
+/* Input text - ENSURE VISIBILITY */
+textarea, input {
+    color: var(--primarytext-color) !important;
 }
 
-.send-button, .clear-button {
-   border: 1pt solid #59524f !important;
-   border-radius: 6px !important;
-   font-weight: 500 !important;
-   padding: 8px 16px !important;
-   margin-bottom: 5px !important;
-   width: 100% !important;
+/* Input placeholder text */
+textarea::placeholder,
+input::placeholder {
+    color: var(--secondarytext-color) !important;
 }
 
+/* Send button */
 .send-button {
-   background-color: #f09c7d !important;
-   color: #120f0e !important;
+    border: 1pt solid var(--secondary-dark);
+    background-color: var(--Send);
+    border: var(--button-border) solid var(--secondary-dark) !important;
+    border-radius: 6px !important;
+    font-weight: 500 !important;
+    padding: 8px 16px !important;
+    margin-bottom: 5px !important;
+    width: 100% !important;
+    background-color: var(--Send) !important;
+    color: var(--primarytext-color) !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Gradio-specific button selectors */
+.gradio-container button.send-button {
+    background-color: var(--Send) !important;
+    color: var(--primarytext-color) !important;
+    border: var(--button-border) solid var(--secondary-dark) !important;
+    border-radius: 6px !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+    font-family: "Oswald", sans-serif !important;
 }
 
+/* Send button hover */
 .send-button:hover {
-   background-color: #e8895a !important;
-   border-color: #4a3f3c !important;
+    background-color: var(--Send-hover);
+    background-color: var(--Send-hover) !important;
+    border-color: var(--secondary-dark) !important;
 }
 
+/* Clear button */
 .clear-button {
-   background-color: #a69189 !important;
-   color: #120f0e !important;
+    border: 1pt solid var(--secondary-dark);
+    background-color: var(--clear);
+    border: var(--button-border) solid var(--secondary-dark) !important;
+    border-radius: 6px !important;
+    font-weight: 500 !important;
+    padding: 8px 16px !important;
+    margin-bottom: 5px !important;
+    width: 100% !important;
+    background-color: var(--clear) !important;
+    color: var(--primarytext-color) !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
+/* Gradio-specific clear button selector */
+.gradio-container button.clear-button {
+    background-color: var(--clear) !important;
+    color: var(--primarytext-color) !important;
+    border: var(--button-border) solid var(--secondary-dark) !important;
+    border-radius: 6px !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+    font-family: "Oswald", sans-serif !important;
+}
+
+/* Clear button hover */
 .clear-button:hover {
-   background-color: #8f7d73 !important;
-   border-color: #4a3f3c !important;
+    background-color: var(--clear-hover);
+    background-color: var(--clear-hover) !important;
+    border-color: var(--secondary-dark) !important;
+}
+
+/* Button text - ENSURE VISIBILITY */
+button, .gradio-button {
+    color: var(--primarytext-color) !important;
+}
+
+
+/* Input controls container */
+.input-controls {
+    padding: 15px 20px !important;
+    background-color: transparent !important;
+    flex-shrink: 0 !important;
+    width: 100% !important;
+}
+
+/* Button column container */
+.button-column {
+    margin-left: 10px !important;
+    min-width: 80px !important;
 }
 
-/* Ensure Gradio footer is visible and properly positioned */
+/* Gradio footer styling */
 footer.svelte-czcr5b {
     display: flex !important;
     visibility: visible !important;
@@ -178,41 +430,292 @@ footer.svelte-czcr5b {
     bottom: 0 !important;
     left: 0 !important;
     right: 0 !important;
-    background-color: rgba(240, 236, 230, 0.95) !important;
+    background-color: transparent !important;
     backdrop-filter: blur(5px) !important;
-    border-top: 1pt solid #59524f !important;
+    border-top: var(--border-default) solid #59524f !important;
     padding: 8px 16px !important;
     z-index: 1000 !important;
     height: auto !important;
     min-height: 40px !important;
 }
 
-/* Style the footer buttons to match your theme */
+/* Footer buttons styling */
 footer.svelte-czcr5b button {
     background-color: transparent !important;
-    color: #120f0e !important;
+    color: var(--secondarytext-color) !important;
     border: none !important;
     font-family: "Oswald", sans-serif !important;
     font-size: 12px !important;
 }
 
+/* Footer divider styling */
 footer.svelte-czcr5b .divider {
-    color: #59524f !important;
-}
-
-/* Adjust main container to account for footer */
-.main-container {
-    padding-bottom: 50px !important;
+    color: var(--secondarytext-color) !important;
 }
 
 /* Responsive design */
 @media (max-width: 768px) {
-    .gradio-container-5-42-0 .gradio-chatbot .message.bot .markdown,
-    .gradio-container-5-42-0 .gradio-chatbot .message.user .markdown {
+    .message.bot .markdown,
+    .message.user .markdown {
         max-width: 85%;
     }
     
     .input-controls {
         padding: 10px !important;
     }
+}
+
+/* Dark mode variables pulled from HTML when testing the app */
+/* This is meant to address the issue of Mimir not applying dark mode correctly */
+/* and ensure consistency regardless of user system settings */
+:root .dark {
+    --body-background-fill: var(--text_areabackground);
+    --body-text-color: var(--primarytext-color);
+    --color-accent-soft: var(--primary-light);
+    --background-fill-primary: var(--chathistory_area);
+    --background-fill-secondary: var(--text_areabackground);
+    --border-color-accent: var(--primary-dark);
+    --border-color-primary: var(--primary-dark);
+    --link-text-color-active: var(--secondary-light);
+    --link-text-color: var(--secondary-light);
+    --link-text-color-hover: var(--secondary-dark);
+    --link-text-color-visited: var(--secondary-dark);
+    --body-text-color-subdued: var(--secondarytext-color);
+    --accordion-text-color: var(--primarytext-color);
+    --table-text-color: var(--primarytext-color);
+    --shadow-spread: 1px;
+    --block-background-fill: var(--chathistory_area);
+    --block-border-color: var(--primary-dark);
+    --block_border_width: 1.5px;
+    --block-info-text-color: var(--secondarytext-color);
+    --block-label-background-fill: var(--text_areabackground);
+    --block-label-border-color: var(--primary-dark);
+    --block_label_border_width: 1.5px;
+    --block-label-text-color: var(--primarytext-color);
+    --block_shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --block_title_background_fill: transparent;
+    --block_title_border_color: var(--primary-dark);
+    --block_title_border_width: 1.5px;
+    --block-title-text-color: var(--primarytext-color);
+    --panel-background-fill: var(--text_areabackground);
+    --panel-border-color: var(--primary-dark);
+    --panel_border_width: 1.5px;
+    --border-color-accent-subdued: var(--secondary-dark);
+    --code-background-fill: var(--primary-light);
+    --checkbox-background-color: var(--text_areabackground);
+    --checkbox-background-color-focus: var(--text_areabackground);
+    --checkbox-background-color-hover: var(--text_areabackground);
+    --checkbox-background-color-selected: var(--primary-light);
+    --checkbox-border-color: var(--primary-dark);
+    --checkbox-border-color-focus: var(--secondary-light);
+    --checkbox-border-color-hover: var(--secondary-dark);
+    --checkbox-border-color-selected: var(--secondary-light);
+    --checkbox-border-width: 1.5px;
+    --checkbox-label-background-fill: var(--text_areabackground);
+    --checkbox-label-background-fill-hover: var(--text_areabackground);
+    --checkbox-label-background-fill-selected: var(--primary-light);
+    --checkbox-label-border-color: var(--primary-dark);
+    --checkbox-label-border-color-hover: var(--secondary-dark);
+    --checkbox-label-border-color-selected: var(--secondary-light);
+    --checkbox-label-border-width: 1.5px;
+    --checkbox-label-text-color: var(--primarytext-color);
+    --checkbox-label-text-color-selected: var(--primarytext-color);
+    --error-background-fill: var(--text_areabackground);
+    --error-border-color: #ef4444;
+    --error_border_width: 1.5px;
+    --error-text-color: #ef4444;
+    --error-icon-color: #ef4444;
+    --input-background-fill: var(--text_areabackground);
+    --input_background_fill_focus: var(--text_areabackground);
+    --input-background-fill-hover: var(--text_areabackground);
+    --input-border-color: var(--secondary-dark);
+    --input-border-color-focus: var(--secondary-light);
+    --input-border-color-hover: var(--secondary-dark);
+    --input_border_width: 1.5px;
+    --input-placeholder-color: var(--secondarytext-color);
+    --input_shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --input-shadow-focus: 0 0 0 var(--shadow-spread) rgba(96, 165, 250, 0.2), var(--shadow-inset);
+    --loader_color: var(--secondary-light);
+    --slider_color: var(--secondary-light);
+    --stat-background-fill: linear-gradient(to right, var(--primary-light), var(--primary-dark));
+    --table-border-color: var(--primary-dark);
+    --table-even-background-fill: var(--text_areabackground);
+    --table-odd-background-fill: var(--chathistory_area);
+    --table-row-focus: var(--secondary-light);
+    --button-border-width: 1.5px;
+    --button-cancel-background-fill: var(--clear);
+    --button-cancel-background-fill-hover: var(--clear-hover);
+    --button-cancel-border-color: var(--secondary-dark);
+    --button-cancel-border-color-hover: var(--secondary-dark);
+    --button-cancel-text-color: var(--primarytext-color);
+    --button-cancel-text-color-hover: var(--primarytext-color);
+    --button-primary-background-fill: var(--Send);
+    --button-primary-background-fill-hover: var(--Send-hover);
+    --button-primary-border-color: var(--secondary-dark);
+    --button-primary-border-color-hover: var(--secondary-dark);
+    --button-primary-text-color: var(--primarytext-color);
+    --button-primary-text-color-hover: var(--primarytext-color);
+    --button_primary_shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --button-primary-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --button-primary-shadow-active: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --button-secondary-background-fill: var(--clear);
+    --button-secondary-background-fill-hover: var(--clear-hover);
+    --button-secondary-border-color: var(--secondary-dark);
+    --button-secondary-border-color-hover: var(--secondary-dark);
+    --button-secondary-text-color: var(--primarytext-color);
+    --button-secondary-text-color-hover: var(--primarytext-color);
+    --button_secondary_shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --button-secondary-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --button-secondary-shadow-active: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --name: origin;
+    --primary-50: #eff6ff;
+    --primary-100: #dbeafe;
+    --primary-200: #bfdbfe;
+    --primary-300: #93c5fd;
+    --primary-400: #60a5fa;
+    --primary-500: #3b82f6;
+    --primary-600: #2563eb;
+    --primary-700: #1d4ed8;
+    --primary-800: #1e40af;
+    --primary-900: #1e3a8a;
+    --primary-950: #172554;
+    --secondary-50: #f0f9ff;
+    --secondary-100: #e0f2fe;
+    --secondary-200: #bae6fd;
+    --secondary-300: #7dd3fc;
+    --secondary-400: #38bdf8;
+    --secondary-500: #0ea5e9;
+    --secondary-600: #0284c7;
+    --secondary-700: #0369a1;
+    --secondary-800: #075985;
+    --secondary-900: #0c4a6e;
+    --secondary-950: #082f49;
+    --neutral-50: #f9fafb;
+    --neutral-100: #f3f4f6;
+    --neutral-200: #e5e7eb;
+    --neutral-300: #d1d5db;
+    --neutral-400: #9ca3af;
+    --neutral-500: #6b7280;
+    --neutral-600: #4b5563;
+    --neutral-700: #374151;
+    --neutral-800: #1f2937;
+    --neutral-900: #111827;
+    --neutral-950: #0b0f19;
+    --spacing-xxs: 1px;
+    --spacing-xs: 2px;
+    --spacing-sm: 4px;
+    --spacing-md: 6px;
+    --spacing-lg: 8px;
+    --spacing-xl: 10px;
+    --spacing-xxl: 16px;
+    --radius-xxs: 1px;
+    --radius-xs: 2px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 12px;
+    --radius-xxl: 22px;
+    --text-xxs: 9px;
+    --text-xs: 10px;
+    --text-sm: 12px;
+    --text-md: 14px;
+    --text-lg: 16px;
+    --text-xl: 22px;
+    --text-xxl: 26px;
+    --font: 'Oswald', ui-sans-serif, system-ui, sans-serif;
+    --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
+    --body-text-size: var(--text-md);
+    --body-text-weight: 400;
+    --embed-radius: var(--radius-sm);
+    --color-accent: var(--secondary-light);
+    --shadow-drop: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --shadow-drop-lg: 0 4px 8px rgba(0, 0, 0, 0.1);
+    --shadow-inset: 0 2px 4px rgba(0, 0, 0, 0.1) inset;
+    --block-border-width: 1.5px;
+    --block-info-text-size: var(--text-sm);
+    --block-info-text-weight: 400;
+    --block-label-border-width: 1.5px;
+    --block-label-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --block-label-margin: 0;
+    --block-label-padding: var(--spacing-sm) var(--spacing-lg);
+    --block-label-radius: calc(var(--radius-sm) - 1px) 0 calc(var(--radius-sm) - 1px) 0;
+    --block-label-right-radius: 0 calc(var(--radius-sm) - 1px) 0 calc(var(--radius-sm) - 1px);
+    --block-label-text-size: var(--text-sm);
+    --block-label-text-weight: 400;
+    --block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
+    --block-radius: var(--radius-sm);
+    --block-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --block-title-background-fill: transparent;
+    --block-title-border-color: var(--primary-dark);
+    --block-title-border-width: 1.5px;
+    --block-title-padding: 0;
+    --block-title-radius: var(--radius-sm);
+    --block-title-text-size: var(--text-md);
+    --block-title-text-weight: 400;
+    --container-radius: var(--radius-sm);
+    --form-gap-width: 1.5px;
+    --layout-gap: var(--spacing-xxl);
+    --panel-border-width: 1.5px;
+    --section-header-text-size: var(--text-md);
+    --section-header-text-weight: 400;
+    --chatbot-text-size: var(--text-lg);
+    --checkbox-border-radius: var(--radius-sm);
+    --checkbox-label-gap: var(--spacing-lg);
+    --checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
+    --checkbox-label-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --checkbox-label-text-size: var(--text-md);
+    --checkbox-label-text-weight: 400;
+    --checkbox-check: url(data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%230f0e09' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e);
+    --radio-circle: url(data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%230f0e09' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e);
+    --checkbox-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --error-border-width: 1.5px;
+    --input-background-fill-focus: var(--text_areabackground);
+    --input-border-width: 1.5px;
+    --input-padding: var(--spacing-xl);
+    --input-radius: var(--radius-sm);
+    --input-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --input-text-size: var(--text-md);
+    --input-text-weight: 400;
+    --loader-color: var(--secondary-light);
+    --prose-text-size: var(--text-md);
+    --prose-text-weight: 400;
+    --prose-header-text-weight: 600;
+    --slider-color: var(--secondary-light);
+    --table-radius: var(--radius-sm);
+    --button-transform-hover: none;
+    --button-transform-active: none;
+    --button-transition: none;
+    --button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
+    --button-large-radius: var(--radius-md);
+    --button-large-text-size: var(--text-lg);
+    --button-large-text-weight: 600;
+    --button-primary-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --button-secondary-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --button-small-padding: var(--spacing-sm) calc(1.5 * var(--spacing-sm));
+    --button-small-radius: var(--radius-md);
+    --button-small-text-size: var(--text-sm);
+    --button-small-text-weight: 400;
+    --button-medium-padding: var(--spacing-md) calc(2 * var(--spacing-md));
+    --button-medium-radius: var(--radius-md);
+    --button-medium-text-size: var(--text-md);
+    --button-medium-text-weight: 600;
+}
+
+/* Force text color on all elements - FIX FOR WHITE TEXT */
+* {
+    color: var(--primarytext-color) !important;
+    font-family: "Oswald", sans-serif !important;
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background: var(--text_areabackground);
+        color: var(--primarytext-color);
+    }
+}
+
+body {
+    background: var(--text_areabackground);
+    color: var(--primarytext-color);
+    font-family: "Oswald", sans-serif;
 }