document v0.2
authorThomas Walker Lynch <eknp9n@reasoningtechnology.com>
Wed, 14 Jan 2026 09:42:36 +0000 (09:42 +0000)
committerThomas Walker Lynch <eknp9n@reasoningtechnology.com>
Wed, 14 Jan 2026 09:42:36 +0000 (09:42 +0000)
developer/document/style/article.js [deleted file]
developer/document/style/article_tech_ref.js [new file with mode: 0644]
developer/document/style/page_css_pn.js [deleted file]
developer/document/style/page_fixed_glow.js [new file with mode: 0644]
developer/document/style/style_orchestrator.js
developer/document/style/theme.js [deleted file]
developer/document/style/theme_dark_gold.js [new file with mode: 0644]
developer/document/style/theme_light_gold.js [new file with mode: 0644]

diff --git a/developer/document/style/article.js b/developer/document/style/article.js
deleted file mode 100644 (file)
index 36e07b6..0000000
+++ /dev/null
@@ -1,112 +0,0 @@
-/*
-  Generic Article Typography.
-  Applies container settings and injects scoped CSS for standard HTML tags 
-  (H1-H6, P, Blockquote) within the article.
-*/
-(function(){
-  const RT = window.StyleRT = window.StyleRT || {};
-
-  RT.article = function() {
-    RT.config = RT.config || {};
-    
-    // Default Configuration
-    RT.config.article = {
-      font_family: '"Noto Sans JP", sans-serif'
-      ,line_height: "1.75" // Increased slightly for readability
-      ,font_size: "16px"
-      ,max_width: "800px" 
-      ,margin: "0 auto"
-    };
-
-    const conf = RT.config.article;
-    const article_seq = document.querySelectorAll("RT-article");
-    const theme = (RT.config.theme) ? RT.config.theme : { accent: 'gray', text: 'black' };
-
-    // HURDLE
-    if (RT.debug) RT.debug.log('selector', `RT.article found ${article_seq.length} elements.`);
-    if(article_seq.length === 0) {
-      if(RT.debug) RT.debug.error('selector', 'CRITICAL: No <RT-article> tags found.');
-      return;
-    }
-
-    // 1. Apply Container Styles
-    article_seq.forEach( (article) =>{
-      const style = article.style;
-      style.display = "block";
-      style.fontFamily = conf.font_family;
-      style.fontSize = conf.font_size;
-      style.lineHeight = conf.line_height;
-      style.maxWidth = conf.max_width;
-      style.margin = conf.margin;
-      style.backgroundColor = "transparent"; 
-      
-      // Ensure the accent color is available as a variable here too
-      style.setProperty("--rt-accent", theme.accent);
-    });
-
-    // 2. Inject Child Typography (The missing piece)
-    const style_id = 'rt-article-typography';
-    if (!document.getElementById(style_id)) {
-      const style_el = document.createElement('style');
-      style_el.id = style_id;
-      
-      // We explicitly scope these to rt-article to avoid breaking the rest of the page
-      style_el.textContent = `
-        rt-article h1 { 
-          font-size: 2.2em; 
-          font-weight: 700; 
-          margin-top: 1.5em; 
-          margin-bottom: 0.5em; 
-          border-bottom: 2px solid var(--rt-accent);
-          padding-bottom: 0.2em;
-          line-height: 1.2;
-        }
-        
-        rt-article h2 { 
-          font-size: 1.7em; 
-          font-weight: 600; 
-          margin-top: 1.5em; 
-          margin-bottom: 0.5em; 
-          color: var(--rt-accent);
-          line-height: 1.3;
-        }
-
-        rt-article h3 { font-size: 1.4em; margin-top: 1.2em; margin-bottom: 0.5em; }
-        
-        rt-article p { 
-          margin-bottom: 1.2em; 
-          text-align: justify; 
-          hyphens: auto;
-        }
-
-        rt-article blockquote { 
-          border-left: 4px solid var(--rt-accent); 
-          margin: 1.5em 0; 
-          padding: 0.5em 0 0.5em 1.2em; 
-          font-style: italic; 
-          background: rgba(125,125,125, 0.05);
-        }
-
-        rt-article ul, rt-article ol {
-          margin-bottom: 1.2em;
-          padding-left: 2em;
-        }
-        
-        rt-article li {
-          margin-bottom: 0.3em;
-        }
-        
-        /* Links inside articles */
-        rt-article a {
-          color: var(--rt-accent);
-          text-decoration: none;
-          border-bottom: 1px dotted var(--rt-accent);
-        }
-        rt-article a:hover {
-          border-bottom: 1px solid var(--rt-accent);
-        }
-      `;
-      document.head.appendChild(style_el);
-    }
-  };
-})();
diff --git a/developer/document/style/article_tech_ref.js b/developer/document/style/article_tech_ref.js
new file mode 100644 (file)
index 0000000..348d8e0
--- /dev/null
@@ -0,0 +1,157 @@
+/*
+  Article Layout: Technical Reference
+  Standard: Theme 1.0
+  Description: High-readability layout for technical documentation on screens.
+  Features: Sans-serif, justified text, distinct headers, boxed code.
+*/
+(function(){
+  const RT = window.StyleRT = window.StyleRT || {};
+
+  RT.article = function() {
+    RT.config = RT.config || {};
+    
+    // Default Configuration
+    RT.config.article = {
+       font_family: '"Noto Sans", "Segoe UI", "Helvetica Neue", sans-serif'
+      ,line_height: "1.8"       // Generous spacing for screen reading
+      ,font_size: "18px"        // Large base size for clarity
+      ,max_width: "820px" 
+      ,margin: "0 auto"
+    };
+
+    const conf = RT.config.article;
+    const article_seq = document.querySelectorAll("RT-article");
+
+    // HURDLE
+    if(RT.debug && RT.debug.log) RT.debug.log('selector', `RT.article found ${article_seq.length} elements.`);
+    if(article_seq.length === 0) return;
+
+    // 1. Apply Container Styles
+    article_seq.forEach( (article) =>{
+      const style = article.style;
+      style.display = "block";
+      style.fontFamily = conf.font_family;
+      style.fontSize = conf.font_size;
+      style.lineHeight = conf.line_height;
+      style.maxWidth = conf.max_width;
+      style.margin = conf.margin;
+      style.padding = "0 20px"; // Mobile buffer
+      
+      // Default text color from Theme 1.0
+      style.color = "var(--rt-content-main)";
+    });
+
+    // 2. Inject Child Typography
+    const style_id = 'rt-article-typography';
+    if (!document.getElementById(style_id)) {
+      const style_el = document.createElement('style');
+      style_el.id = style_id;
+      
+      style_el.textContent = `
+        /* --- HEADERS --- */
+        rt-article h1 { 
+          color: var(--rt-brand-primary);
+          font-size: 2.4em; 
+          font-weight: 700; 
+          margin-top: 1.2em; 
+          margin-bottom: 0.6em; 
+          border-bottom: 2px solid var(--rt-brand-primary);
+          padding-bottom: 0.3em;
+          line-height: 1.2;
+          letter-spacing: -0.02em;
+        }
+        
+        rt-article h2 { 
+          color: var(--rt-brand-secondary);
+          font-size: 1.8em; 
+          font-weight: 600; 
+          margin-top: 1.5em; 
+          margin-bottom: 0.5em; 
+          border-bottom: 1px dotted var(--rt-border-default);
+        }
+
+        rt-article h3 { 
+          color: var(--rt-brand-tertiary);
+          font-size: 1.4em; 
+          font-weight: 600;
+          margin-top: 1.4em; 
+          margin-bottom: 0.5em;
+          font-style: italic;
+        }
+        
+        rt-article h4, rt-article h5, rt-article h6 {
+           color: var(--rt-content-main);
+           font-weight: bold;
+           margin-top: 1.2em;
+        }
+
+        /* --- BODY TEXT --- */
+        rt-article p { 
+          margin-bottom: 1.4em; 
+          text-align: justify; 
+          hyphens: auto;
+          color: var(--rt-content-main);
+        }
+
+        /* --- RICH ELEMENTS --- */
+        rt-article blockquote { 
+          border-left: 4px solid var(--rt-brand-secondary); 
+          margin: 1.5em 0; 
+          padding: 0.5em 1em; 
+          font-style: italic; 
+          color: var(--rt-content-muted);
+          background: var(--rt-surface-1);
+          border-radius: 0 4px 4px 0;
+        }
+
+        rt-article ul, rt-article ol {
+          margin-bottom: 1.4em;
+          padding-left: 2em;
+        }
+        rt-article li {
+           margin-bottom: 0.4em;
+        }
+        rt-article li::marker {
+          color: var(--rt-brand-secondary);
+          font-weight: bold;
+        }
+        
+        /* Links */
+        rt-article a {
+          color: var(--rt-brand-link);
+          text-decoration: none;
+          border-bottom: 1px dotted var(--rt-border-default);
+          transition: all 0.2s;
+        }
+        rt-article a:hover {
+          color: var(--rt-brand-primary);
+          border-bottom: 1px solid var(--rt-brand-primary);
+          background: var(--rt-surface-1);
+        }
+        
+        /* --- CODE & TECHNICAL --- */
+        /* Inline Code */
+        rt-article code {
+          background-color: var(--rt-surface-code);
+          color: var(--rt-syntax-keyword);
+          padding: 0.2em 0.4em;
+          border-radius: 4px;
+          font-family: "Consolas", "Monaco", monospace;
+          font-size: 0.9em;
+          border: 1px solid var(--rt-border-faint);
+        }
+        
+        /* Preformatted Blocks (if not handled by RT_code.js) */
+        rt-article pre {
+           background: var(--rt-surface-code);
+           padding: 1em;
+           border-radius: 4px;
+           overflow-x: auto;
+           border: 1px solid var(--rt-border-default);
+        }
+      `;
+      document.head.appendChild(style_el);
+    }
+  };
+})();
+
diff --git a/developer/document/style/page_css_pn.js b/developer/document/style/page_css_pn.js
deleted file mode 100644 (file)
index 938da34..0000000
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
-  Defines the appearance of the <RT-PAGE> container.
-*/
-window.StyleRT = window.StyleRT || {};
-
-window.StyleRT.page = function() {
-  const RT = window.StyleRT;
-  
-  // Fallback accent
-  const theme_accent = (RT.config && RT.config.theme) ? RT.config.theme.accent : "hsl(42, 100%, 50%)";
-
-  RT.config = RT.config || {};
-  
-  // Fix: Define defaults independently
-  const defaults = {
-    width: "100%"
-    ,height: "1056px"
-    ,padding: "3rem"
-    ,margin: "4rem auto"
-    ,border_color: theme_accent
-    ,shadow: "drop-shadow(8px 12px 40px hsl(44, 96%, 47%))"
-  };
-
-  // Fix: MERGE defaults into existing config. 
-  // This allows overrides but prevents empty objects from causing "undefined" CSS.
-  RT.config.page = Object.assign({}, defaults, RT.config.page || {});
-
-  const conf = RT.config.page;
-  const style_id = 'rt-page-styles';
-  
-  if (!document.getElementById(style_id)) {
-    const style_el = document.createElement('style');
-    style_el.id = style_id;
-    
-    style_el.textContent = `
-      rt-article {
-        counter-reset: rt-page-counter;
-      }
-
-      rt-page {
-        display: block;
-        width: ${conf.width};
-        height: ${conf.height};
-        margin: ${conf.margin};
-        padding: ${conf.padding};
-        box-sizing: border-box;
-        
-        background-color: black; 
-        
-        /* These should now be populated correctly */
-        border: 1px solid ${conf.border_color};
-        position: relative;
-        filter: ${conf.shadow};
-        
-        counter-increment: rt-page-counter;
-        overflow: hidden; 
-      }
-
-      rt-page::after {
-        content: "Page " counter(rt-page-counter);
-        position: absolute;
-        bottom: 1.5rem;
-        right: 3rem;
-        font-family: "Noto Sans JP", sans-serif;
-        font-size: 0.9rem;
-        font-weight: bold;
-        color: ${conf.border_color}; 
-      }
-    `;
-    document.head.appendChild(style_el);
-  }
-};
diff --git a/developer/document/style/page_fixed_glow.js b/developer/document/style/page_fixed_glow.js
new file mode 100644 (file)
index 0000000..91bd648
--- /dev/null
@@ -0,0 +1,88 @@
+/*
+  Page Layout: Fixed Glow
+  Standard: Theme 1.0
+  Description: A fixed-height container with a glowing border effect that matches the active theme.
+*/
+(function(){
+  const RT = window.StyleRT = window.StyleRT || {};
+
+  // Function name stays generic so the orchestrator can call RT.page() regardless of file choice
+  RT.page = function() {
+    RT.config = RT.config || {};
+    
+    // Default Configuration
+    // We use CSS Variables here so the Theme controls the actual colors.
+    const defaults = {
+       width: "100%"
+      ,height: "1056px"
+      ,padding: "3rem"
+      ,margin: "4rem auto"
+      
+      // Dynamic Theme Bindings
+      ,bg_color:     "var(--rt-surface-0)"         // Black (Dark) or Cream (Light)
+      ,border_color: "var(--rt-brand-primary)"     // The Main Accent Color
+      ,text_color:   "var(--rt-brand-primary)"     // Page Number Color
+      
+      // The Glow: Uses the primary brand color for the shadow
+      ,shadow: "drop-shadow(0px 0px 15px var(--rt-brand-primary))" 
+    };
+
+    // Merge defaults
+    RT.config.page = Object.assign({}, defaults, RT.config.page || {});
+
+    const conf = RT.config.page;
+    const style_id = 'rt-page-fixed-glow';
+    
+    if (!document.getElementById(style_id)) {
+      const style_el = document.createElement('style');
+      style_el.id = style_id;
+      
+      style_el.textContent = `
+        /* Reset page counter on the article container */
+        rt-article {
+          counter-reset: rt-page-counter;
+        }
+
+        rt-page {
+          display: block;
+          position: relative;
+          box-sizing: border-box;
+          overflow: hidden; 
+
+          /* Dimensions */
+          width: ${conf.width};
+          height: ${conf.height};
+          margin: ${conf.margin};
+          padding: ${conf.padding};
+          
+          /* Theming */
+          background-color: ${conf.bg_color}; 
+          border: 1px solid ${conf.border_color};
+          
+          /* The "Glow" Effect */
+          filter: ${conf.shadow};
+          
+          /* Counter Increment */
+          counter-increment: rt-page-counter;
+        }
+
+        /* Page Numbering */
+        rt-page::after {
+          content: "Page " counter(rt-page-counter);
+          position: absolute;
+          bottom: 1.5rem;
+          right: 3rem;
+          
+          font-family: "Noto Sans", sans-serif;
+          font-size: 0.9rem;
+          font-weight: bold;
+          
+          color: ${conf.text_color}; 
+          opacity: 0.8;
+          pointer-events: none; /* Prevent interference with clicks */
+        }
+      `;
+      document.head.appendChild(style_el);
+    }
+  };
+})();
index 5239707..a076d4a 100644 (file)
@@ -10,16 +10,16 @@ window.StyleRT.style_orchestrator = function() {
   
   const modules = [
     // Theme & Semantics
-    'style/theme.js',        
+    'style/theme_dark_gold.js',        
     'style/RT_term.js',          
     'style/RT_math.js',          
     'style/RT_code.js',          
-    'style/article.js', // Renamed from article_generic
+    'style/article_tech_ref.js', // Renamed from article_generic
     'style/RT_TOC.js',           
 
     // Layout & Pagination
     'style/paginate_by_element.js', 
-    'style/page_css_pn.js',             
+    'style/page_fixed_glow.js',             
 
     // Visibility
     'style/body_visibility_visible.js' 
diff --git a/developer/document/style/theme.js b/developer/document/style/theme.js
deleted file mode 100644 (file)
index ff72474..0000000
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
-  Global Theme Definition: "Inverse Wheat"
-  A comprehensive color system for the entire application.
-*/
-( function(){
-  const RT = window.StyleRT = window.StyleRT || {};
-  
-  RT.theme = function(){
-    RT.config = RT.config || {};
-    
-    // THE PALETTE DEFINITION
-    RT.config.theme = {
-       is_dark: true
-       
-      // --- BACKGROUNDS ---
-      ,bg_app:      "hsl(0, 0%, 8%)"      // Main Window Background (Deep Charcoal)
-      ,bg_panel:    "hsl(0, 0%, 12%)"     // Sidebars / Cards (Slightly lighter)
-      ,bg_code:     "hsl(0, 0%, 14%)"     // Code blocks / Terminals
-      ,bg_input:    "hsl(0, 0%, 16%)"     // Form inputs
-      ,bg_select:   "hsl(45, 100%, 15%)"  // Text Selection Background (Dim Amber)
-
-      // --- TYPOGRAPHY ---
-      ,text_main:   "hsl(36, 30%, 85%)"   // Primary Content (Pale Wheat)
-      ,text_muted:  "hsl(36, 15%, 60%)"   // Metadata / Footer / Subtitles
-      ,text_faint:  "hsl(36, 10%, 40%)"   // Placeholders / Disabled text
-      ,text_inv:    "hsl(0, 0%, 10%)"     // Inverted text (for buttons/highlights)
-
-      // --- ACCENTS (The "Wheat/Amber" Spectrum) ---
-      ,primary:     "hsl(45, 100%, 50%)"  // P3 Amber (Active states, H1, Key focus)
-      ,secondary:   "hsl(38, 90%, 65%)"   // Warm Gold (H2, distinct UI elements)
-      ,tertiary:    "hsl(30, 60%, 70%)"   // Bronze (H3, subtle highlights)
-      ,link:        "hsl(48, 100%, 50%)"  // High-Vis Yellow (Links)
-      ,link_hover:  "hsl(48, 100%, 70%)"  // Bright Yellow
-
-      // --- UI & BORDERS ---
-      ,border_main: "hsl(36, 20%, 25%)"   // Standard dividers
-      ,border_light:"hsl(36, 20%, 35%)"   // Hover borders
-      ,shadow:      "0 4px 6px rgba(0,0,0, 0.5)" 
-
-      // --- STATUS / SYNTAX (Shifted to Earth Tones) ---
-      // These are tuned to look good on the dark background without looking neon.
-      ,success:     "hsl(100, 50%, 55%)"  // Muted Olive Green
-      ,warning:     "hsl(35, 90%, 60%)"   // Burnt Orange
-      ,error:       "hsl(0, 60%, 65%)"    // Brick Red
-      ,info:        "hsl(200, 40%, 60%)"  // Slate Blue (for contrast)
-      ,string:      "hsl(70, 40%, 65%)"   // Sage (for code strings)
-      ,keyword:     "hsl(35, 100%, 65%)"  // Orange (for code keywords)
-    };
-
-    const palette = RT.config.theme;
-    const body = document.body;
-    const html = document.documentElement;
-
-    // 1. Basic Reset
-    html.style.margin = "0"; html.style.padding = "0";
-    body.style.margin = "0"; body.style.padding = "0";
-    body.style.minHeight = "100vh"; 
-
-    // 2. Apply Base Colors
-    html.style.backgroundColor = palette.bg_app;
-    body.style.backgroundColor = palette.bg_app;
-    body.style.color = palette.text_main;
-
-    // 3. Export CSS Variables
-    // This loop automatically makes every key above available as var(--rt-key)
-    const s = body.style;
-    for (const [key, value] of Object.entries(palette)) {
-      // e.g. converts "bg_app" to "--rt-bg-app"
-      s.setProperty(`--rt-${key.replace('_', '-')}`, value);
-    }
-    
-    // 4. Global Selection Style
-    // This ensures even standard text highlighting matches the theme
-    const style_id = 'rt-global-overrides';
-    if (!document.getElementById(style_id)) {
-      const style = document.createElement('style');
-      style.id = style_id;
-      style.textContent = `
-        ::selection { background: var(--rt-bg-select); color: var(--rt-primary); }
-        ::-moz-selection { background: var(--rt-bg-select); color: var(--rt-primary); }
-        
-        /* Scrollbar Styling (Webkit) */
-        ::-webkit-scrollbar { width: 10px; }
-        ::-webkit-scrollbar-track { background: var(--rt-bg-app); }
-        ::-webkit-scrollbar-thumb { background: var(--rt-border-main); border-radius: 5px; }
-        ::-webkit-scrollbar-thumb:hover { background: var(--rt-secondary); }
-      `;
-      document.head.appendChild(style);
-    }
-  };
-} )();
diff --git a/developer/document/style/theme_dark_gold.js b/developer/document/style/theme_dark_gold.js
new file mode 100644 (file)
index 0000000..385d75c
--- /dev/null
@@ -0,0 +1,96 @@
+/*
+  Theme: Inverse Wheat (Dark)
+  Standard: Theme 1.0
+  Description: High contrast Amber on Deep Charcoal.
+*/
+( function(){
+  const RT = window.StyleRT = window.StyleRT || {};
+  
+  RT.theme_dark = function(){
+    RT.config = RT.config || {};
+    
+    // THEME 1.0 DATA CONTRACT
+    RT.config.theme = {
+       meta_is_dark: true
+      ,meta_name:    "Inverse Wheat"
+
+      // --- SURFACES (Depth & Container Hierarchy) ---
+      ,surface_0:       "hsl(0, 0%, 5%)"      // App Background (Deepest)
+      ,surface_1:       "hsl(0, 0%, 10%)"     // Sidebar / Nav / Panels
+      ,surface_2:       "hsl(0, 0%, 14%)"     // Cards / Floating Elements
+      ,surface_3:       "hsl(0, 0%, 18%)"     // Modals / Dropdowns / Popovers
+      ,surface_input:   "hsl(0, 0%, 12%)"     // Form Inputs
+      ,surface_code:    "hsl(0, 0%, 11%)"     // Code Block Background
+      ,surface_select:  "hsl(45, 100%, 15%)"  // Text Selection Highlight
+
+      // --- CONTENT (Text & Icons) ---
+      ,content_main:    "hsl(36, 30%, 85%)"   // Primary Reading Text
+      ,content_muted:   "hsl(36, 15%, 60%)"   // Metadata, subtitles
+      ,content_subtle:  "hsl(36, 10%, 40%)"   // Placeholders, disabled states
+      ,content_inverse: "hsl(0, 0%, 5%)"      // Text on high-contrast buttons
+
+      // --- BRAND & ACTION (The "Wheat" Identity) ---
+      ,brand_primary:   "hsl(45, 100%, 50%)"  // Main Action / H1 / Focus Ring
+      ,brand_secondary: "hsl(38, 90%, 65%)"   // Secondary Buttons / H2
+      ,brand_tertiary:  "hsl(30, 60%, 70%)"   // Accents / H3
+      ,brand_link:      "hsl(48, 100%, 50%)"  // Hyperlinks (High Visibility)
+
+      // --- BORDERS & DIVIDERS ---
+      ,border_faint:    "hsl(36, 20%, 15%)"   // Subtle separation
+      ,border_default:  "hsl(36, 20%, 25%)"   // Standard Card Borders
+      ,border_strong:   "hsl(36, 20%, 40%)"   // Active states / Inputs
+
+      // --- STATE & FEEDBACK (Earth Tones) ---
+      ,state_success:   "hsl(100, 50%, 45%)"  // Olive Green
+      ,state_warning:   "hsl(35, 90%, 55%)"   // Burnt Orange
+      ,state_error:     "hsl(0, 60%, 55%)"    // Brick Red
+      ,state_info:      "hsl(200, 40%, 55%)"  // Slate Blue
+
+      // --- SYNTAX HIGHLIGHTING (For Code) ---
+      ,syntax_keyword:  "hsl(35, 100%, 65%)"  // Orange
+      ,syntax_string:   "hsl(75, 50%, 60%)"   // Sage Green
+      ,syntax_func:     "hsl(45, 90%, 70%)"   // Light Gold
+      ,syntax_comment:  "hsl(36, 15%, 45%)"   // Brown/Gray
+    };
+
+    // --- APPLY THEME ---
+    const palette = RT.config.theme;
+    const body = document.body;
+    const html = document.documentElement;
+
+    // 1. Paint Base
+    html.style.backgroundColor = palette.surface_0;
+    body.style.backgroundColor = palette.surface_0;
+    body.style.color = palette.content_main;
+
+    // 2. Export Variables (Standardization)
+    const s = body.style;
+    for (const [key, value] of Object.entries(palette)) {
+      s.setProperty(`--rt-${key.replace(/_/g, '-')}`, value);
+    }
+    
+    // 3. Global Overrides
+    const style_id = 'rt-global-overrides';
+    if (!document.getElementById(style_id)) {
+      const style = document.createElement('style');
+      style.id = style_id;
+      style.textContent = `
+        ::selection { background: var(--rt-surface-select); color: var(--rt-brand-primary); }
+        ::-moz-selection { background: var(--rt-surface-select); color: var(--rt-brand-primary); }
+        
+        ::-webkit-scrollbar { width: 12px; }
+        ::-webkit-scrollbar-track { background: var(--rt-surface-0); }
+        ::-webkit-scrollbar-thumb { 
+           background: var(--rt-border-default); 
+           border: 2px solid var(--rt-surface-0);
+           border-radius: 8px; 
+        }
+        ::-webkit-scrollbar-thumb:hover { background: var(--rt-brand-secondary); }
+      `;
+      document.head.appendChild(style);
+    }
+  };
+  
+  // Auto-load for dev
+  RT.theme_dark();
+} )();
diff --git a/developer/document/style/theme_light_gold.js b/developer/document/style/theme_light_gold.js
new file mode 100644 (file)
index 0000000..4b5eea4
--- /dev/null
@@ -0,0 +1,70 @@
+/*
+  Theme: Classic Wheat (Light)
+  Standard: Theme 1.0
+  Description: Warm paper tones with Burnt Orange accents.
+*/
+( function(){
+  const RT = window.StyleRT = window.StyleRT || {};
+  
+  RT.theme_light = function(){
+    RT.config = RT.config || {};
+    
+    // THEME 1.0 DATA CONTRACT
+    RT.config.theme = {
+       meta_is_dark: false
+      ,meta_name:    "Classic Wheat"
+
+      // --- SURFACES ---
+      ,surface_0:       "hsl(40, 30%, 94%)"   // App Background (Cream/Linen)
+      ,surface_1:       "hsl(40, 25%, 90%)"   // Sidebar (Slightly darker beige)
+      ,surface_2:       "hsl(40, 20%, 98%)"   // Cards (Lighter, almost white)
+      ,surface_3:       "hsl(0, 0%, 100%)"    // Modals (Pure White)
+      ,surface_input:   "hsl(40, 20%, 98%)"   // Form Inputs
+      ,surface_code:    "hsl(40, 15%, 90%)"   // Code Block Background
+      ,surface_select:  "hsl(45, 100%, 85%)"  // Text Selection Highlight
+
+      // --- CONTENT ---
+      ,content_main:    "hsl(30, 20%, 20%)"   // Deep Umber (Not Black)
+      ,content_muted:   "hsl(30, 15%, 45%)"   // Medium Brown
+      ,content_subtle:  "hsl(30, 10%, 65%)"   // Light Brown/Gray
+      ,content_inverse: "hsl(40, 30%, 94%)"   // Text on dark buttons
+
+      // --- BRAND & ACTION ---
+      ,brand_primary:   "hsl(30, 90%, 35%)"   // Burnt Orange (Action)
+      ,brand_secondary: "hsl(35, 70%, 45%)"   // Rust / Gold
+      ,brand_tertiary:  "hsl(25, 60%, 55%)"   // Copper
+      ,brand_link:      "hsl(30, 100%, 35%)"  // Link Color
+
+      // --- BORDERS ---
+      ,border_faint:    "hsl(35, 20%, 85%)"
+      ,border_default:  "hsl(35, 20%, 75%)"
+      ,border_strong:   "hsl(35, 20%, 55%)"
+
+      // --- STATE & FEEDBACK ---
+      ,state_success:   "hsl(100, 40%, 40%)"  // Forest Green
+      ,state_warning:   "hsl(30, 90%, 50%)"   // Persimmon
+      ,state_error:     "hsl(0, 60%, 45%)"    // Crimson
+      ,state_info:      "hsl(200, 50%, 45%)"  // Navy Blue
+
+      // --- SYNTAX ---
+      ,syntax_keyword:  "hsl(20, 90%, 45%)"   // Rust
+      ,syntax_string:   "hsl(100, 35%, 35%)"  // Ivy Green
+      ,syntax_func:     "hsl(300, 30%, 40%)"  // Muted Purple
+      ,syntax_comment:  "hsl(35, 10%, 60%)"   // Light Brown
+    };
+
+    // --- APPLY THEME ---
+    const palette = RT.config.theme;
+    const body = document.body;
+    const html = document.documentElement;
+
+    html.style.backgroundColor = palette.surface_0;
+    body.style.backgroundColor = palette.surface_0;
+    body.style.color = palette.content_main;
+
+    const s = body.style;
+    for (const [key, value] of Object.entries(palette)) {
+      s.setProperty(`--rt-${key.replace(/_/g, '-')}`, value);
+    }
+  };
+} )();