css-tags 0.1.0

package/core/theme.css

@@ -0,0 +1,608 @@
+/**
+ * Improved Theme System
+ * ======================
+ *
+ * Merges the best of the original framework theme system with the theme generator.
+ * Features OKLCH auto-contrast, comprehensive utilities, and simplified customization.
+ */
+
+@property --highlight-bg-subtle { syntax: '<color>'; }
+@property --highlight-bg-overt { syntax: '<color>'; }
+
+/* ============================================ */
+/* LIGHT MODE THEME                            */
+/* ============================================ */
+
+:root {
+  /* ============================================ */
+  /* CUSTOMIZATION VARIABLES - Easy to modify   */
+  /* ============================================ */
+
+  /* Core Brand Color (OKLCH) */
+  --accent-h: 280;           /* Hue (0-360°) */
+  --accent-c: 0.15;          /* Chroma (0-1) */
+  --accent-l: 60%;           /* Lightness (0-100%) */
+
+  /* Theme Configuration */
+  --surface-saturation: 0.015;  /* Surface chroma multiplier */
+  --surface-c: var(--surface-saturation); /* Legacy alias */
+  --contrast-factor: 1.0;       /* Overall contrast multiplier */
+  --border-width: 1px;          /* Default border width */
+  --border-width-thick: 2px;    /* Thick border width */
+
+  /* Border Radius Scale */
+  --radius-factor: 1;
+  --border-radius-sm: calc(3px * var(--radius-factor));
+  --border-radius-md: calc(6px * var(--radius-factor));
+  --border-radius-lg: calc(8px * var(--radius-factor));
+  --border-radius-xl: calc(12px * var(--radius-factor));
+  --border-radius-full: 9999px;
+
+  /* Preferred short aliases used by components and application themes. */
+  --radius-xs: calc(2px * var(--radius-factor));
+  --radius-sm: var(--border-radius-sm);
+  --radius-md: var(--border-radius-md);
+  --radius-lg: var(--border-radius-lg);
+  --radius-xl: var(--border-radius-xl);
+  --radius-full: var(--border-radius-full);
+
+  /* Color Relationships */
+  --secondary-hue-shift: 60;    /* Degrees for secondary (+60° = complementary) */
+  --tertiary-hue-shift: -90;    /* Degrees for tertiary (-90° = triadic) */
+
+  /* ============================================ */
+  /* DERIVED COLORS - Auto-generated            */
+  /* ============================================ */
+
+  /* Secondary & Tertiary Hues */
+  /* OKLCH hue wraps naturally, so plain calc() is a wider-supported fallback
+     than relying on CSS round/mod syntax here. */
+  --secondary-h: calc(var(--accent-h) + var(--secondary-hue-shift));
+  --tertiary-h: calc(var(--accent-h) + var(--tertiary-hue-shift));
+  --neutral-h: var(--accent-h);
+
+  /* Feedback Hues */
+  --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(--neutral-h));
+   --bedrock: oklch(8% calc(var(--surface-saturation) * 1.2) var(--neutral-h));
+
+  /* Surface Hierarchy */
+  --surface-muted: oklch(95% calc(var(--surface-saturation) * 0.8) var(--neutral-h));
+  --surface-subtle: oklch(96% calc(var(--surface-saturation) * 1.05) var(--neutral-h));
+  --surface: oklch(94% calc(var(--surface-saturation) * 1.2) var(--neutral-h));
+  --surface-overt: oklch(77.5% calc(var(--surface-saturation) * 2.25) var(--neutral-h));
+  --surface-default: var(--surface);
+  --surface-overt-dark: var(--surface-overt);
+
+  /* ============================================ */
+  /* TEXT COLORS - Auto-contrast calculation     */
+  /* ============================================ */
+
+   /* Base text colors */
+   --text-muted: oklch(45% calc(var(--surface-saturation) * 1.5 * var(--contrast-factor)) var(--neutral-h));
+   --text-subtle: oklch(35% calc(var(--surface-saturation) * 1.8 * var(--contrast-factor)) var(--neutral-h));
+   --text: oklch(20% calc(var(--surface-saturation) * 2 * var(--contrast-factor)) var(--neutral-h));
+   --text-overt: oklch(10% calc(var(--surface-saturation) * 2.2 * var(--contrast-factor)) var(--neutral-h));
+   --text-default: var(--text); /* Alias for default body text */
+
+   /* Auto-contrast text on surfaces (simplified for better browser support) */
+   --text-on-base: oklch(15% 0.02 var(--neutral-h)); /* Dark text on light base */
+   --text-on-bedrock: oklch(98% 0.01 var(--neutral-h)); /* Near-white text on dark bedrock */
+   --text-on-surface-muted: oklch(20% 0.02 var(--neutral-h)); /* Dark text on light surface-muted */
+   --text-on-surface-subtle: oklch(18% 0.02 var(--neutral-h)); /* Dark text on light surface-subtle */
+   --text-on-surface: oklch(15% 0.02 var(--neutral-h)); /* Dark text on light surface */
+   --text-on-surface-overt: oklch(12% 0.02 var(--neutral-h)); /* Dark text on light surface-overt */
+
+  /* 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 */
+  --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);
+  --selection-bg: color-mix(in oklch, var(--accent) 60%, var(--base) 40%);
+  --selection-color: var(--text-on-accent);
+  --highlight-search-results-bg: color-mix(in oklch, var(--accent-highlight) 72%, var(--base));
+  --highlight-search-results-color: var(--text-on-accent);
+  --highlight-search-results-decoration: underline;
+  --highlight-search-results-decoration-color: color-mix(in oklch, var(--accent) 72%, black 28%);
+
+  /* ============================================ */
+  /* 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);
+  /* Stable semantic alias consumed by form controls and components. */
+  --outline-default: var(--outline);
+  --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 & INTERACTION COLORS              */
+  /* ============================================ */
+
+   /* Selection and hover backgrounds */
+   --highlight-muted: color-mix(in oklch, var(--base) 88%, var(--accent) 12%);
+   --highlight-subtle: color-mix(in oklch, var(--base) 76%, var(--accent) 24%);
+   --highlight-overt: color-mix(in oklch, var(--base) 58%, var(--accent) 42%);
+
+   /* Background highlight variants */
+   --highlight-bg-muted: var(--highlight-muted);
+   --highlight-bg-subtle: var(--highlight-subtle);
+   --highlight-bg-overt: var(--highlight-overt);
+
+   /* Table-specific hover backgrounds */
+   --table-row-hover-bg: var(--highlight-bg-subtle);
+
+  /* Scrim */
+  --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 (dynamic auto-contrast) */
+   --text-on-accent: oklch(from var(--accent) clamp(0.1, (0.65 / l - 1) * 999, 0.98) min(c, 0.08) h);
+   --accent-on-base: var(--text-on-accent);
+   --accent-on-bedrock: var(--text-on-accent);
+   --accent-on-surface: var(--text-on-accent);
+
+  /* ============================================ */
+  /* SECONDARY & TERTIARY SYSTEMS                */
+  /* ============================================ */
+
+  /* Secondary colors */
+  --secondary: oklch(from var(--accent) l c calc(h + var(--secondary-hue-shift)));
+  --text-on-secondary: oklch(from var(--secondary) clamp(0.1, (0.65 / l - 1) * 999, 0.98) min(c, 0.08) 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);
+  --secondary-highlight: oklch(from var(--secondary) calc(l + 0.5) calc(c - 0.2) h);
+
+  /* Tertiary colors */
+  --tertiary: oklch(from var(--accent) l c calc(h + var(--tertiary-hue-shift)));
+  --text-on-tertiary: oklch(from var(--tertiary) clamp(0.1, (0.65 / l - 1) * 999, 0.98) min(c, 0.08) 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);
+  --tertiary-highlight: oklch(from var(--tertiary) calc(l + 0.5) calc(c - 0.2) 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);
+  --text-on-success: oklch(from var(--success) clamp(0.1, (0.65 / l - 1) * 999, 0.98) min(c, 0.08) h);
+  --text-on-warning: oklch(from var(--warning) clamp(0.1, (0.65 / l - 1) * 999, 0.98) min(c, 0.08) h);
+  --text-on-error: oklch(from var(--error) clamp(0.1, (0.65 / l - 1) * 999, 0.98) min(c, 0.08) h);
+  --text-on-info: oklch(from var(--info) clamp(0.1, (0.65 / l - 1) * 999, 0.98) min(c, 0.08) h);
+
+  /* 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);
+  --success-highlight: oklch(from var(--success) calc(l + 0.5) calc(c - 0.2) h);
+  --warning-highlight: oklch(from var(--warning) calc(l + 0.5) calc(c - 0.2) h);
+  --error-highlight: oklch(from var(--error) calc(l + 0.5) calc(c - 0.2) h);
+  --info-highlight: oklch(from var(--info) calc(l + 0.5) calc(c - 0.2) h);
+
+  /* ============================================ */
+  /* LEGACY FRAMEWORK COMPATIBILITY              */
+  /* ============================================ */
+
+  /* Map to original framework variables for compatibility */
+  --theme-primary: var(--accent);
+  --theme-secondary: var(--secondary);
+  --theme-bg: var(--base);
+  --theme-surface: var(--surface);
+  --theme-surface-subtle: var(--surface-subtle);
+  --theme-text: var(--text);
+  --theme-text-muted: var(--text-muted);
+  --theme-outline: var(--outline);
+  --theme-outline-focus: var(--outline-focus);
+  --theme-success: var(--success);
+  --theme-warning: var(--warning);
+  --theme-error: var(--error);
+  --theme-info: var(--info);
+
+  /* Enhanced focus state variables */
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+  --focus-ring-color: var(--outline-focus);
+  --focus-ring-style: solid;
+
+  /* Form element specific focus states */
+  --input-focus-ring-width: var(--focus-ring-width);
+  --input-focus-ring-offset: 0px;
+  --input-focus-bg: transparent;
+  --input-hover-border-color: var(--outline-overt);
+
+  /* Enhanced link styling variables */
+  --link-decoration: none;
+  --link-decoration-hover: underline;
+  --link-underline-thickness: 1.5px;
+  --link-underline-offset: 0.15em;
+  --link-transition-duration: 150ms;
+  --link-transition-timing: ease-out;
+
+   /* Container query configuration */
+   --cq-type: inline-size;
+   --cq-name: default;
+
+   /* Anchor positioning configuration */
+   @property --anchor-offset {
+     syntax: '<length>';
+     initial-value: 0.5rem;
+     inherits: false;
+   }
+   @property --anchor-max-width {
+     syntax: '<length>';
+     initial-value: 20rem;
+     inherits: false;
+   }
+   @property --anchor-z-index {
+     syntax: '<number>';
+     initial-value: 1000;
+     inherits: false;
+   }
+
+  /* Typography (from tokens) */
+  --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;
+
+  accent-color: var(--accent);
+}
+
+::selection {
+  background-color: var(--selection-bg, var(--accent-highlight));
+  color: var(--selection-color, var(--text-on-accent));
+}
+
+::-moz-selection {
+  background-color: var(--selection-bg, var(--accent-highlight));
+  color: var(--selection-color, var(--text-on-accent));
+}
+
+::highlight(search-results) {
+  background-color: var(--highlight-search-results-bg, var(--accent-highlight));
+  color: var(--highlight-search-results-color, var(--text-on-accent));
+  text-decoration: var(--highlight-search-results-decoration, underline);
+  text-decoration-color: var(--highlight-search-results-decoration-color, currentColor);
+}
+
+::highlight(current-search-result) {
+  background-color: var(--accent);
+  color: var(--text-on-accent);
+  text-decoration: var(--highlight-search-results-decoration, underline);
+  text-decoration-color: var(--highlight-search-results-decoration-color, currentColor);
+}
+
+/* ============================================ */
+/* DARK MODE THEME                             */
+/* ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-color-scheme="light"]) {
+    /* 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(--neutral-h));
+     --bedrock: oklch(98% calc(var(--surface-saturation) * 0.7) var(--neutral-h));
+
+      --surface-muted: oklch(20% calc(var(--surface-saturation) * 0.5) var(--neutral-h));
+      --surface-subtle: oklch(21% calc(var(--surface-saturation) * 0.7) var(--neutral-h));
+      --surface: oklch(25% var(--surface-saturation) var(--neutral-h));
+      --surface-overt: oklch(30% calc(var(--surface-saturation) * 1.2) var(--neutral-h));
+      --surface-c: var(--surface-saturation); /* Legacy alias */
+      --surface-default: var(--surface);
+      --surface-overt-dark: var(--surface-overt);
+
+      /* Adjust text for dark backgrounds */
+      --text-muted: oklch(65% calc(var(--surface-saturation) * 1.2) var(--neutral-h));
+      --text-subtle: oklch(75% calc(var(--surface-saturation) * 1.0) var(--neutral-h));
+      --text: oklch(88% calc(var(--surface-saturation) * 0.8) var(--neutral-h));
+      --text-overt: oklch(95% calc(var(--surface-saturation) * 0.6) var(--neutral-h));
+      --text-default: var(--text); /* Alias for default body text */
+
+     /* Auto-contrast text on surfaces for dark mode */
+     --text-on-base: oklch(90% 0.02 var(--neutral-h)); /* Light text on dark base */
+     --text-on-bedrock: oklch(5% 0.01 var(--neutral-h)); /* Near-black text on light bedrock */
+     --text-on-surface-muted: oklch(85% 0.02 var(--neutral-h)); /* Light text on dark surface-muted */
+     --text-on-surface-subtle: oklch(87% 0.02 var(--neutral-h)); /* Light text on dark surface-subtle */
+     --text-on-surface: oklch(90% 0.02 var(--neutral-h)); /* Light text on dark surface */
+     --text-on-surface-overt: oklch(92% 0.02 var(--neutral-h)); /* Light text on dark surface-overt */
+
+    /* Accent text on surfaces for dark mode (handled by auto-contrast) */
+    }
+}
+
+/* ============================================ */
+/* HIGH CONTRAST MODE                          */
+/* ============================================ */
+
+@media (prefers-contrast: high) {
+  :root {
+    --contrast-factor: 1.3;
+    --border-width: 2px;
+    --border-width-thick: 3px;
+
+    /* Enhanced contrasts */
+    --text-subtle: oklch(30% 0.03 var(--neutral-h));
+    --text-muted: oklch(25% 0.02 var(--neutral-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(--border-width-thick) !important;
+  }
+}
+
+/* Allow applications to override the operating-system preference explicitly.
+ * Removing the attribute restores automatic mode. */
+:root[data-color-scheme="dark"] {
+  --accent-l: 70%;
+  --accent-c: 0.18;
+  --surface-saturation: 0.02;
+
+  --base: oklch(22% calc(var(--surface-saturation) * 0.9) var(--neutral-h));
+  --bedrock: oklch(98% calc(var(--surface-saturation) * 0.7) var(--neutral-h));
+  --surface-muted: oklch(20% calc(var(--surface-saturation) * 0.5) var(--neutral-h));
+  --surface-subtle: oklch(21% calc(var(--surface-saturation) * 0.7) var(--neutral-h));
+  --surface: oklch(25% var(--surface-saturation) var(--neutral-h));
+  --surface-overt: oklch(30% calc(var(--surface-saturation) * 1.2) var(--neutral-h));
+  --surface-c: var(--surface-saturation);
+  --surface-default: var(--surface);
+  --surface-overt-dark: var(--surface-overt);
+
+  --text-muted: oklch(65% calc(var(--surface-saturation) * 1.2) var(--neutral-h));
+  --text-subtle: oklch(75% calc(var(--surface-saturation) * 1) var(--neutral-h));
+  --text: oklch(88% calc(var(--surface-saturation) * 0.8) var(--neutral-h));
+  --text-overt: oklch(95% calc(var(--surface-saturation) * 0.6) var(--neutral-h));
+  --text-default: var(--text);
+  --text-on-base: oklch(90% 0.02 var(--neutral-h));
+  --text-on-bedrock: oklch(5% 0.01 var(--neutral-h));
+  --text-on-surface-muted: oklch(85% 0.02 var(--neutral-h));
+  --text-on-surface-subtle: oklch(87% 0.02 var(--neutral-h));
+  --text-on-surface: oklch(90% 0.02 var(--neutral-h));
+  --text-on-surface-overt: oklch(92% 0.02 var(--neutral-h));
+}
+
+/* ============================================ */
+/* BRAND THEME OVERRIDES                       */
+/* ============================================ */
+
+:root[data-theme="ocean"] {
+  --accent-h: 200; --accent-c: 0.16; --accent-l: 60%;
+  --secondary-hue-shift: 40; --tertiary-hue-shift: -80;
+}
+
+:root[data-theme="sunrise"] {
+  --accent-h: 30; --accent-c: 0.18; --accent-l: 62%;
+  --secondary-hue-shift: 60; --tertiary-hue-shift: -90;
+}
+
+:root[data-theme="forest"] {
+  --accent-h: 145; --accent-c: 0.16; --accent-l: 58%;
+  --secondary-hue-shift: 50; --tertiary-hue-shift: -100;
+}
+
+/* Dark mode brand adjustments */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-color-scheme="light"])[data-theme="ocean"] {
+    --accent-c: 0.20; --accent-l: 70%;
+  }
+  :root:not([data-color-scheme="light"])[data-theme="sunrise"] {
+    --accent-c: 0.22; --accent-l: 72%;
+  }
+  :root:not([data-color-scheme="light"])[data-theme="forest"] {
+    --accent-c: 0.18; --accent-l: 68%;
+  }
+}
+
+/* ============================================ */
+/* AUTO-CONTEXT STYLING                         */
+/* ============================================ */
+
+/* Automatic text color based on surface */
+:where(.bg-base) .text,
+:where(.bg-base) .text-muted,
+:where(.bg-base) .text-subtle,
+:where(.bg-base) .text-overt,
+:where(.bg-base) .text-link,
+:where(.bg-base) p,
+:where(.bg-base) span,
+:where(.bg-base) h1,
+:where(.bg-base) h2,
+:where(.bg-base) h3,
+:where(.bg-base) h4,
+:where(.bg-base) h5,
+:where(.bg-base) h6,
+:where(.bg-base) strong,
+:where(.bg-base) em,
+:where(.bg-base) a { color: var(--text-on-base); }
+
+:where(.bg-bedrock) .text,
+:where(.bg-bedrock) .text-muted,
+:where(.bg-bedrock) .text-subtle,
+:where(.bg-bedrock) .text-overt,
+:where(.bg-bedrock) .text-link,
+:where(.bg-bedrock) p,
+:where(.bg-bedrock) span,
+:where(.bg-bedrock) h1,
+:where(.bg-bedrock) h2,
+:where(.bg-bedrock) h3,
+:where(.bg-bedrock) h4,
+:where(.bg-bedrock) h5,
+:where(.bg-bedrock) h6,
+:where(.bg-bedrock) strong,
+:where(.bg-bedrock) em,
+:where(.bg-bedrock) a { color: var(--text-on-bedrock); }
+
+:where(.bg-surface) .text,
+:where(.bg-surface) .text-muted,
+:where(.bg-surface) .text-subtle,
+:where(.bg-surface) .text-overt,
+:where(.bg-surface) .text-link,
+:where(.bg-surface) p,
+:where(.bg-surface) span,
+:where(.bg-surface) h1,
+:where(.bg-surface) h2,
+:where(.bg-surface) h3,
+:where(.bg-surface) h4,
+:where(.bg-surface) h5,
+:where(.bg-surface) h6,
+:where(.bg-surface) strong,
+:where(.bg-surface) em,
+:where(.bg-surface) a { color: var(--text-on-surface); }
+
+:where(.bg-surface-muted) .text,
+:where(.bg-surface-muted) .text-muted,
+:where(.bg-surface-muted) .text-subtle,
+:where(.bg-surface-muted) .text-overt,
+:where(.bg-surface-muted) .text-link,
+:where(.bg-surface-muted) p,
+:where(.bg-surface-muted) span,
+:where(.bg-surface-muted) h1,
+:where(.bg-surface-muted) h2,
+:where(.bg-surface-muted) h3,
+:where(.bg-surface-muted) h4,
+:where(.bg-surface-muted) h5,
+:where(.bg-surface-muted) h6,
+:where(.bg-surface-muted) strong,
+:where(.bg-surface-muted) em,
+:where(.bg-surface-muted) a { color: var(--text-on-surface-muted); }
+
+:where(.bg-surface-subtle) .text,
+:where(.bg-surface-subtle) .text-muted,
+:where(.bg-surface-subtle) .text-subtle,
+:where(.bg-surface-subtle) .text-overt,
+:where(.bg-surface-subtle) .text-link,
+:where(.bg-surface-subtle) p,
+:where(.bg-surface-subtle) span,
+:where(.bg-surface-subtle) h1,
+:where(.bg-surface-subtle) h2,
+:where(.bg-surface-subtle) h3,
+:where(.bg-surface-subtle) h4,
+:where(.bg-surface-subtle) h5,
+:where(.bg-surface-subtle) h6,
+:where(.bg-surface-subtle) strong,
+:where(.bg-surface-subtle) em,
+:where(.bg-surface-subtle) a { color: var(--text-on-surface-subtle); }
+
+:where(.bg-surface-overt) .text,
+:where(.bg-surface-overt) .text-muted,
+:where(.bg-surface-overt) .text-subtle,
+:where(.bg-surface-overt) .text-overt,
+:where(.bg-surface-overt) .text-link,
+:where(.bg-surface-overt) p,
+:where(.bg-surface-overt) span,
+:where(.bg-surface-overt) h1,
+:where(.bg-surface-overt) h2,
+:where(.bg-surface-overt) h3,
+:where(.bg-surface-overt) h4,
+:where(.bg-surface-overt) h5,
+:where(.bg-surface-overt) h6,
+:where(.bg-surface-overt) strong,
+:where(.bg-surface-overt) em,
+:where(.bg-surface-overt) a { color: var(--text-on-surface-overt); }
+
+/* Automatic accent text on surfaces */
+.bg-accent .text-accent { color: var(--accent-on-base); }
+.bg-surface .text-accent { color: var(--accent-on-surface); }
+
+/* Automatic button styling based on context */
+.bg-base .button {
+  background-color: var(--surface);
+  color: var(--text-on-surface);
+}
+.bg-bedrock .button {
+  background-color: var(--surface);
+  color: var(--text-on-surface);
+}
+.bg-surface .button {
+  background-color: var(--surface);
+  color: var(--text-on-surface);
+}
+.bg-surface-muted .button {
+  background-color: var(--surface);
+  color: var(--text-on-surface);
+}
+.bg-surface-subtle .button {
+  background-color: var(--surface);
+  color: var(--text-on-surface);
+}
+.bg-surface-overt .button {
+  background-color: var(--surface);
+  color: var(--text-on-surface);
+}
+.bg-accent .button {
+  background-color: var(--surface);
+  color: var(--text-on-surface);
+}
+.bg-accent .button-primary {
+  background-color: var(--base);
+  color: var(--text-on-base);
+}
+
+.bg-accent .button-primary {
+  background-color: var(--accent);
+  color: var(--accent-on-base);
+}
+
+:root[data-color-scheme="dark"][data-theme="ocean"] {
+  --accent-c: 0.20; --accent-l: 70%;
+}
+
+:root[data-color-scheme="dark"][data-theme="sunrise"] {
+  --accent-c: 0.22; --accent-l: 72%;
+}
+
+:root[data-color-scheme="dark"][data-theme="forest"] {
+  --accent-c: 0.18; --accent-l: 68%;
+}