css-tags 0.1.0

package/theme-generator.css

@@ -0,0 +1,979 @@
+/**
+ * Universal UI Color Theme Generator
+ * ==================================
+ *
+ * A standalone CSS file that generates complete color schemes using OKLCH.
+ * Can be used independently or integrated with the main framework.
+ *
+ * Features:
+ * - OKLCH color space for perceptually uniform colors
+ * - Auto-contrast text calculation (Lea Verou method)
+ * - Comprehensive color roles for UI components
+ * - Light/dark mode and high contrast support
+ * - Tailwind CSS integration
+ * - Utility classes for easy application
+ *
+ * Based on: https://lea.verou.me/blog/2024/contrast-color/
+ * Inspired by: https://meodai.github.io/rampensau/
+ */
+
+@import url("core/tokens.css") layer(tokens); /* Optional: import existing tokens */
+
+:root {
+  /* ============================================ */
+  /* INPUT VARIABLES - Customize these values    */
+  /* ============================================ */
+
+  /* Core Brand Color (OKLCH) */
+  --accent-h: 280;           /* Hue (0-360°) - Purple by default */
+  --accent-c: 0.15;          /* Chroma (0-1) - Saturation */
+  --accent-l: 60%;           /* Lightness (0-100%) */
+
+  /* Theme Configuration */
+  --surface-saturation: 0.015;  /* Surface chroma multiplier (0-1) */
+  --contrast-factor: 1.0;       /* Overall contrast multiplier (0.5-2.0) */
+  --outline-width: 1px;         /* Default outline width */
+  --outline-width-thick: 2px;   /* Thick outline width */
+
+  /* Border Radius Scale */
+  --border-radius-sm: 3px;
+  --border-radius-md: 6px;
+  --border-radius-lg: 8px;
+  --border-radius-xl: 12px;
+  --border-radius-full: 9999px;
+
+  /* Typography */
+  --font-family: system-ui, -apple-system, sans-serif;
+  --font-size-base: 1rem;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --line-height-base: 1.5;
+
+  /* Color Relationships */
+  --secondary-hue-shift: 60;    /* Degrees to shift for secondary (+60° = complementary) */
+  --tertiary-hue-shift: -90;    /* Degrees to shift for tertiary (-90° = triadic) */
+
+  /* Bedrock Mode: 'complementary' or 'dark' */
+  --bedrock-mode: complementary;
+
+  /* ============================================ */
+  /* DERIVED VARIABLES - Auto-generated colors   */
+  /* ============================================ */
+
+  /* Secondary & Tertiary Hues */
+  --secondary-h: calc((var(--accent-h) + var(--secondary-hue-shift)) mod 360);
+  --tertiary-h: calc((var(--accent-h) + var(--tertiary-hue-shift)) mod 360);
+
+  /* Feedback Hues (Semantic colors) */
+  --success-h: 145;  /* Green */
+  --warning-h: 55;   /* Amber */
+  --error-h: 25;     /* Red */
+  --info-h: 245;     /* Blue */
+
+  /* Base & Bedrock Colors */
+  --base: oklch(97.5% calc(var(--surface-saturation) * 0.9) var(--accent-h));
+  --bedrock: oklch(
+    var(--bedrock-mode, complementary) = complementary ?
+      calc(100% - oklch(from var(--base) l)) :
+      15%
+    calc(var(--surface-saturation) * 1.2) var(--accent-h)
+  );
+
+  /* Surface Hierarchy (content containers) */
+  --surface-muted: oklch(95% calc(var(--surface-saturation) * 0.8) var(--accent-h));
+  --surface-subtle: oklch(96% calc(var(--surface-saturation) * 1.05) var(--accent-h));
+  --surface: oklch(94% calc(var(--surface-saturation) * 1.2) var(--accent-h));
+  --surface-overt: oklch(77.5% calc(var(--surface-saturation) * 2.25) var(--accent-h));
+
+  /* ============================================ */
+  /* TEXT COLORS - Auto-contrast calculation     */
+  /* ============================================ */
+
+  /* Base text colors (for general use) */
+  --text-muted: oklch(45% calc(var(--surface-saturation) * 1.5 * var(--contrast-factor)) var(--accent-h));
+  --text-subtle: oklch(35% calc(var(--surface-saturation) * 1.8 * var(--contrast-factor)) var(--accent-h));
+  --text: oklch(20% calc(var(--surface-saturation) * 2 * var(--contrast-factor)) var(--accent-h));
+  --text-overt: oklch(10% calc(var(--surface-saturation) * 2.2 * var(--contrast-factor)) var(--accent-h));
+
+  /* Auto-contrast text on surfaces (Lea Verou method) */
+  /* These calculate optimal text color for readability on any background */
+  --text-on-base: oklch(from var(--base) calc(clamp(0, (0.5 - l) * -infinity, 1) * 0.8 + 0.2) calc(c * 0.1) h);
+  --text-on-bedrock: oklch(from var(--bedrock) calc(clamp(0, (0.5 - l) * -infinity, 1) * 0.8 + 0.2) calc(c * 0.1) h);
+  --text-on-surface-muted: oklch(from var(--surface-muted) calc(clamp(0, (0.5 - l) * -infinity, 1) * 0.8 + 0.2) calc(c * 0.1) h);
+  --text-on-surface-subtle: oklch(from var(--surface-subtle) calc(clamp(0, (0.5 - l) * -infinity, 1) * 0.8 + 0.2) calc(c * 0.1) h);
+  --text-on-surface: oklch(from var(--surface) calc(clamp(0, (0.5 - l) * -infinity, 1) * 0.8 + 0.2) calc(c * 0.1) h);
+  --text-on-surface-overt: oklch(from var(--surface-overt) calc(clamp(0, (0.5 - l) * -infinity, 1) * 0.8 + 0.2) calc(c * 0.1) h);
+
+  /* Link colors */
+  --text-link: oklch(from var(--accent) calc(l + 0.1) calc(c + 0.05) h);
+  --text-link-hover: oklch(from var(--text-link) calc(l - 0.1) c h);
+  --text-link-visited: oklch(from var(--text-link) calc(l - 0.05) calc(c + 0.02) h);
+
+  /* Highlighted text (code, emphasis) */
+  --text-highlight-subtle: oklch(from var(--accent) calc(l + 0.2) calc(c - 0.05) h);
+  --text-highlight-overt: oklch(from var(--accent) calc(l - 0.1) calc(c + 0.05) h);
+  --text-highlight-bg: oklch(from var(--accent) calc(l + 0.8) calc(c - 0.3) h);
+
+  /* ============================================ */
+  /* OUTLINE & BORDER COLORS                     */
+  /* ============================================ */
+
+  /* General outlines */
+  --outline-muted: oklch(from var(--base) calc(l - 0.04) calc(c + var(--surface-saturation) * 0.5) h);
+  --outline-subtle: oklch(from var(--base) calc(l - 0.05) calc(c + var(--surface-saturation)) h);
+  --outline: oklch(from var(--base) calc(l - 0.06) calc(c + var(--surface-saturation) * 1.5) h);
+  --outline-overt: oklch(from var(--base) calc(l - 0.07) calc(c + var(--surface-saturation) * 2) h);
+
+  /* Semantic outlines */
+  --outline-focus: oklch(from var(--accent) calc(l - 0.1) calc(c + 0.1) h);
+  --outline-active: oklch(from var(--accent) calc(l - 0.05) calc(c + 0.05) h);
+  --outline-error: oklch(50% 0.2 var(--error-h));
+  --outline-warning: oklch(65% 0.15 var(--warning-h));
+  --outline-success: oklch(55% 0.15 var(--success-h));
+  --outline-info: oklch(60% 0.15 var(--info-h));
+
+  /* Highlight outlines */
+  --outline-highlight-subtle: oklch(from var(--accent) calc(l + 0.3) calc(c - 0.2) h);
+  --outline-highlight-overt: oklch(from var(--accent) calc(l + 0.1) calc(c - 0.1) h);
+
+  /* ============================================ */
+  /* HIGHLIGHT & INTERACTION COLORS              */
+  /* ============================================ */
+
+  /* Selection and hover backgrounds */
+  --highlight-muted: oklch(from var(--base) calc(l - 0.01) c h);
+  --highlight-subtle: oklch(from var(--base) calc(l - 0.03) c h);
+  --highlight-overt: oklch(from var(--accent) calc(l + 0.8) calc(c - 0.3) h);
+
+  /* Scrim (overlay) */
+  --scrim: oklch(0% 0 0 / 0.5);
+  --scrim-light: oklch(100% 0 0 / 0.3);
+
+  /* ============================================ */
+  /* ACCENT COLOR SYSTEM                         */
+  /* ============================================ */
+
+  /* Primary accent variations */
+  --accent: oklch(var(--accent-l) var(--accent-c) var(--accent-h));
+  --accent-muted: oklch(from var(--accent) calc(l + 0.15) calc(c - 0.05) h);
+  --accent-subtle: oklch(from var(--accent) calc(l + 0.05) calc(c - 0.02) h);
+  --accent-surface: oklch(from var(--accent) calc(l + 0.8) calc(c - 0.1) h);
+  --accent-overt: oklch(from var(--accent) calc(l - 0.1) calc(c + 0.05) h);
+  --accent-highlight: oklch(from var(--accent) calc(l + 0.5) calc(c - 0.2) h);
+
+  /* Accent text on different surfaces */
+  --accent-on-base: oklch(from var(--base) calc(clamp(0, (0.5 - l) * -infinity, 1) * 0.8 + 0.2) calc(c * 0.1) h);
+  --accent-on-bedrock: oklch(from var(--bedrock) calc(clamp(0, (0.5 - l) * -infinity, 1) * 0.8 + 0.2) calc(c * 0.1) h);
+  --accent-on-surface: oklch(from var(--surface) calc(clamp(0, (0.5 - l) * -infinity, 1) * 0.8 + 0.2) calc(c * 0.1) h);
+
+  /* ============================================ */
+  /* SECONDARY & TERTIARY SYSTEMS                */
+  /* ============================================ */
+
+  /* Secondary colors */
+  --secondary: oklch(var(--accent-l) var(--accent-c) var(--secondary-h));
+  --secondary-muted: oklch(from var(--secondary) calc(l + 0.15) calc(c - 0.05) h);
+  --secondary-subtle: oklch(from var(--secondary) calc(l + 0.05) calc(c - 0.02) h);
+  --secondary-overt: oklch(from var(--secondary) calc(l - 0.1) calc(c + 0.05) h);
+
+  /* Tertiary colors */
+  --tertiary: oklch(var(--accent-l) var(--accent-c) var(--tertiary-h));
+  --tertiary-muted: oklch(from var(--tertiary) calc(l + 0.15) calc(c - 0.05) h);
+  --tertiary-subtle: oklch(from var(--tertiary) calc(l + 0.05) calc(c - 0.02) h);
+  --tertiary-overt: oklch(from var(--tertiary) calc(l - 0.1) calc(c + 0.05) h);
+
+  /* ============================================ */
+  /* SEMANTIC COLORS (Success, Warning, etc.)    */
+  /* ============================================ */
+
+  --success: oklch(55% 0.15 var(--success-h));
+  --warning: oklch(70% 0.15 var(--warning-h));
+  --error: oklch(60% 0.2 var(--error-h));
+  --info: oklch(65% 0.15 var(--info-h));
+
+  /* Semantic text colors */
+  --text-success: var(--success);
+  --text-warning: var(--warning);
+  --text-error: var(--error);
+  --text-info: var(--info);
+
+  /* Semantic surface colors */
+  --surface-success: oklch(from var(--success) calc(l + 0.9) calc(c - 0.1) h);
+  --surface-warning: oklch(from var(--warning) calc(l + 0.8) calc(c - 0.1) h);
+  --surface-error: oklch(from var(--error) calc(l + 0.8) calc(c - 0.1) h);
+  --surface-info: oklch(from var(--info) calc(l + 0.8) calc(c - 0.1) h);
+
+  /* ============================================ */
+  /* BUTTON SYSTEM                               */
+  /* ============================================ */
+
+  /* Button base styles */
+  --button-padding-x: 1rem;
+  --button-padding-y: 0.5rem;
+  --button-font-weight: var(--font-weight-medium);
+  --button-border-width: var(--outline-width);
+  --button-transition: all 0.15s ease;
+
+  /* Button variants */
+  --button: var(--surface);
+  --button-hover: oklch(from var(--button) calc(l - 0.05) c h);
+  --button-active: oklch(from var(--button) calc(l - 0.08) c h);
+  --button-disabled: var(--surface-muted);
+
+  --button-primary: var(--accent);
+  --button-primary-hover: oklch(from var(--button-primary) calc(l - 0.05) c h);
+  --button-primary-active: oklch(from var(--button-primary) calc(l - 0.08) c h);
+  --button-primary-disabled: var(--accent-muted);
+
+  --button-secondary: var(--secondary);
+  --button-secondary-hover: oklch(from var(--button-secondary) calc(l - 0.05) c h);
+  --button-secondary-active: oklch(from var(--button-secondary) calc(l - 0.08) c h);
+  --button-secondary-disabled: var(--secondary-muted);
+
+  --button-outline: transparent;
+  --button-outline-hover: var(--highlight-subtle);
+  --button-outline-active: var(--highlight-overt);
+  --button-outline-disabled: transparent;
+
+  --button-ghost: transparent;
+  --button-ghost-hover: var(--highlight-subtle);
+  --button-ghost-active: var(--highlight-overt);
+  --button-ghost-disabled: transparent;
+
+  /* Button text colors */
+  --button-text: var(--accent);
+  --button-text-hover: oklch(from var(--button-text) calc(l - 0.05) c h);
+  --button-text-active: oklch(from var(--button-text) calc(l - 0.08) c h);
+  --button-text-disabled: var(--text-muted);
+
+   /* Accent color variations for theming */
+   --accent-light: oklch(from var(--accent) calc(l + 0.8) calc(c - 0.1) h);
+   --accent-dark: oklch(from var(--accent) calc(l - 0.3) calc(c + 0.05) h);
+
+   /* Form component colors */
+   --ec-frm-tooltipSuccessBg: var(--accent-light);
+   --ec-frm-tooltipSuccessFg: var(--accent-dark);
+}
+
+/* ============================================ */
+/* TAILWIND INTEGRATION                        */
+/* ============================================ */
+
+/*
+Tailwind Config Extension:
+
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        'base': 'var(--base)',
+        'bedrock': 'var(--bedrock)',
+        'surface': {
+          'muted': 'var(--surface-muted)',
+          'subtle': 'var(--surface-subtle)',
+          DEFAULT: 'var(--surface)',
+          'overt': 'var(--surface-overt)',
+        },
+        'text': {
+          'muted': 'var(--text-muted)',
+          'subtle': 'var(--text-subtle)',
+          DEFAULT: 'var(--text)',
+          'overt': 'var(--text-overt)',
+          'link': 'var(--text-link)',
+          'highlight': {
+            'subtle': 'var(--text-highlight-subtle)',
+            'overt': 'var(--text-highlight-overt)',
+          },
+        },
+        'accent': {
+          DEFAULT: 'var(--accent)',
+          'muted': 'var(--accent-muted)',
+          'subtle': 'var(--accent-subtle)',
+          'overt': 'var(--accent-overt)',
+        },
+        'secondary': 'var(--secondary)',
+        'tertiary': 'var(--tertiary)',
+        'success': 'var(--success)',
+        'warning': 'var(--warning)',
+        'error': 'var(--error)',
+        'info': 'var(--info)',
+      },
+      borderColor: {
+        'muted': 'var(--outline-muted)',
+        'subtle': 'var(--outline-subtle)',
+        DEFAULT: 'var(--outline)',
+        'overt': 'var(--outline-overt)',
+        'focus': 'var(--outline-focus)',
+        'error': 'var(--outline-error)',
+      },
+      backgroundColor: {
+        'highlight': {
+          'muted': 'var(--highlight-muted)',
+          'subtle': 'var(--highlight-subtle)',
+          'overt': 'var(--highlight-overt)',
+        },
+      },
+    },
+  },
+}
+*/
+
+/* ============================================ */
+/* DARK MODE SUPPORT                           */
+/* ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Dark mode adjustments */
+    --accent-l: 70%;
+    --accent-c: 0.18;
+    --surface-saturation: 0.02;
+
+    /* Invert surface hierarchy for dark backgrounds */
+    --base: oklch(22% calc(var(--surface-saturation) * 0.9) var(--accent-h));
+    --bedrock: oklch(95% calc(var(--surface-saturation) * 0.7) var(--accent-h));
+
+    --surface-muted: oklch(20% calc(var(--surface-saturation) * 0.5) var(--accent-h));
+    --surface-subtle: oklch(21% calc(var(--surface-saturation) * 0.7) var(--accent-h));
+    --surface: oklch(25% var(--surface-saturation) var(--accent-h));
+    --surface-overt: oklch(30% calc(var(--surface-saturation) * 1.2) var(--accent-h));
+
+    /* Adjust text for dark backgrounds */
+    --text-muted: oklch(65% calc(var(--surface-saturation) * 1.2) var(--accent-h));
+    --text-subtle: oklch(75% calc(var(--surface-saturation) * 1.0) var(--accent-h));
+    --text: oklch(88% calc(var(--surface-saturation) * 0.8) var(--accent-h));
+    --text-overt: oklch(95% calc(var(--surface-saturation) * 0.6) var(--accent-h));
+
+    /* Dark mode semantic colors */
+    --success: oklch(65% 0.15 var(--success-h));
+    --warning: oklch(75% 0.15 var(--warning-h));
+    --error: oklch(70% 0.2 var(--error-h));
+    --info: oklch(75% 0.15 var(--info-h));
+  }
+}
+
+/* ============================================ */
+/* HIGH CONTRAST MODE SUPPORT                 */
+/* ============================================ */
+
+@media (prefers-contrast: high) {
+  :root {
+    --contrast-factor: 1.3;
+    --outline-width: 2px;
+    --outline-width-thick: 3px;
+
+    /* Enhanced contrasts */
+    --text-subtle: oklch(30% 0.03 var(--accent-h));
+    --text-muted: oklch(25% 0.02 var(--accent-h));
+    --outline-focus: oklch(50% 0.3 var(--accent-h));
+    --outline: oklch(from var(--base) calc(l - 0.08) calc(c + var(--surface-saturation) * 2) h);
+  }
+}
+
+/* ============================================ */
+/* USAGE EXAMPLES                              */
+/* ============================================ */
+
+/*
+Basic Usage:
+
+<main class="bg-base text-on-base">
+  <header class="bg-bedrock text-on-bedrock">
+    <h1 class="text-overt">Title</h1>
+    <p class="text-subtle">Subtitle</p>
+  </header>
+
+  <section class="bg-surface text-on-surface">
+    <h2 class="text-overt">Section Title</h2>
+    <p class="text">Main content with <a href="#" class="text-link">links</a></p>
+    <div class="bg-surface-subtle text-on-surface-subtle">
+      <p class="text-subtle">Secondary content</p>
+    </div>
+  </section>
+
+  <button class="button-primary">Primary Action</button>
+  <button class="button-outline">Secondary Action</button>
+  <button class="button-text">Text Button</button>
+</main>
+
+Customization:
+
+:root {
+  --accent-h: 45;     /* Yellow theme */
+  --accent-c: 0.14;   /* Moderate saturation */
+  --accent-l: 65%;    /* Good lightness */
+  --surface-saturation: 0.012;  /* Subtle surfaces */
+  --contrast-factor: 1.2;       /* Higher contrast */
+}
+*/
+
+@import url("core/tokens.css") layer(tokens); /* Optional: import existing tokens */
+
+:root {
+  /* ============================================ */
+  /* INPUT VARIABLES - Customize these values    */
+  /* ============================================ */
+
+  /* Core Brand Color (OKLCH) */
+  --accent-h: 280;           /* Hue (0-360°) - Purple by default */
+  --accent-c: 0.15;          /* Chroma (0-1) - Saturation */
+  --accent-l: 60%;           /* Lightness (0-100%) */
+
+  /* Theme Configuration */
+  --surface-saturation: 0.015;  /* Surface chroma multiplier (0-1) */
+  --contrast-factor: 1.0;       /* Overall contrast multiplier (0.5-2.0) */
+  --outline-width: 1px;         /* Default outline width */
+  --outline-width-thick: 2px;   /* Thick outline width */
+
+  /* Border Radius Scale */
+  --border-radius-sm: 3px;
+  --border-radius-md: 6px;
+  --border-radius-lg: 8px;
+  --border-radius-xl: 12px;
+  --border-radius-full: 9999px;
+
+  /* Typography */
+  --font-family: system-ui, -apple-system, sans-serif;
+  --font-size-base: 1rem;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --line-height-base: 1.5;
+
+  /* Color Relationships */
+  --secondary-hue-shift: 60;    /* Degrees to shift for secondary (+60° = complementary) */
+  --tertiary-hue-shift: -90;    /* Degrees to shift for tertiary (-90° = triadic) */
+
+  /* Bedrock Mode: 'complementary' or 'dark' */
+  --bedrock-mode: complementary;
+
+  /* ============================================ */
+  /* DERIVED VARIABLES - Auto-generated colors   */
+  /* ============================================ */
+
+  /* Secondary & Tertiary Hues */
+  --secondary-h: calc((var(--accent-h) + var(--secondary-hue-shift)) mod 360);
+  --tertiary-h: calc((var(--accent-h) + var(--tertiary-hue-shift)) mod 360);
+
+  /* Feedback Hues (Semantic colors) */
+  --success-h: 145;  /* Green */
+  --warning-h: 55;   /* Amber */
+  --error-h: 25;     /* Red */
+  --info-h: 245;     /* Blue */
+
+  /* Base & Bedrock Colors */
+  --base: oklch(97.5% calc(var(--surface-saturation) * 0.9) var(--accent-h));
+  --bedrock: oklch(
+    var(--bedrock-mode, complementary) = complementary ?
+      calc(100% - oklch(from var(--base) l)) :
+      15%
+    calc(var(--surface-saturation) * 1.2) var(--accent-h)
+  );
+
+  /* Surface Hierarchy (content containers) */
+  --surface-muted: oklch(95% calc(var(--surface-saturation) * 0.8) var(--accent-h));
+  --surface-subtle: oklch(96% calc(var(--surface-saturation) * 1.05) var(--accent-h));
+  --surface: oklch(94% calc(var(--surface-saturation) * 1.2) var(--accent-h));
+  --surface-overt: oklch(77.5% calc(var(--surface-saturation) * 2.25) var(--accent-h));
+
+  /* ============================================ */
+  /* TEXT COLORS - Auto-contrast calculation     */
+  /* ============================================ */
+
+  /* Base text colors (for general use) */
+  --text-muted: oklch(45% calc(var(--surface-saturation) * 1.5 * var(--contrast-factor)) var(--accent-h));
+  --text-subtle: oklch(35% calc(var(--surface-saturation) * 1.8 * var(--contrast-factor)) var(--accent-h));
+  --text: oklch(20% calc(var(--surface-saturation) * 2 * var(--contrast-factor)) var(--accent-h));
+  --text-overt: oklch(10% calc(var(--surface-saturation) * 2.2 * var(--contrast-factor)) var(--accent-h));
+
+  /* Auto-contrast text on surfaces (Lea Verou method) */
+  /* These calculate optimal text color for readability on any background */
+  --text-on-base: oklch(from var(--base) calc(clamp(0, (0.5 - l) * -infinity, 1) * 0.8 + 0.2) calc(c * 0.1) h);
+  --text-on-bedrock: oklch(from var(--bedrock) calc(clamp(0, (0.5 - l) * -infinity, 1) * 0.8 + 0.2) calc(c * 0.1) h);
+  --text-on-surface-muted: oklch(from var(--surface-muted) calc(clamp(0, (0.5 - l) * -infinity, 1) * 0.8 + 0.2) calc(c * 0.1) h);
+  --text-on-surface-subtle: oklch(from var(--surface-subtle) calc(clamp(0, (0.5 - l) * -infinity, 1) * 0.8 + 0.2) calc(c * 0.1) h);
+  --text-on-surface: oklch(from var(--surface) calc(clamp(0, (0.5 - l) * -infinity, 1) * 0.8 + 0.2) calc(c * 0.1) h);
+  --text-on-surface-overt: oklch(from var(--surface-overt) calc(clamp(0, (0.5 - l) * -infinity, 1) * 0.8 + 0.2) calc(c * 0.1) h);
+
+  /* Link colors */
+  --text-link: oklch(from var(--accent) calc(l + 0.1) calc(c + 0.05) h);
+  --text-link-hover: oklch(from var(--text-link) calc(l - 0.1) c h);
+  --text-link-visited: oklch(from var(--text-link) calc(l - 0.05) calc(c + 0.02) h);
+
+  /* Highlighted text (code, emphasis) */
+  --text-highlight-subtle: oklch(from var(--accent) calc(l + 0.2) calc(c - 0.05) h);
+  --text-highlight-overt: oklch(from var(--accent) calc(l - 0.1) calc(c + 0.05) h);
+  --text-highlight-bg: oklch(from var(--accent) calc(l + 0.8) calc(c - 0.3) h);
+
+  /* ============================================ */
+  /* OUTLINE & BORDER COLORS                     */
+  /* ============================================ */
+
+  /* General outlines */
+  --outline-muted: oklch(from var(--base) calc(l - 0.04) calc(c + var(--surface-saturation) * 0.5) h);
+  --outline-subtle: oklch(from var(--base) calc(l - 0.05) calc(c + var(--surface-saturation)) h);
+  --outline: oklch(from var(--base) calc(l - 0.06) calc(c + var(--surface-saturation) * 1.5) h);
+  --outline-overt: oklch(from var(--base) calc(l - 0.07) calc(c + var(--surface-saturation) * 2) h);
+
+  /* Semantic outlines */
+  --outline-focus: oklch(from var(--accent) calc(l - 0.1) calc(c + 0.1) h);
+  --outline-active: oklch(from var(--accent) calc(l - 0.05) calc(c + 0.05) h);
+  --outline-error: oklch(50% 0.2 var(--error-h));
+  --outline-warning: oklch(65% 0.15 var(--warning-h));
+  --outline-success: oklch(55% 0.15 var(--success-h));
+  --outline-info: oklch(60% 0.15 var(--info-h));
+
+  /* Highlight outlines */
+  --outline-highlight-subtle: oklch(from var(--accent) calc(l + 0.3) calc(c - 0.2) h);
+  --outline-highlight-overt: oklch(from var(--accent) calc(l + 0.1) calc(c - 0.1) h);
+
+  /* ============================================ */
+  /* HIGHLIGHT & INTERACTION COLORS              */
+  /* ============================================ */
+
+  /* Selection and hover backgrounds */
+  --highlight-muted: oklch(from var(--base) calc(l - 0.01) c h);
+  --highlight-subtle: oklch(from var(--base) calc(l - 0.03) c h);
+  --highlight-overt: oklch(from var(--accent) calc(l + 0.8) calc(c - 0.3) h);
+
+  /* Scrim (overlay) */
+  --scrim: oklch(0% 0 0 / 0.5);
+  --scrim-light: oklch(100% 0 0 / 0.3);
+
+  /* ============================================ */
+  /* ACCENT COLOR SYSTEM                         */
+  /* ============================================ */
+
+  /* Primary accent variations */
+  --accent: oklch(var(--accent-l) var(--accent-c) var(--accent-h));
+  --accent-muted: oklch(from var(--accent) calc(l + 0.15) calc(c - 0.05) h);
+  --accent-subtle: oklch(from var(--accent) calc(l + 0.05) calc(c - 0.02) h);
+  --accent-surface: oklch(from var(--accent) calc(l + 0.8) calc(c - 0.1) h);
+  --accent-overt: oklch(from var(--accent) calc(l - 0.1) calc(c + 0.05) h);
+  --accent-highlight: oklch(from var(--accent) calc(l + 0.5) calc(c - 0.2) h);
+
+  /* Accent text on different surfaces */
+  --accent-on-base: oklch(from var(--base) calc(clamp(0, (0.5 - l) * -infinity, 1) * 0.8 + 0.2) calc(c * 0.1) h);
+  --accent-on-bedrock: oklch(from var(--bedrock) calc(clamp(0, (0.5 - l) * -infinity, 1) * 0.8 + 0.2) calc(c * 0.1) h);
+  --accent-on-surface: oklch(from var(--surface) calc(clamp(0, (0.5 - l) * -infinity, 1) * 0.8 + 0.2) calc(c * 0.1) h);
+
+  /* ============================================ */
+  /* SECONDARY & TERTIARY SYSTEMS                */
+  /* ============================================ */
+
+  /* Secondary colors */
+  --secondary: oklch(var(--accent-l) var(--accent-c) var(--secondary-h));
+  --secondary-muted: oklch(from var(--secondary) calc(l + 0.15) calc(c - 0.05) h);
+  --secondary-subtle: oklch(from var(--secondary) calc(l + 0.05) calc(c - 0.02) h);
+  --secondary-overt: oklch(from var(--secondary) calc(l - 0.1) calc(c + 0.05) h);
+
+  /* Tertiary colors */
+  --tertiary: oklch(var(--accent-l) var(--accent-c) var(--tertiary-h));
+  --tertiary-muted: oklch(from var(--tertiary) calc(l + 0.15) calc(c - 0.05) h);
+  --tertiary-subtle: oklch(from var(--tertiary) calc(l + 0.05) calc(c - 0.02) h);
+  --tertiary-overt: oklch(from var(--tertiary) calc(l - 0.1) calc(c + 0.05) h);
+
+  /* ============================================ */
+  /* SEMANTIC COLORS (Success, Warning, etc.)    */
+  /* ============================================ */
+
+  --success: oklch(55% 0.15 var(--success-h));
+  --warning: oklch(70% 0.15 var(--warning-h));
+  --error: oklch(60% 0.2 var(--error-h));
+  --info: oklch(65% 0.15 var(--info-h));
+
+  /* Semantic text colors */
+  --text-success: var(--success);
+  --text-warning: var(--warning);
+  --text-error: var(--error);
+  --text-info: var(--info);
+
+  /* Semantic surface colors */
+  --surface-success: oklch(from var(--success) calc(l + 0.9) calc(c - 0.1) h);
+  --surface-warning: oklch(from var(--warning) calc(l + 0.8) calc(c - 0.1) h);
+  --surface-error: oklch(from var(--error) calc(l + 0.8) calc(c - 0.1) h);
+  --surface-info: oklch(from var(--info) calc(l + 0.8) calc(c - 0.1) h);
+
+  /* ============================================ */
+  /* BUTTON SYSTEM                               */
+  /* ============================================ */
+
+  /* Button base styles */
+  --button-padding-x: 1rem;
+  --button-padding-y: 0.5rem;
+  --button-font-weight: var(--font-weight-medium);
+  --button-border-width: var(--outline-width);
+  --button-transition: all 0.15s ease;
+
+  /* Button variants */
+  --button: var(--surface);
+  --button-hover: oklch(from var(--button) calc(l - 0.05) c h);
+  --button-active: oklch(from var(--button) calc(l - 0.08) c h);
+  --button-disabled: var(--surface-muted);
+
+  --button-primary: var(--accent);
+  --button-primary-hover: oklch(from var(--button-primary) calc(l - 0.05) c h);
+  --button-primary-active: oklch(from var(--button-primary) calc(l - 0.08) c h);
+  --button-primary-disabled: var(--accent-muted);
+
+  --button-secondary: var(--secondary);
+  --button-secondary-hover: oklch(from var(--button-secondary) calc(l - 0.05) c h);
+  --button-secondary-active: oklch(from var(--button-secondary) calc(l - 0.08) c h);
+  --button-secondary-disabled: var(--secondary-muted);
+
+  --button-outline: transparent;
+  --button-outline-hover: var(--highlight-subtle);
+  --button-outline-active: var(--highlight-overt);
+  --button-outline-disabled: transparent;
+
+  --button-ghost: transparent;
+  --button-ghost-hover: var(--highlight-subtle);
+  --button-ghost-active: var(--highlight-overt);
+  --button-ghost-disabled: transparent;
+
+  /* Button text colors */
+  --button-text: var(--accent);
+  --button-text-hover: oklch(from var(--button-text) calc(l - 0.05) c h);
+  --button-text-active: oklch(from var(--button-text) calc(l - 0.08) c h);
+  --button-text-disabled: var(--text-muted);
+}
+
+/* ============================================ */
+/* UTILITY CLASSES - For easy application      */
+/* ============================================ */
+
+/* Background Colors */
+.bg-base { background-color: var(--base); }
+.bg-bedrock { background-color: var(--bedrock); }
+.bg-surface-muted { background-color: var(--surface-muted); }
+.bg-surface-subtle { background-color: var(--surface-subtle); }
+.bg-surface { background-color: var(--surface); }
+.bg-surface-overt { background-color: var(--surface-overt); }
+
+/* Text Colors */
+.text-muted { color: var(--text-muted); }
+.text-subtle { color: var(--text-subtle); }
+.text { color: var(--text); }
+.text-overt { color: var(--text-overt); }
+.text-link { color: var(--text-link); }
+.text-link:hover { color: var(--text-link-hover); }
+.text-highlight-subtle { color: var(--text-highlight-subtle); }
+.text-highlight-overt { color: var(--text-highlight-overt); }
+
+/* Text on Surfaces */
+.text-on-base { color: var(--text-on-base); }
+.text-on-bedrock { color: var(--text-on-bedrock); }
+.text-on-surface-muted { color: var(--text-on-surface-muted); }
+.text-on-surface-subtle { color: var(--text-on-surface-subtle); }
+.text-on-surface { color: var(--text-on-surface); }
+.text-on-surface-overt { color: var(--text-on-surface-overt); }
+
+/* Outline/Border Colors */
+.border-muted { border-color: var(--outline-muted); }
+.border-subtle { border-color: var(--outline-subtle); }
+.border { border-color: var(--outline); }
+.border-overt { border-color: var(--outline-overt); }
+.border-focus { border-color: var(--outline-focus); }
+.border-active { border-color: var(--outline-active); }
+.border-error { border-color: var(--outline-error); }
+.border-warning { border-color: var(--outline-warning); }
+.border-success { border-color: var(--outline-success); }
+.border-info { border-color: var(--outline-info); }
+
+/* Highlight Backgrounds */
+.bg-highlight-muted { background-color: var(--highlight-muted); }
+.bg-highlight-subtle { background-color: var(--highlight-subtle); }
+.bg-highlight-overt { background-color: var(--highlight-overt); }
+.bg-text-highlight { background-color: var(--text-highlight-bg); }
+
+/* Accent Colors */
+.bg-accent { background-color: var(--accent); }
+.bg-accent-muted { background-color: var(--accent-muted); }
+.bg-accent-subtle { background-color: var(--accent-subtle); }
+.bg-accent-surface { background-color: var(--accent-surface); }
+.bg-accent-overt { background-color: var(--accent-overt); }
+.bg-accent-highlight { background-color: var(--accent-highlight); }
+
+.text-accent { color: var(--accent); }
+.text-accent-muted { color: var(--accent-muted); }
+.text-accent-subtle { color: var(--accent-subtle); }
+.text-accent-overt { color: var(--accent-overt); }
+
+.text-accent-on-base { color: var(--accent-on-base); }
+.text-accent-on-bedrock { color: var(--accent-on-bedrock); }
+.text-accent-on-surface { color: var(--accent-on-surface); }
+
+/* Secondary Colors */
+.bg-secondary { background-color: var(--secondary); }
+.bg-secondary-muted { background-color: var(--secondary-muted); }
+.bg-secondary-subtle { background-color: var(--secondary-subtle); }
+.bg-secondary-overt { background-color: var(--secondary-overt); }
+
+.text-secondary { color: var(--secondary); }
+.text-secondary-muted { color: var(--secondary-muted); }
+.text-secondary-subtle { color: var(--secondary-subtle); }
+.text-secondary-overt { color: var(--secondary-overt); }
+
+/* Tertiary Colors */
+.bg-tertiary { background-color: var(--tertiary); }
+.bg-tertiary-muted { background-color: var(--tertiary-muted); }
+.bg-tertiary-subtle { background-color: var(--tertiary-subtle); }
+.bg-tertiary-overt { background-color: var(--tertiary-overt); }
+
+.text-tertiary { color: var(--tertiary); }
+.text-tertiary-muted { color: var(--tertiary-muted); }
+.text-tertiary-subtle { color: var(--tertiary-subtle); }
+.text-tertiary-overt { color: var(--tertiary-overt); }
+
+/* Semantic Colors */
+.bg-success { background-color: var(--surface-success); }
+.bg-warning { background-color: var(--surface-warning); }
+.bg-error { background-color: var(--surface-error); }
+.bg-info { background-color: var(--surface-info); }
+
+.text-success { color: var(--text-success); }
+.text-warning { color: var(--text-warning); }
+.text-error { color: var(--text-error); }
+.text-info { color: var(--text-info); }
+
+.border-success { border-color: var(--outline-success); }
+.border-warning { border-color: var(--outline-warning); }
+.border-error { border-color: var(--outline-error); }
+.border-info { border-color: var(--outline-info); }
+
+/* Button Classes */
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--button-padding-y) var(--button-padding-x);
+  font-family: var(--font-family);
+  font-weight: var(--button-font-weight);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  border: var(--button-border-width) solid var(--outline);
+  border-radius: var(--border-radius-md);
+  background-color: var(--button);
+  color: var(--text-on-surface);
+  cursor: pointer;
+  transition: var(--button-transition);
+  text-decoration: none;
+}
+
+.button:hover { background-color: var(--button-hover); }
+.button:active { background-color: var(--button-active); }
+.button:disabled {
+  background-color: var(--button-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.button-primary {
+  background-color: var(--button-primary);
+  border-color: var(--accent);
+  color: var(--accent-on-base);
+}
+.button-primary:hover { background-color: var(--button-primary-hover); }
+.button-primary:active { background-color: var(--button-primary-active); }
+.button-primary:disabled { background-color: var(--button-primary-disabled); }
+
+.button-secondary {
+  background-color: var(--button-secondary);
+  border-color: var(--secondary);
+  color: var(--secondary-on-base);
+}
+.button-secondary:hover { background-color: var(--button-secondary-hover); }
+.button-secondary:active { background-color: var(--button-secondary-active); }
+.button-secondary:disabled { background-color: var(--button-secondary-disabled); }
+
+.button-outline {
+  background-color: var(--button-outline);
+  border-color: var(--outline);
+  color: var(--text);
+}
+.button-outline:hover { background-color: var(--button-outline-hover); }
+.button-outline:active { background-color: var(--button-outline-active); }
+.button-outline:disabled { background-color: var(--button-outline-disabled); }
+
+.button-ghost {
+  background-color: var(--button-ghost);
+  border-color: transparent;
+  color: var(--text);
+}
+.button-ghost:hover { background-color: var(--button-ghost-hover); }
+.button-ghost:active { background-color: var(--button-ghost-active); }
+.button-ghost:disabled { background-color: var(--button-ghost-disabled); }
+
+.button-text {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--button-text);
+  padding: var(--button-padding-y) var(--button-padding-x);
+}
+.button-text:hover { color: var(--button-text-hover); }
+.button-text:active { color: var(--button-text-active); }
+.button-text:disabled { color: var(--button-text-disabled); }
+
+/* Scrim */
+.scrim { background-color: var(--scrim); }
+.scrim-light { background-color: var(--scrim-light); }
+
+/* ============================================ */
+/* TAILWIND INTEGRATION                        */
+/* ============================================ */
+
+/*
+Tailwind Config Extension:
+
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        'base': 'var(--base)',
+        'bedrock': 'var(--bedrock)',
+        'surface': {
+          'muted': 'var(--surface-muted)',
+          'subtle': 'var(--surface-subtle)',
+          DEFAULT: 'var(--surface)',
+          'overt': 'var(--surface-overt)',
+        },
+        'text': {
+          'muted': 'var(--text-muted)',
+          'subtle': 'var(--text-subtle)',
+          DEFAULT: 'var(--text)',
+          'overt': 'var(--text-overt)',
+          'link': 'var(--text-link)',
+          'highlight': {
+            'subtle': 'var(--text-highlight-subtle)',
+            'overt': 'var(--text-highlight-overt)',
+          },
+        },
+        'accent': {
+          DEFAULT: 'var(--accent)',
+          'muted': 'var(--accent-muted)',
+          'subtle': 'var(--accent-subtle)',
+          'overt': 'var(--accent-overt)',
+        },
+        'secondary': 'var(--secondary)',
+        'tertiary': 'var(--tertiary)',
+        'success': 'var(--success)',
+        'warning': 'var(--warning)',
+        'error': 'var(--error)',
+        'info': 'var(--info)',
+      },
+      borderColor: {
+        'muted': 'var(--outline-muted)',
+        'subtle': 'var(--outline-subtle)',
+        DEFAULT: 'var(--outline)',
+        'overt': 'var(--outline-overt)',
+        'focus': 'var(--outline-focus)',
+        'error': 'var(--outline-error)',
+      },
+      backgroundColor: {
+        'highlight': {
+          'muted': 'var(--highlight-muted)',
+          'subtle': 'var(--highlight-subtle)',
+          'overt': 'var(--highlight-overt)',
+        },
+      },
+    },
+  },
+}
+*/
+
+/* ============================================ */
+/* DARK MODE SUPPORT                           */
+/* ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Dark mode adjustments */
+    --accent-l: 70%;
+    --accent-c: 0.18;
+    --surface-saturation: 0.02;
+
+    /* Invert surface hierarchy for dark backgrounds */
+    --base: oklch(22% calc(var(--surface-saturation) * 0.9) var(--accent-h));
+    --bedrock: oklch(95% calc(var(--surface-saturation) * 0.7) var(--accent-h));
+
+    --surface-muted: oklch(20% calc(var(--surface-saturation) * 0.5) var(--accent-h));
+    --surface-subtle: oklch(21% calc(var(--surface-saturation) * 0.7) var(--accent-h));
+    --surface: oklch(25% var(--surface-saturation) var(--accent-h));
+    --surface-overt: oklch(30% calc(var(--surface-saturation) * 1.2) var(--accent-h));
+
+    /* Adjust text for dark backgrounds */
+    --text-muted: oklch(65% calc(var(--surface-saturation) * 1.2) var(--accent-h));
+    --text-subtle: oklch(75% calc(var(--surface-saturation) * 1.0) var(--accent-h));
+    --text: oklch(88% calc(var(--surface-saturation) * 0.8) var(--accent-h));
+    --text-overt: oklch(95% calc(var(--surface-saturation) * 0.6) var(--accent-h));
+
+    /* Dark mode semantic colors */
+    --success: oklch(65% 0.15 var(--success-h));
+    --warning: oklch(75% 0.15 var(--warning-h));
+    --error: oklch(70% 0.2 var(--error-h));
+    --info: oklch(75% 0.15 var(--info-h));
+  }
+}
+
+/* ============================================ */
+/* HIGH CONTRAST MODE SUPPORT                 */
+/* ============================================ */
+
+@media (prefers-contrast: high) {
+  :root {
+    --contrast-factor: 1.3;
+    --outline-width: 2px;
+    --outline-width-thick: 3px;
+
+    /* Enhanced contrasts */
+    --text-subtle: oklch(30% 0.03 var(--accent-h));
+    --text-muted: oklch(25% 0.02 var(--accent-h));
+    --outline-focus: oklch(50% 0.3 var(--accent-h));
+    --outline: oklch(from var(--base) calc(l - 0.08) calc(c + var(--surface-saturation) * 2) h);
+  }
+
+  /* High contrast form elements */
+  input, select, textarea, button {
+    border-width: var(--outline-width-thick) !important;
+  }
+}
+
+/* ============================================ */
+/* USAGE EXAMPLES                              */
+/* ============================================ */
+
+/*
+Basic Usage:
+
+<main class="bg-base text-on-base">
+  <header class="bg-bedrock text-on-bedrock">
+    <h1 class="text-overt">Title</h1>
+    <p class="text-subtle">Subtitle</p>
+  </header>
+
+  <section class="bg-surface text-on-surface">
+    <h2 class="text-overt">Section Title</h2>
+    <p class="text">Main content with <a href="#" class="text-link">links</a></p>
+    <div class="bg-surface-subtle text-on-surface-subtle">
+      <p class="text-subtle">Secondary content</p>
+    </div>
+  </section>
+
+  <button class="button-primary">Primary Action</button>
+  <button class="button-outline">Secondary Action</button>
+  <button class="button-text">Text Button</button>
+</main>
+
+Customization:
+
+:root {
+  --accent-h: 45;     /* Yellow theme */
+  --accent-c: 0.14;   /* Moderate saturation */
+  --accent-l: 65%;    /* Good lightness */
+  --surface-saturation: 0.012;  /* Subtle surfaces */
+  --contrast-factor: 1.2;       /* Higher contrast */
+}
+*/