decantr 0.9.0

package/src/css/index.js

@@ -0,0 +1,265 @@
+import { resolveAtomDecl } from './atoms.js';
+import { inject, injectResponsive, injectResponsivePseudo, injectContainer, injectGroupPeer, injectPseudo, BREAKPOINTS, CQ_WIDTHS } from './runtime.js';
+export { extractCSS, reset, BREAKPOINTS, CQ_WIDTHS } from './runtime.js';
+export {
+  setTheme, getTheme, getThemeMeta, registerTheme, getThemeList,
+  getActiveCSS, resetStyles, setAnimations, getAnimations,
+  setStyle, getStyle, getStyleList, registerStyle, mergePluginStyles,
+  setMode, getMode, getResolvedMode, onModeChange,
+  setShape, getShape, getShapeList,
+  setColorblindMode, getColorblindMode
+} from './theme-registry.js';
+
+/** @type {Map<string, string>} */
+const customAtoms = new Map();
+
+/** Regex to detect responsive prefix: _sm:, _md:, _lg:, _xl: */
+const BP_RE = /^_(sm|md|lg|xl):(.+)$/;
+
+/** Regex to detect container query prefix: _cq320:, _cq480:, _cq640:, _cq768:, _cq1024: */
+const CQ_RE = /^_cq(\d+):(.+)$/;
+
+/** Regex to detect group/peer state prefix: _gh:, _gf:, _ga:, _ph:, _pf:, _pa: */
+const GP_RE = /^_(gh|gf|ga|ph|pf|pa):(.+)$/;
+
+/** Regex to detect pseudo-class prefix: _h:, _f:, _fv:, _a:, _fw: */
+const PSEUDO_RE = /^_(h|f|fv|a|fw):(.+)$/;
+
+/** Valid pseudo-class prefixes */
+const PSEUDO_SET = new Set(['h', 'f', 'fv', 'a', 'fw']);
+
+/** Regex to detect opacity modifier: _bgprimary/50, _fgaccent/30 */
+const ALPHA_RE = /^(_[a-zA-Z0-9]+)\/(\d+)$/;
+
+/** Regex to detect arbitrary value: _w[512px], _bg[#1a1d24] */
+const ARB_RE = /^_([a-zA-Z]+)\[([^\]]+)\]$/;
+
+/** Valid container query widths as a Set for fast lookup */
+const CQ_SET = new Set(CQ_WIDTHS);
+
+/** Valid group/peer prefixes */
+const GP_SET = new Set(['gh', 'gf', 'ga', 'ph', 'pf', 'pa']);
+
+/** Property prefix map for arbitrary values */
+const ARB_PROPS = {
+  w: 'width', h: 'height', mw: 'max-width', mh: 'max-height',
+  minw: 'min-width', minh: 'min-height',
+  p: 'padding', pt: 'padding-top', pr: 'padding-right', pb: 'padding-bottom', pl: 'padding-left',
+  px: 'padding-inline', py: 'padding-block',
+  m: 'margin', mt: 'margin-top', mr: 'margin-right', mb: 'margin-bottom', ml: 'margin-left',
+  mx: 'margin-inline', my: 'margin-block',
+  gap: 'gap', gx: 'column-gap', gy: 'row-gap',
+  t: 'font-size', fs: 'font-size', lh: 'line-height', fw: 'font-weight', ls: 'letter-spacing',
+  r: 'border-radius', bg: 'background', fg: 'color', bc: 'border-color',
+  bw: 'border-width', bt: 'border-top', bb: 'border-bottom', br: 'border-right', bl: 'border-left',
+  z: 'z-index', op: 'opacity',
+  top: 'top', right: 'right', bottom: 'bottom', left: 'left', inset: 'inset',
+  shadow: 'box-shadow', bf: 'backdrop-filter',
+  outline: 'outline', trans: 'transition', object: 'object-fit',
+};
+
+/**
+ * Resolve an atom name to its CSS declaration.
+ * Handles: standard atoms, opacity modifiers (/N), and arbitrary values ([val]).
+ * @param {string} atomPart — e.g. '_p4', '_bgprimary/50', '_w[512px]'
+ * @returns {{ className: string, decl: string }|null}
+ */
+function resolveAtom(atomPart) {
+  // 1. Custom atoms first (user-defined via define())
+  const custom = customAtoms.get(atomPart);
+  if (custom) return { className: atomPart, decl: custom };
+
+  // 2. Algorithmic resolution (handles aliases, direct, patterns, residual)
+  const decl = resolveAtomDecl(atomPart);
+  if (decl) return { className: atomPart, decl };
+
+  // 3. Opacity modifier: _bgprimary/50
+  const alphaMatch = atomPart.match(ALPHA_RE);
+  if (alphaMatch) {
+    const [, base, alphaStr] = alphaMatch;
+    const baseDecl = customAtoms.get(base) || resolveAtomDecl(base);
+    if (baseDecl) {
+      const alpha = Number(alphaStr);
+      if (alpha >= 0 && alpha <= 100) {
+        // Extract property:var(--d-*) pattern for color-mix
+        const colorMatch = baseDecl.match(/^(background|color|border-color):(var\(--[^)]+\))$/);
+        if (colorMatch) {
+          const [, prop, varRef] = colorMatch;
+          return {
+            className: atomPart,
+            decl: `${prop}:color-mix(in srgb,${varRef} ${alpha}%,transparent)`,
+          };
+        }
+      }
+    }
+    return null;
+  }
+
+  // 3. Arbitrary value: _w[512px]
+  const arbMatch = atomPart.match(ARB_RE);
+  if (arbMatch) {
+    const [, propPrefix, rawValue] = arbMatch;
+    const cssProp = ARB_PROPS[propPrefix] || ARB_PROPS[propPrefix.toLowerCase()];
+    if (cssProp) {
+      // Convert underscores to spaces in value (e.g., 0_4px_6px → 0 4px 6px)
+      const value = rawValue.replace(/_/g, ' ');
+      return { className: atomPart, decl: `${cssProp}:${value}` };
+    }
+    return null;
+  }
+
+  // Dev-mode warning for unresolved atoms (atoms start with _)
+  if (atomPart.startsWith('_') && typeof globalThis !== 'undefined' && globalThis.__DECANTR_DEV__) {
+    console.warn(`[decantr] Unknown atom: "${atomPart}" — no CSS will be generated. Check reference/atoms.md`);
+  }
+
+  return null;
+}
+
+/**
+ * Escape special characters in a CSS class name for use in selectors.
+ * @param {string} cls
+ * @returns {string}
+ */
+function escapeClass(cls) {
+  return cls.replace(/:/g, '\\:').replace(/\//g, '\\/').replace(/\[/g, '\\[').replace(/\]/g, '\\]').replace(/#/g, '\\#').replace(/%/g, '\\%').replace(/\(/g, '\\(').replace(/\)/g, '\\)').replace(/,/g, '\\,').replace(/\+/g, '\\+');
+}
+
+/**
+ * @param {...string} classes
+ * @returns {string}
+ */
+export function css(...classes) {
+  const result = [];
+  for (let i = 0; i < classes.length; i++) {
+    const cls = classes[i];
+    if (!cls) continue;
+    // Support space-separated classes in a single string
+    const parts = cls.split(/\s+/);
+    for (const part of parts) {
+      if (!part) continue;
+
+      // Special handling: _group → d-group, _peer → d-peer
+      if (part === '_group') { result.push('d-group'); continue; }
+      if (part === '_peer') { result.push('d-peer'); continue; }
+      // Component-class atoms: _prose → d-prose, _divideY → d-divide-y, _divideX → d-divide-x
+      if (part === '_prose') { result.push('d-prose'); continue; }
+      if (part === '_divideY') { result.push('d-divide-y'); continue; }
+      if (part === '_divideX') { result.push('d-divide-x'); continue; }
+
+      // Check for responsive prefix: _sm:gc3 → atom _gc3 at breakpoint sm
+      const bpMatch = part.match(BP_RE);
+      if (bpMatch) {
+        const [, bp, innerAtom] = bpMatch;
+        // The inner atom may itself be a group/peer, opacity, or arbitrary
+        const gpInner = innerAtom.match(/^(gh|gf|ga|ph|pf|pa):(.+)$/);
+        if (gpInner) {
+          // Responsive + group/peer: not supported (too complex), pass through
+          result.push(part);
+          continue;
+        }
+        // Check for responsive + pseudo: _sm:h:bgmuted
+        const pseudoInner = innerAtom.match(/^(h|f|fv|a|fw):(.+)$/);
+        if (pseudoInner) {
+          const [, pseudoPrefix, atomName] = pseudoInner;
+          const resolved = resolveAtom(`_${atomName}`);
+          if (resolved) {
+            const PSEUDO_NAMES = { h: 'hover', f: 'focus', fv: 'focus-visible', a: 'active', fw: 'focus-within' };
+            injectResponsivePseudo(part, resolved.decl, bp, PSEUDO_NAMES[pseudoPrefix]);
+            result.push(part);
+          } else {
+            result.push(part);
+          }
+          continue;
+        }
+        const resolved = resolveAtom(`_${innerAtom}`);
+        if (resolved) {
+          injectResponsive(part, resolved.decl, bp);
+          result.push(part);
+        } else {
+          result.push(part);
+        }
+        continue;
+      }
+
+      // Check for container query prefix: _cq640:gc3
+      const cqMatch = part.match(CQ_RE);
+      if (cqMatch) {
+        const width = Number(cqMatch[1]);
+        const innerAtom = cqMatch[2];
+        if (CQ_SET.has(width)) {
+          const resolved = resolveAtom(`_${innerAtom}`);
+          if (resolved) {
+            injectContainer(part, resolved.decl, width);
+            result.push(part);
+          } else {
+            result.push(part);
+          }
+        } else {
+          result.push(part);
+        }
+        continue;
+      }
+
+      // Check for group/peer state prefix: _gh:fgprimary
+      const gpMatch = part.match(GP_RE);
+      if (gpMatch) {
+        const [, prefix, atomName] = gpMatch;
+        const resolved = resolveAtom(`_${atomName}`);
+        if (resolved) {
+          injectGroupPeer(part, resolved.decl, prefix);
+          result.push(part);
+        } else {
+          result.push(part);
+        }
+        continue;
+      }
+
+      // Check for pseudo-class prefix: _h:bgprimary, _fv:ring2, _a:scale95
+      const pseudoMatch = part.match(PSEUDO_RE);
+      if (pseudoMatch) {
+        const [, prefix, innerAtom] = pseudoMatch;
+        const resolved = resolveAtom(`_${innerAtom}`);
+        if (resolved) {
+          injectPseudo(part, resolved.decl, prefix);
+          result.push(part);
+        } else {
+          result.push(part);
+        }
+        continue;
+      }
+
+      // Try to resolve (handles direct, opacity, and arbitrary)
+      const resolved = resolveAtom(part);
+      if (resolved) {
+        // Pass escaped class name if it contains special CSS selector characters
+        const needsEscape = /[/\[\]#%(),+]/.test(resolved.className);
+        inject(resolved.className, resolved.decl, needsEscape ? escapeClass(resolved.className) : undefined);
+        result.push(part);
+      } else {
+        // Pass through unknown classes (user CSS)
+        result.push(part);
+      }
+    }
+  }
+  return result.join(' ');
+}
+
+/**
+ * @param {string} name
+ * @param {string} declaration
+ */
+export function define(name, declaration) {
+  customAtoms.set(name, declaration);
+}
+
+/**
+ * Sanitizes a string for safe use in HTML attributes.
+ * Escapes <, >, ", ', & characters.
+ * @param {string} str
+ * @returns {string}
+ */
+export function sanitize(str) {
+  if (typeof str !== 'string') return '';
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#x27;');
+}

package/src/css/runtime.js

@@ -0,0 +1,268 @@
+/** @type {Set<string>} */
+const injected = new Set();
+
+/** @type {HTMLStyleElement|null} */
+let styleEl = null;
+
+/** @type {HTMLStyleElement|null} */
+let layerEl = null;
+
+/** Responsive breakpoints (mobile-first, min-width) */
+export const BREAKPOINTS = { sm: 640, md: 768, lg: 1024, xl: 1280 };
+const BP_ORDER = ['sm', 'md', 'lg', 'xl'];
+
+/** Container query breakpoints */
+export const CQ_WIDTHS = [320, 480, 640, 768, 1024];
+
+/** @type {Record<string, HTMLStyleElement>|null} */
+let bpEls = null;
+
+/** @type {HTMLStyleElement|null} */
+let cqEl = null;
+
+/** CSS cascade layer order declaration */
+const LAYER_ORDER = '@layer d.base,d.theme,d.atoms,d.user;';
+
+// ─── Buffered injection ─────────────────────────────────────────
+// Rules are buffered in arrays and flushed to DOM in batches via
+// microtask, avoiding O(n²) string concatenation on textContent.
+
+/** @type {string[]} */
+let atomBuffer = [];
+/** @type {Record<string, string[]>} */
+let bpBuffers = {};
+/** @type {string[]} */
+let cqBuffer = [];
+/** @type {boolean} */
+let flushScheduled = false;
+
+function scheduleFlush() {
+  if (flushScheduled) return;
+  flushScheduled = true;
+  if (typeof queueMicrotask === 'function') {
+    queueMicrotask(flushBuffers);
+  } else {
+    Promise.resolve().then(flushBuffers);
+  }
+}
+
+function flushBuffers() {
+  flushScheduled = false;
+  if (atomBuffer.length) {
+    const el = getStyleElement();
+    if (el) el.textContent = (el.textContent || '') + atomBuffer.join('');
+    atomBuffer.length = 0;
+  }
+  if (Object.keys(bpBuffers).length) {
+    const els = ensureBpElements();
+    if (els) {
+      for (const bp of BP_ORDER) {
+        if (bpBuffers[bp] && bpBuffers[bp].length) {
+          els[bp].textContent = (els[bp].textContent || '') + bpBuffers[bp].join('');
+          bpBuffers[bp].length = 0;
+        }
+      }
+    }
+    bpBuffers = {};
+  }
+  if (cqBuffer.length) {
+    const el = ensureCqElement();
+    if (el) el.textContent = (el.textContent || '') + cqBuffer.join('');
+    cqBuffer.length = 0;
+  }
+}
+
+function ensureLayerOrder() {
+  if (layerEl) return;
+  if (typeof document === 'undefined') return;
+  layerEl = document.createElement('style');
+  layerEl.setAttribute('data-decantr-layers', '');
+  layerEl.textContent = LAYER_ORDER;
+  document.head.prepend(layerEl);
+}
+
+function getStyleElement() {
+  if (!styleEl) {
+    if (typeof document === 'undefined') return null;
+    ensureLayerOrder();
+    styleEl = document.createElement('style');
+    styleEl.setAttribute('data-decantr', '');
+    document.head.appendChild(styleEl);
+  }
+  return styleEl;
+}
+
+function ensureBpElements() {
+  if (bpEls) return bpEls;
+  if (typeof document === 'undefined') return null;
+  bpEls = {};
+  getStyleElement();
+  for (const bp of BP_ORDER) {
+    const el = document.createElement('style');
+    el.setAttribute(`data-decantr-${bp}`, '');
+    document.head.appendChild(el);
+    bpEls[bp] = el;
+  }
+  return bpEls;
+}
+
+/**
+ * @param {string} className
+ * @param {string} declaration
+ * @param {string} [escapedName] — pre-escaped class name for special chars (/, [, ], etc.)
+ */
+export function inject(className, declaration, escapedName) {
+  if (injected.has(className)) return;
+  injected.add(className);
+  if (typeof document === 'undefined') return;
+  const sel = escapedName || className;
+  atomBuffer.push(`@layer d.atoms{.${sel}{${declaration}}}`);
+  scheduleFlush();
+}
+
+/**
+ * Inject a responsive (breakpoint-wrapped) atom.
+ * @param {string} className — e.g. '_sm:gc3'
+ * @param {string} declaration — CSS declaration(s)
+ * @param {string} bp — breakpoint key (sm|md|lg|xl)
+ */
+export function injectResponsive(className, declaration, bp) {
+  if (injected.has(className)) return;
+  injected.add(className);
+  if (typeof document === 'undefined') return;
+  const escaped = className.replace(/:/g, '\\:');
+  if (!bpBuffers[bp]) bpBuffers[bp] = [];
+  bpBuffers[bp].push(`@layer d.atoms{@media(min-width:${BREAKPOINTS[bp]}px){.${escaped}{${declaration}}}}`);
+  scheduleFlush();
+}
+
+function ensureCqElement() {
+  if (cqEl) return cqEl;
+  if (typeof document === 'undefined') return null;
+  getStyleElement();
+  cqEl = document.createElement('style');
+  cqEl.setAttribute('data-decantr-cq', '');
+  document.head.appendChild(cqEl);
+  return cqEl;
+}
+
+/**
+ * Inject a container query-wrapped atom.
+ * @param {string} className — e.g. '_cq640:gc3'
+ * @param {string} declaration — CSS declaration(s)
+ * @param {number} width — container min-width in px
+ */
+export function injectContainer(className, declaration, width) {
+  if (injected.has(className)) return;
+  injected.add(className);
+  if (typeof document === 'undefined') return;
+  const escaped = className.replace(/:/g, '\\:');
+  cqBuffer.push(`@layer d.atoms{@container(min-width:${width}px){.${escaped}{${declaration}}}}`);
+  scheduleFlush();
+}
+
+/** State map for group/peer prefix → CSS pseudo selector */
+const GP_STATE = {
+  gh: ['group', 'hover'], gf: ['group', 'focus-within'], ga: ['group', 'active'],
+  ph: ['peer', 'hover'], pf: ['peer', 'focus'], pa: ['peer', 'active'],
+};
+
+/**
+ * Inject a group/peer state atom.
+ * @param {string} className — e.g. '_gh:fgprimary'
+ * @param {string} declaration — CSS declaration(s)
+ * @param {string} prefix — 'gh'|'gf'|'ga'|'ph'|'pf'|'pa'
+ */
+export function injectGroupPeer(className, declaration, prefix) {
+  if (injected.has(className)) return;
+  injected.add(className);
+  if (typeof document === 'undefined') return;
+  const escaped = className.replace(/:/g, '\\:').replace(/\//g, '\\/');
+  const [kind, state] = GP_STATE[prefix];
+  const combinator = kind === 'group' ? ' ' : ' ~ ';
+  atomBuffer.push(`@layer d.atoms{.d-${kind}:${state}${combinator}.${escaped}{${declaration}}}`);
+  scheduleFlush();
+}
+
+/** Pseudo-class prefix map */
+const PSEUDO_MAP = {
+  h: 'hover', f: 'focus', fv: 'focus-visible', a: 'active', fw: 'focus-within',
+};
+
+/**
+ * Inject a pseudo-class atom.
+ * @param {string} className — e.g. '_h:bgprimary'
+ * @param {string} declaration — CSS declaration(s)
+ * @param {string} prefix — 'h'|'f'|'fv'|'a'|'fw'
+ */
+export function injectPseudo(className, declaration, prefix) {
+  if (injected.has(className)) return;
+  injected.add(className);
+  if (typeof document === 'undefined') return;
+  const escaped = className.replace(/:/g, '\\:').replace(/\//g, '\\/').replace(/\[/g, '\\[').replace(/\]/g, '\\]').replace(/#/g, '\\#').replace(/%/g, '\\%').replace(/\(/g, '\\(').replace(/\)/g, '\\)').replace(/,/g, '\\,').replace(/\+/g, '\\+');
+  const pseudo = PSEUDO_MAP[prefix];
+  atomBuffer.push(`@layer d.atoms{.${escaped}:${pseudo}{${declaration}}}`);
+  scheduleFlush();
+}
+
+/**
+ * Inject a responsive + pseudo-class atom.
+ * @param {string} className — e.g. '_sm:h:bgprimary'
+ * @param {string} declaration — CSS declaration(s)
+ * @param {string} bp — breakpoint key (sm|md|lg|xl)
+ * @param {string} pseudo — pseudo-class name (hover|focus|focus-visible|active|focus-within)
+ */
+export function injectResponsivePseudo(className, declaration, bp, pseudo) {
+  if (injected.has(className)) return;
+  injected.add(className);
+  if (typeof document === 'undefined') return;
+  const escaped = className.replace(/:/g, '\\:').replace(/\//g, '\\/').replace(/\[/g, '\\[').replace(/\]/g, '\\]').replace(/#/g, '\\#').replace(/%/g, '\\%').replace(/\(/g, '\\(').replace(/\)/g, '\\)').replace(/,/g, '\\,').replace(/\+/g, '\\+');
+  if (!bpBuffers[bp]) bpBuffers[bp] = [];
+  bpBuffers[bp].push(`@layer d.atoms{@media(min-width:${BREAKPOINTS[bp]}px){.${escaped}:${pseudo}{${declaration}}}}`);
+  scheduleFlush();
+}
+
+/**
+ * @returns {string}
+ */
+export function extractCSS() {
+  flushBuffers();
+  let css = layerEl ? layerEl.textContent || '' : '';
+  css += styleEl ? styleEl.textContent || '' : '';
+  if (bpEls) {
+    for (const bp of BP_ORDER) {
+      if (bpEls[bp]) css += bpEls[bp].textContent || '';
+    }
+  }
+  if (cqEl) css += cqEl.textContent || '';
+  return css;
+}
+
+/**
+ * @returns {Set<string>}
+ */
+export function getInjectedClasses() {
+  return new Set(injected);
+}
+
+export function reset() {
+  injected.clear();
+  atomBuffer.length = 0;
+  bpBuffers = {};
+  cqBuffer.length = 0;
+  flushScheduled = false;
+  if (layerEl) {
+    layerEl.textContent = LAYER_ORDER;
+  }
+  if (styleEl) {
+    styleEl.textContent = '';
+  }
+  if (bpEls) {
+    for (const bp of BP_ORDER) {
+      if (bpEls[bp]) bpEls[bp].textContent = '';
+    }
+  }
+  if (cqEl) {
+    cqEl.textContent = '';
+  }
+}

package/src/css/styles/addons/bioluminescent.js

@@ -0,0 +1,93 @@
+/**
+ * Bioluminescent — Deep ocean aesthetic. Organic glow.
+ * Luminescent edges on dark backgrounds, living and breathing UI.
+ * Glowing borders, pulsing animations, deep abyss backgrounds.
+ */
+export const bioluminescent = {
+  id: 'bioluminescent',
+  name: 'Bioluminescent',
+  seed: {
+    primary: '#00ffd5',
+    accent: '#7b61ff',
+    tertiary: '#ff6b9d',
+    neutral: '#6b8299',
+    success: '#00e676',
+    warning: '#ffab40',
+    error: '#ff5252',
+    info: '#40c4ff',
+    bg: '#f0fdf4',
+    bgDark: '#020817',
+  },
+  personality: {
+    radius: 'pill',
+    elevation: 'glow',
+    motion: 'smooth',
+    borders: 'none',
+    density: 'comfortable',
+    gradient: 'vivid',
+  },
+  typography: {
+    '--d-fw-heading': '500',
+    '--d-fw-title': '400',
+    '--d-ls-heading': '0.03em',
+  },
+  overrides: {
+    light: {
+      '--d-border': 'rgba(0,255,213,0.12)',
+      '--d-border-strong': 'rgba(0,255,213,0.22)',
+      '--d-field-bg': 'rgba(255,255,255,0.6)',
+      '--d-field-border': 'rgba(0,255,213,0.15)',
+      '--d-field-border-hover': 'rgba(0,255,213,0.3)',
+      '--d-item-hover-bg': 'rgba(0,255,213,0.06)',
+    },
+    dark: {
+      '--d-bg': '#020817',
+      '--d-fg': '#c8e6df',
+      '--d-muted-fg': '#5a8a7d',
+      '--d-border': 'rgba(0,255,213,0.1)',
+      '--d-border-strong': 'rgba(0,255,213,0.2)',
+      '--d-field-bg': 'rgba(0,255,213,0.04)',
+      '--d-field-border': 'rgba(0,255,213,0.12)',
+      '--d-field-border-hover': 'rgba(0,255,213,0.25)',
+      '--d-item-hover-bg': 'rgba(0,255,213,0.06)',
+      '--d-chart-0': '#00ffd5',
+      '--d-chart-1': '#7b61ff',
+      '--d-chart-2': '#ff6b9d',
+      '--d-chart-3': '#00e676',
+      '--d-chart-4': '#ffab40',
+      '--d-chart-5': '#40c4ff',
+      '--d-chart-6': '#e040fb',
+      '--d-chart-7': '#76ff03',
+    },
+  },
+  components: [
+    'body{font-family:var(--d-font);background:var(--d-bg);color:var(--d-fg);line-height:var(--d-lh-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}',
+    '::selection{background:rgba(0,255,213,0.25);color:var(--d-fg)}',
+    // Scrollbar — dark with glowing thumb
+    '::-webkit-scrollbar{width:6px;height:6px}',
+    '::-webkit-scrollbar-track{background:transparent}',
+    '::-webkit-scrollbar-thumb{background:rgba(0,255,213,0.2);border-radius:var(--d-radius-full)}',
+    '::-webkit-scrollbar-thumb:hover{background:rgba(0,255,213,0.4);box-shadow:0 0 8px rgba(0,255,213,0.3)}',
+    // Card — glowing edges
+    '.d-card{border:none;box-shadow:var(--d-elevation-1),0 0 1px rgba(0,255,213,0.2)}',
+    '.d-card-inner{box-shadow:none}',
+    // Modal — intense glow
+    '.d-modal-content{border:none;box-shadow:var(--d-elevation-3),0 0 2px rgba(0,255,213,0.3)}',
+    // Button — bioluminescent glow
+    '.d-btn-primary{box-shadow:0 0 12px rgba(0,255,213,0.25),0 0 4px rgba(0,255,213,0.15)}',
+    '.d-btn-primary:hover{box-shadow:0 0 20px rgba(0,255,213,0.35),0 0 8px rgba(0,255,213,0.2)}',
+    // Bioluminescent utilities
+    '@keyframes d-biolum-pulse{0%,100%{box-shadow:0 0 8px rgba(0,255,213,0.15)}50%{box-shadow:0 0 20px rgba(0,255,213,0.3),0 0 4px rgba(0,255,213,0.15)}}',
+    '.d-biolum-pulse{animation:d-biolum-pulse 3s ease-in-out infinite}',
+    '.d-biolum-edge{box-shadow:0 0 8px rgba(0,255,213,0.2),inset 0 0 8px rgba(0,255,213,0.05)}',
+    '.d-biolum-trail{transition:box-shadow var(--d-tr-normal) var(--d-ease-standard)}',
+    '.d-biolum-trail:hover{box-shadow:0 0 16px rgba(0,255,213,0.25),4px 0 12px rgba(123,97,255,0.15),-4px 0 12px rgba(255,107,157,0.15)}',
+    // Gradient text — oceanic
+    '.d-gradient-text{background:linear-gradient(135deg,var(--d-primary),var(--d-accent),var(--d-tertiary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}',
+    '.d-gradient-text-alt{background:linear-gradient(135deg,var(--d-accent),var(--d-primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}',
+    // Mesh — underwater glow
+    '.d-mesh{background:radial-gradient(ellipse at 30% 60%,rgba(0,255,213,0.08) 0%,transparent 50%),radial-gradient(ellipse at 70% 30%,rgba(123,97,255,0.06) 0%,transparent 50%),radial-gradient(ellipse at 50% 90%,rgba(255,107,157,0.04) 0%,transparent 50%),var(--d-bg)}',
+    // Frosted dialog
+    'dialog::backdrop{background:rgba(2,8,23,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}',
+  ].join(''),
+};