@wildmason/aegis 1.5.4

package/themes.css

@@ -0,0 +1,778 @@
+/* ================================================================
+   Aegis Design System — themes.css
+   Wildmason shared theme tokens for Works, Helm, Slate, Mortar.
+
+   WCAG AA / Section 508 Compliance
+   All token pairs in this file meet WCAG 2.1 AA requirements:
+     - Normal text (< 18pt / < 14pt bold): 4.5:1 minimum
+     - Large text and UI components:        3.0:1 minimum
+       (WCAG 1.4.11 Non-text Contrast — applies to --wm-border-input)
+
+   Placeholder text (--wm-text-placeholder) is intentionally lower contrast.
+   WCAG 2.2 Understanding 1.4.3 explicitly exempts placeholder text from
+   contrast requirements. Inputs MUST have a visible label; placeholder is
+   supplementary hint text only and must never serve as the sole label.
+
+   All tokens use the --wm- prefix. Apps should alias to local
+   names during migration, e.g.:
+     --primary-color: var(--wm-color-accent);
+
+   Token rename guide (Works → Aegis):
+     --bg-app           → --wm-bg-base
+     --bg-header        → --wm-bg-raised
+     --bg-card          → --wm-bg-float
+     --bg-column        → --wm-bg-sunken
+     --bg-hover         → --wm-bg-hover
+     --text-primary     → --wm-text-primary
+     --text-secondary   → --wm-text-secondary
+     --text-muted       → --wm-text-muted
+     --border-color     → --wm-border
+     --border-subtle    → --wm-border-subtle
+     --border-hover     → --wm-border-hover
+     --primary-color    → --wm-color-accent
+     --primary-hover    → --wm-color-accent-hover
+     --success-color    → --wm-color-success
+     --warning-color    → --wm-color-warning
+     --danger-color     → --wm-color-danger
+     --shadow-sm/md/lg  → --wm-shadow-sm/md/lg
+     --radius-*         → --wm-radius-*
+     --priority-*       → --wm-priority-*
+     --color-task/bug/… → --wm-color-task/bug/…
+     --btn-*-text       → --wm-color-*-text
+   ================================================================ */
+
+/* ----------------------------------------------------------------
+   Base constants — theme-independent
+   ---------------------------------------------------------------- */
+:root {
+  /* Border radius */
+  --wm-radius-xs:   4px;
+  --wm-radius-sm:   6px;
+  --wm-radius-md:   8px;
+  --wm-radius-lg:   12px;
+  --wm-radius-full: 9999px;
+
+  /* Motion */
+  --wm-transition-fast: 150ms ease;
+  --wm-transition-base: 200ms ease;
+  --wm-transition-slow: 300ms ease;
+
+  /* Typography */
+  --wm-font-sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --wm-font-mono: 'Cascadia Code', 'Fira Code', Consolas, 'Courier New', monospace;
+
+  /* Fixed semantic colors (not theme-dependent) */
+  --wm-color-critical: #7c3aed;
+
+  /* Priority opacity — overridden to 20% in dark color-scheme themes */
+  --wm-priority-alpha: 15%;
+
+  /* Priority tokens — computed from semantic colors at current theme scope */
+  --wm-priority-critical-bg:   color-mix(in srgb, var(--wm-color-critical) var(--wm-priority-alpha), transparent);
+  --wm-priority-critical-text: var(--wm-color-critical);
+  --wm-priority-high-bg:       color-mix(in srgb, var(--wm-color-danger) var(--wm-priority-alpha), transparent);
+  --wm-priority-high-text:     var(--wm-color-danger);
+  --wm-priority-medium-bg:     color-mix(in srgb, var(--wm-color-warning) var(--wm-priority-alpha), transparent);
+  --wm-priority-medium-text:   var(--wm-color-warning);
+  --wm-priority-low-bg:        color-mix(in srgb, var(--wm-color-success) var(--wm-priority-alpha), transparent);
+  --wm-priority-low-text:      var(--wm-color-success);
+
+  /* Modal backdrop — opacity set per-theme via --wm-backdrop-opacity */
+  --wm-modal-backdrop: rgba(0, 0, 0, var(--wm-backdrop-opacity));
+
+  /* Derived tokens — computed at scope, valid for all themes */
+  --wm-bg-active:           color-mix(in srgb, var(--wm-color-accent) 10%, transparent);
+  --wm-color-danger-bg:     color-mix(in srgb, var(--wm-color-danger)  8%, transparent);
+  --wm-color-danger-border: color-mix(in srgb, var(--wm-color-danger) 25%, transparent);
+  --wm-color-success-bg:    color-mix(in srgb, var(--wm-color-success) 8%, transparent);
+  --wm-color-success-border:color-mix(in srgb, var(--wm-color-success) 25%, transparent);
+  --wm-color-warning-bg:    color-mix(in srgb, var(--wm-color-warning) 8%, transparent);
+  --wm-color-warning-border:color-mix(in srgb, var(--wm-color-warning) 25%, transparent);
+}
+
+
+/* ================================================================
+   Warm Light (Default)
+   ================================================================ */
+:root,
+[data-theme='warm-light'] {
+  color-scheme: light;
+
+  /* Surfaces */
+  --wm-bg-base:    #ececea;
+  --wm-bg-raised:  #e1e1de;
+  --wm-bg-float:   #d2d2ce;
+  --wm-bg-sunken:  #f9f9f8;
+  --wm-bg-hover:      #f4f4f3;
+  --wm-bg-foreground: #c4c4c0;
+
+  /* Text */
+  --wm-text-primary:     #002b36;
+  --wm-text-secondary:   #073642;
+  --wm-text-muted:       #525e64;
+  --wm-text-placeholder: #8d9fa6;
+
+  /* Borders */
+  --wm-border:        #eee8d5;
+  --wm-border-subtle: #d6cdb7;
+  --wm-border-hover:  #268bd2;
+  --wm-border-input:  #7a7460;
+
+  /* Accent */
+  --wm-color-accent:       #1b6ca5;
+  --wm-color-accent-hover: #2aa198;
+  --wm-color-accent-text:  #ffffff;
+
+  /* Semantic */
+  --wm-color-success: #586900;
+  --wm-color-warning: #856600;
+  --wm-color-danger:  #bd2c29;
+
+  /* Item type colors (Works-specific) */
+  --wm-color-task:        #1b6ca5;
+  --wm-color-bug:         #bd2c29;
+  --wm-color-story:       #586900;
+  --wm-color-epic:        #4e53a2;
+  --wm-color-initiative:  #9b3a10;
+  --wm-color-completed:   #1e7a71;
+  --wm-color-epic-text:        #ffffff;
+  --wm-color-initiative-text:  #ffffff;
+
+  /* Shadows */
+  --wm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
+  --wm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.12);
+  --wm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.12);
+
+  /* Overlay */
+  --wm-backdrop-opacity: 0.35;
+
+  /* Syntax highlighting */
+  --wm-syntax-keyword:  #859900;
+  --wm-syntax-string:   #2aa198;
+  --wm-syntax-comment:  #93a1a1;
+  --wm-syntax-number:   #d33682;
+  --wm-syntax-function: #268bd2;
+  --wm-syntax-type:     #b58900;
+  --wm-syntax-variable: #cb4b16;
+  --wm-syntax-attr:     #b58900;
+  --wm-syntax-builtin:  #6c71c4;
+}
+
+
+/* ================================================================
+   Neutral Light
+   ================================================================ */
+[data-theme='neutral-light'] {
+  color-scheme: light;
+
+  /* Surfaces */
+  --wm-bg-base:    #ebebeb;
+  --wm-bg-raised:  #e0e0e0;
+  --wm-bg-float:   #d0d0d0;
+  --wm-bg-sunken:  #f8f8f8;
+  --wm-bg-hover:      #f3f3f3;
+  --wm-bg-foreground: #bababa;
+
+  /* Text */
+  --wm-text-primary:     #111111;
+  --wm-text-secondary:   #333333;
+  --wm-text-muted:       #666666;
+  --wm-text-placeholder: #999999;
+
+  /* Borders */
+  --wm-border:        #cccccc;
+  --wm-border-subtle: #dddddd;
+  --wm-border-hover:  #888888;
+  --wm-border-input:  #7d7d7d;
+
+  /* Accent */
+  --wm-color-accent:       #2e5fba;
+  --wm-color-accent-hover: #3061af;
+  --wm-color-accent-text:  #ffffff;
+
+  /* Semantic */
+  --wm-color-success: #0a7065;
+  --wm-color-warning: #b45309;
+  --wm-color-danger:  #dc2626;
+
+  /* Item type colors */
+  --wm-color-task:        #2563eb;
+  --wm-color-bug:         #dc2626;
+  --wm-color-story:       #059669;
+  --wm-color-epic:        #7c3aed;
+  --wm-color-initiative:  #c2410c;
+  --wm-color-completed:   #6366f1;
+  --wm-color-epic-text:        #ffffff;
+  --wm-color-initiative-text:  #ffffff;
+
+  /* Shadows */
+  --wm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --wm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --wm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.12);
+
+  /* Overlay */
+  --wm-backdrop-opacity: 0.35;
+
+  /* Syntax highlighting */
+  --wm-syntax-keyword:  #a626a4;
+  --wm-syntax-string:   #50a14f;
+  --wm-syntax-comment:  #a0a1a7;
+  --wm-syntax-number:   #986801;
+  --wm-syntax-function: #4078f2;
+  --wm-syntax-type:     #c18401;
+  --wm-syntax-variable: #e45649;
+  --wm-syntax-attr:     #986801;
+  --wm-syntax-builtin:  #0184bc;
+}
+
+
+/* ================================================================
+   Arctic Night
+   ================================================================ */
+[data-theme='arctic-night'] {
+  color-scheme: dark;
+  --wm-priority-alpha: 20%;
+  --wm-priority-critical-text: color-mix(in srgb, var(--wm-color-critical) 85%, white);
+
+  /* Surfaces */
+  --wm-bg-sunken:  #242933;
+  --wm-bg-base:    #2e3440;
+  --wm-bg-raised:  #3b4252;
+  --wm-bg-float:   #434c5e;
+  --wm-bg-hover:      #4c566a;
+  --wm-bg-foreground: #535e6e;
+
+  /* Text */
+  --wm-text-primary:     #eceff4;
+  --wm-text-secondary:   #e5e9f0;
+  --wm-text-muted:       #d8dee9;
+  --wm-text-placeholder: #adb9cb;
+
+  /* Borders */
+  --wm-border:        #4c566a;
+  --wm-border-subtle: #434c5e;
+  --wm-border-hover:  #88c0d0;
+  --wm-border-input:  #8e9aa9;
+
+  /* Accent — light teal requires dark text */
+  --wm-color-accent:       #8fc4d3;
+  --wm-color-accent-hover: #81a1c1;
+  --wm-color-accent-text:  #2e3440;
+
+  /* Semantic */
+  --wm-color-success: #a3be8c;
+  --wm-color-warning: #ebcb8b;
+  --wm-color-danger:  #bf616a;
+
+  /* Item type colors */
+  --wm-color-task:        #88c0d0;
+  --wm-color-bug:         #bf616a;
+  --wm-color-story:       #a3be8c;
+  --wm-color-epic:        #b48ead;
+  --wm-color-initiative:  #ebcb8b;
+  --wm-color-completed:   #81a1c1;
+  --wm-color-epic-text:        #2e3440;
+  --wm-color-initiative-text:  #2e3440;
+
+  /* Shadows */
+  --wm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --wm-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
+  --wm-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
+
+  /* Overlay */
+  --wm-backdrop-opacity: 0.5;
+
+  /* Syntax highlighting */
+  --wm-syntax-keyword:  #81a1c1;
+  --wm-syntax-string:   #a3be8c;
+  --wm-syntax-comment:  #616e88;
+  --wm-syntax-number:   #b48ead;
+  --wm-syntax-function: #88c0d0;
+  --wm-syntax-type:     #8fbcbb;
+  --wm-syntax-variable: #d08770;
+  --wm-syntax-attr:     #8fbcbb;
+  --wm-syntax-builtin:  #81a1c1;
+}
+
+
+
+
+/* ================================================================
+   Vampire's Kiss
+   ================================================================ */
+[data-theme='vampires-kiss'] {
+  color-scheme: dark;
+  --wm-priority-alpha: 20%;
+  --wm-priority-critical-text: color-mix(in srgb, var(--wm-color-critical) 85%, white);
+
+  /* Surfaces */
+  --wm-bg-sunken:  #16171e;
+  --wm-bg-base:    #21222c;
+  --wm-bg-raised:  #282a36;
+  --wm-bg-float:   #44475a;
+  --wm-bg-hover:      #6272a4;
+  --wm-bg-foreground: #525568;
+
+  /* Text */
+  --wm-text-primary:     #f8f8f2;
+  --wm-text-secondary:   #d6acff;
+  --wm-text-muted:       #c5cedd;
+  --wm-text-placeholder: #8b93a8;
+
+  /* Borders */
+  --wm-border:        #6272a4;
+  --wm-border-subtle: #44475a;
+  --wm-border-hover:  #ff79c6;
+  --wm-border-input:  #8694b1;
+
+  /* Accent — slightly lighter than canonical purple for card contrast */
+  --wm-color-accent:       #c9a7fa;
+  --wm-color-accent-hover: #ff79c6;
+  --wm-color-accent-text:  #282a36;
+
+  /* Semantic */
+  --wm-color-success: #50fa7b;
+  --wm-color-warning: #f1fa8c;
+  --wm-color-danger:  #ff5555;
+
+  /* Item type colors */
+  --wm-color-task:        #8be9fd;
+  --wm-color-bug:         #ff5555;
+  --wm-color-story:       #50fa7b;
+  --wm-color-epic:        #bd93f9;
+  --wm-color-initiative:  #ffb86c;
+  --wm-color-completed:   #bd93f9;
+  --wm-color-epic-text:        #282a36;
+  --wm-color-initiative-text:  #282a36;
+
+  /* Shadows */
+  --wm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
+  --wm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
+  --wm-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);
+
+  /* Overlay */
+  --wm-backdrop-opacity: 0.5;
+
+  /* Syntax highlighting */
+  --wm-syntax-keyword:  #ff79c6;
+  --wm-syntax-string:   #f1fa8c;
+  --wm-syntax-comment:  #6272a4;
+  --wm-syntax-number:   #bd93f9;
+  --wm-syntax-function: #50fa7b;
+  --wm-syntax-type:     #8be9fd;
+  --wm-syntax-variable: #ffb86c;
+  --wm-syntax-attr:     #50fa7b;
+  --wm-syntax-builtin:  #8be9fd;
+}
+
+
+/* ================================================================
+   Twilight Peach
+   ================================================================ */
+[data-theme='twilight-peach'] {
+  color-scheme: dark;
+  --wm-priority-alpha: 20%;
+  --wm-priority-critical-text: color-mix(in srgb, var(--wm-color-critical) 85%, white);
+
+  /* Surfaces */
+  --wm-bg-sunken:  #020617;
+  --wm-bg-base:    #171827;
+  --wm-bg-raised:  #201e37;
+  --wm-bg-float:   #292a48;
+  --wm-bg-hover:      #32334e;
+  --wm-bg-foreground: #3c3d5e;
+
+  /* Text */
+  --wm-text-primary:     #eeedf8;
+  --wm-text-secondary:   #a9a8c0;
+  --wm-text-muted:       #9898b4;
+  --wm-text-placeholder: #4a4962;
+
+  /* Borders */
+  --wm-border:        #565888;
+  --wm-border-subtle: #353758;
+  --wm-border-hover:  #6468a0;
+  --wm-border-input:  #797ba0;
+
+  /* Accent — warm peach */
+  --wm-color-accent:       #f5986a;
+  --wm-color-accent-hover: #f08458;
+  --wm-color-accent-text:  #1c1d2e;
+
+  /* Semantic */
+  --wm-color-success: #5cbfa0;
+  --wm-color-warning: #f0b464;
+  --wm-color-danger:  #f07878;
+
+  /* Item type colors */
+  --wm-color-task:        #70a8f0;
+  --wm-color-bug:         #f07878;
+  --wm-color-story:       #5cbfa0;
+  --wm-color-epic:        #b090e8;
+  --wm-color-initiative:  #f0b464;
+  --wm-color-completed:   #9090d8;
+  --wm-color-epic-text:        #ffffff;
+  --wm-color-initiative-text:  #1c1d2e;
+
+  /* Shadows */
+  --wm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
+  --wm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
+  --wm-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.7);
+
+  /* Overlay */
+  --wm-backdrop-opacity: 0.55;
+
+  /* Syntax highlighting */
+  --wm-syntax-keyword:  #c78ed4;
+  --wm-syntax-string:   #98c87a;
+  --wm-syntax-comment:  #6b6a82;
+  --wm-syntax-number:   #f0b464;
+  --wm-syntax-function: #80c0e8;
+  --wm-syntax-type:     #e5c480;
+  --wm-syntax-variable: #f5986a;
+  --wm-syntax-attr:     #d4a870;
+  --wm-syntax-builtin:  #70c0c8;
+}
+
+
+/* ================================================================
+   Thistle & Mocha
+   ================================================================ */
+[data-theme='thistle-mocha'] {
+  color-scheme: dark;
+  --wm-priority-alpha: 20%;
+  --wm-priority-critical-text: color-mix(in srgb, var(--wm-color-critical) 85%, white);
+
+  /* Surfaces — warm near-black mocha family */
+  --wm-bg-base:  #221918;
+  --wm-bg-raised: #382e2c;
+  --wm-bg-float:    #403635;
+  --wm-bg-sunken:   #151310;
+  --wm-bg-hover:      #2c2822;
+  --wm-bg-foreground: #514240;
+
+  /* Text — warm cream */
+  --wm-text-primary:     #ede9e1;
+  --wm-text-secondary:   #ada598;
+  --wm-text-muted:       #a09890;
+  --wm-text-placeholder: #4a4540;
+
+  /* Borders */
+  --wm-border:        #2e2820;
+  --wm-border-subtle: #241e18;
+  --wm-border-hover:  #504840;
+  --wm-border-input:  #8a7670;
+
+  /* Accent — thistle (muted lavender) */
+  --wm-color-accent:       #c4a8d8;
+  --wm-color-accent-hover: #9e7abf;
+  --wm-color-accent-text:  #1a1715;
+
+  /* Semantic */
+  --wm-color-success: #7ac4a0;
+  --wm-color-warning: #d4a85a;
+  --wm-color-danger:  #e07878;
+
+  /* Item type colors */
+  --wm-color-task:        #80a8e0;
+  --wm-color-bug:         #e07878;
+  --wm-color-story:       #7ac4a0;
+  --wm-color-epic:        #b090d8;
+  --wm-color-initiative:  #d4a85a;
+  --wm-color-completed:   #9890c8;
+  --wm-color-epic-text:        #1a1715;
+  --wm-color-initiative-text:  #1a1715;
+
+  /* Shadows */
+  --wm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6);
+  --wm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.7);
+  --wm-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.8);
+
+  /* Overlay */
+  --wm-backdrop-opacity: 0.6;
+
+  /* Syntax highlighting */
+  --wm-syntax-keyword:  #d8a8c4;
+  --wm-syntax-string:   #a0c890;
+  --wm-syntax-comment:  #6e6660;
+  --wm-syntax-number:   #d4a85a;
+  --wm-syntax-function: #90b8d8;
+  --wm-syntax-type:     #d8c890;
+  --wm-syntax-variable: #c4a8d8;
+  --wm-syntax-attr:     #c8a870;
+  --wm-syntax-builtin:  #80c4b8;
+}
+
+
+/* ================================================================
+   Solarized Precision
+   ================================================================ */
+[data-theme='solarized-precision'] {
+  color-scheme: light;
+
+  /* Surfaces — warm cream base, distinct tan surface, clean white cards */
+  --wm-bg-base:    #ede7d2;
+  --wm-bg-raised:  #e2d8bc;
+  --wm-bg-float:   #d4cba8;
+  --wm-bg-sunken:  #f1e8dd;
+  --wm-bg-hover:      #ede5cc;
+  --wm-bg-foreground: #c6be96;
+
+  /* Text — solarized blue-gray family */
+  --wm-text-primary:     #2c3e48;
+  --wm-text-secondary:   #4e6470;
+  --wm-text-muted:       #455868;
+  --wm-text-placeholder: #a8b8be;
+
+  /* Borders */
+  --wm-border:        #cec6aa;
+  --wm-border-subtle: #dad4bc;
+  --wm-border-hover:  #8c9ea8;
+  --wm-border-input:  #688090;
+
+  /* Accent — precision teal-blue */
+  --wm-color-accent:       #185c78;
+  --wm-color-accent-hover: #1e6e96;
+  --wm-color-accent-text:  #ffffff;
+
+  /* Semantic */
+  --wm-color-success: #218a5c;
+  --wm-color-warning: #9a6800;
+  --wm-color-danger:  #c4302c;
+
+  /* Item type colors */
+  --wm-color-task:        #1e6ea8;
+  --wm-color-bug:         #c4302c;
+  --wm-color-story:       #218a5c;
+  --wm-color-epic:        #6a38aa;
+  --wm-color-initiative:  #9a5800;
+  --wm-color-completed:   #4a6ea8;
+  --wm-color-epic-text:        #ffffff;
+  --wm-color-initiative-text:  #ffffff;
+
+  /* Shadows — light theme, warm-tinted */
+  --wm-shadow-sm: 0 1px 2px rgba(44, 62, 72, 0.08);
+  --wm-shadow-md: 0 4px 8px rgba(44, 62, 72, 0.12);
+  --wm-shadow-lg: 0 10px 20px rgba(44, 62, 72, 0.15);
+
+  /* Overlay */
+  --wm-backdrop-opacity: 0.35;
+
+  /* Syntax — solarized light palette */
+  --wm-syntax-keyword:  #859900;
+  --wm-syntax-string:   #2aa198;
+  --wm-syntax-comment:  #93a1a1;
+  --wm-syntax-number:   #d48600;
+  --wm-syntax-function: #268bd2;
+  --wm-syntax-type:     #b58900;
+  --wm-syntax-variable: #cb4b16;
+  --wm-syntax-attr:     #b58900;
+  --wm-syntax-builtin:  #2aa198;
+}
+
+
+/* ================================================================
+   Posh Sandalwood
+   ================================================================ */
+[data-theme='posh-sandalwood'] {
+  color-scheme: dark;
+  --wm-priority-alpha: 20%;
+  --wm-priority-critical-text: color-mix(in srgb, var(--wm-color-critical) 85%, white);
+
+  /* Surfaces — warm olive-brown, sunken=darkest, float=lightest */
+  --wm-bg-sunken:  #1c1c15;
+  --wm-bg-base:    #27271f;
+  --wm-bg-raised:  #333028;
+  --wm-bg-float:   #403c30;
+  --wm-bg-hover:      #4a4538;
+  --wm-bg-foreground: #524e3e;
+
+  /* Text — sandalwood cream palette */
+  --wm-text-primary:     #fdf0e0;
+  --wm-text-secondary:   #c5b59b;
+  --wm-text-muted:       #b8a690;
+  --wm-text-placeholder: #5a5040;
+
+  /* Borders */
+  --wm-border:        #3a3828;
+  --wm-border-subtle: #2e2c22;
+  --wm-border-hover:  #f92672;
+  --wm-border-input:  #877567;
+
+  /* Accent — Monokai hot pink */
+  --wm-color-accent:       #f92672;
+  --wm-color-accent-hover: #fd971f;
+  --wm-color-accent-text:  #1c1c15;
+
+  /* Semantic */
+  --wm-color-success: #a6e22e;
+  --wm-color-warning: #fd971f;
+  --wm-color-danger:  #f92672;
+
+  /* Item type colors */
+  --wm-color-task:        #66d9ef;
+  --wm-color-bug:         #f92672;
+  --wm-color-story:       #a6e22e;
+  --wm-color-epic:        #ae81ff;
+  --wm-color-initiative:  #fd971f;
+  --wm-color-completed:   #a6e22e;
+  --wm-color-epic-text:        #1c1c15;
+  --wm-color-initiative-text:  #1c1c15;
+
+  /* Shadows */
+  --wm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
+  --wm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
+  --wm-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.7);
+
+  /* Overlay */
+  --wm-backdrop-opacity: 0.5;
+
+  /* Syntax highlighting — full Monokai palette on warm surfaces */
+  --wm-syntax-keyword:  #f92672;
+  --wm-syntax-string:   #e6db74;
+  --wm-syntax-comment:  #75715e;
+  --wm-syntax-number:   #ae81ff;
+  --wm-syntax-function: #a6e22e;
+  --wm-syntax-type:     #66d9ef;
+  --wm-syntax-variable: #fd971f;
+  --wm-syntax-attr:     #a6e22e;
+  --wm-syntax-builtin:  #66d9ef;
+}
+
+
+/* ================================================================
+   Crepuscular Sky
+   ================================================================ */
+[data-theme='crepuscular-sky'] {
+  color-scheme: dark;
+  --wm-priority-alpha: 20%;
+  --wm-priority-critical-text: color-mix(in srgb, var(--wm-color-critical) 85%, white);
+
+  /* Surfaces — deep navy, sunken=darkest, float=lightest */
+  --wm-bg-sunken:  #060810;
+  --wm-bg-base:    #121523;
+  --wm-bg-raised:  #131a28;
+  --wm-bg-float:   #1d2338;
+  --wm-bg-hover:      #252c44;
+  --wm-bg-foreground: #2d3654;
+
+  /* Text — pale warm cream, stepping through amber to cool blue-grey */
+  --wm-text-primary:     #edd9a3;
+  --wm-text-secondary:   #ba9d7a;
+  --wm-text-muted:       #9083a0;
+  --wm-text-placeholder: #3d4d68;
+
+  /* Borders */
+  --wm-border:        #202a40;
+  --wm-border-subtle: #54575c;
+  --wm-border-hover:  #e8920a;
+  --wm-border-input:  #5a6888;
+
+  /* Accent — golden orange, the crepuscular ray color */
+  --wm-color-accent:       #c09d06;
+  --wm-color-accent-hover: #b15000;
+  --wm-color-accent-text:  #060810;
+
+  /* Semantic */
+  --wm-color-success: #4aba80;
+  --wm-color-warning: #d4830a;
+  --wm-color-danger:  #e05c5c;
+
+  /* Item type colors */
+  --wm-color-task:        #8ab4d8;
+  --wm-color-bug:         #e05c5c;
+  --wm-color-story:       #4aba80;
+  --wm-color-epic:        #c08ae0;
+  --wm-color-initiative:  #e8920a;
+  --wm-color-completed:   #7bb8a8;
+  --wm-color-epic-text:        #ffffff;
+  --wm-color-initiative-text:  #060810;
+
+  /* Shadows */
+  --wm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6);
+  --wm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.7);
+  --wm-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.8);
+
+  /* Overlay */
+  --wm-backdrop-opacity: 0.6;
+
+  /* Syntax highlighting — warm golden with reddish-purple accents */
+  --wm-syntax-keyword:  #d4830a;
+  --wm-syntax-string:   #edd9a3;
+  --wm-syntax-comment:  #4a5a7a;
+  --wm-syntax-number:   #e05c8a;
+  --wm-syntax-function: #8ab4d8;
+  --wm-syntax-type:     #c0986a;
+  --wm-syntax-variable: #e05c5c;
+  --wm-syntax-attr:     #d4830a;
+  --wm-syntax-builtin:  #9b6bcc;
+}
+
+
+/* ================================================================
+   Source Control Dark
+   ================================================================ */
+[data-theme='source-control-dark'] {
+  color-scheme: dark;
+  --wm-priority-alpha: 20%;
+  --wm-priority-critical-text: color-mix(in srgb, var(--wm-color-critical) 85%, white);
+
+  /* Surfaces */
+  --wm-bg-base:    #0d1117;
+  --wm-bg-raised:  #161b22;
+  --wm-bg-float:   #21262d;
+  --wm-bg-sunken:  #010409;
+  --wm-bg-hover:      #262c36;
+  --wm-bg-foreground: #313b45;
+
+  /* Text */
+  --wm-text-primary:     #f0f6fc;
+  --wm-text-secondary:   #c9d1d9;
+  --wm-text-muted:       #9198a1;
+  --wm-text-placeholder: #636c76;
+
+  /* Borders */
+  --wm-border:        #444c56;
+  --wm-border-subtle: #30363d;
+  --wm-border-hover:  #58a6ff;
+  --wm-border-input:  #6a6f76;
+
+  /* Accent — medium green, needs dark text for contrast */
+  --wm-color-accent:       #3fb950;
+  --wm-color-accent-hover: #58a6ff;
+  --wm-color-accent-text:  #0d1117;
+
+  /* Semantic */
+  --wm-color-success: #3fb950;
+  --wm-color-warning: #d29922;
+  --wm-color-danger:  #f85149;
+
+  /* Item type colors */
+  --wm-color-task:        #58a6ff;
+  --wm-color-bug:         #f85149;
+  --wm-color-story:       #3fb950;
+  --wm-color-epic:        #bc8cff;
+  --wm-color-initiative:  #d29922;
+  --wm-color-completed:   #3fb950;
+  --wm-color-epic-text:        #ffffff;
+  --wm-color-initiative-text:  #ffffff;
+
+  /* Shadows */
+  --wm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
+  --wm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
+  --wm-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.7);
+
+  /* Overlay */
+  --wm-backdrop-opacity: 0.5;
+
+  /* Syntax highlighting */
+  --wm-syntax-keyword:  #ff7b72;
+  --wm-syntax-string:   #a5d6ff;
+  --wm-syntax-comment:  #8b949e;
+  --wm-syntax-number:   #79c0ff;
+  --wm-syntax-function: #d2a8ff;
+  --wm-syntax-type:     #ffa657;
+  --wm-syntax-variable: #ffa657;
+  --wm-syntax-attr:     #79c0ff;
+  --wm-syntax-builtin:  #79c0ff;
+}