@refrakt-md/lumina 0.12.0 → 0.14.0

package/styles/runes/tint.css

@@ -16,32 +16,32 @@
 @property --rf-color-bg {
 	syntax: '<color>';
 	inherits: true;
-	initial-value: #faf5eb;
+	initial-value: #f5f4f1;
 }
 @property --rf-color-surface {
 	syntax: '<color>';
 	inherits: true;
-	initial-value: #fffbf2;
+	initial-value: #fbfaf7;
 }
 @property --rf-color-text {
 	syntax: '<color>';
 	inherits: true;
-	initial-value: #1d3557;
+	initial-value: #1c1a17;
 }
 @property --rf-color-muted {
 	syntax: '<color>';
 	inherits: true;
-	initial-value: #5a7a90;
+	initial-value: #6b6661;
 }
 @property --rf-color-primary {
 	syntax: '<color>';
 	inherits: true;
-	initial-value: #457b9d;
+	initial-value: #1c1a17;
 }
 @property --rf-color-border {
 	syntax: '<color>';
 	inherits: true;
-	initial-value: #d8e4de;
+	initial-value: #e2e0dd;
 }
 
 /* ── 1. Colour scheme override ──────────────────────────────────────────────
@@ -55,12 +55,12 @@
 	color: var(--rf-color-text);
 	background-color: var(--rf-color-bg);
 
-	--cs-bg: #152238;
-	--cs-surface: #1a2940;
-	--cs-text: #f1faee;
-	--cs-muted: #a8dadc;
-	--cs-accent: #70b4c0;
-	--cs-border: rgba(168, 218, 220, 0.15);
+	--cs-bg: #1a1a17;
+	--cs-surface: #211f1c;
+	--cs-text: #f6f4ef;
+	--cs-muted: #94908a;
+	--cs-accent: #f6f4ef;
+	--cs-border: #2a2825;
 
 	--rf-color-bg: var(--cs-bg);
 	--rf-color-surface: var(--cs-surface);
@@ -69,27 +69,48 @@
 	--rf-color-primary: var(--cs-accent);
 	--rf-color-border: var(--cs-border);
 
-	--rf-color-primary-hover: #a8dadc;
-	--rf-color-surface-hover: #203048;
-	--rf-color-surface-active: #263850;
-	--rf-color-surface-raised: #1a2940;
-
-	--rf-color-info: #a8dadc;
-	--rf-color-info-bg: rgba(69, 123, 157, 0.12);
-	--rf-color-info-border: rgba(69, 123, 157, 0.3);
-	--rf-color-warning: #e8c07a;
-	--rf-color-warning-bg: rgba(200, 144, 10, 0.12);
-	--rf-color-warning-border: rgba(200, 144, 10, 0.3);
-	--rf-color-danger: #f07078;
-	--rf-color-danger-bg: rgba(230, 57, 70, 0.12);
-	--rf-color-danger-border: rgba(230, 57, 70, 0.3);
-	--rf-color-success: #72c098;
-	--rf-color-success-bg: rgba(61, 143, 101, 0.12);
-	--rf-color-success-border: rgba(61, 143, 101, 0.3);
-
-	--rf-color-code-bg: #152238;
-	--rf-color-code-text: #f1faee;
-	--rf-color-inline-code-bg: rgba(168, 218, 220, 0.08);
+	--rf-color-primary-hover: #d4cfc5;
+	--rf-color-surface-hover: #2a2825;
+	--rf-color-surface-active: #353330;
+	--rf-color-surface-raised: #292723;
+
+	--rf-color-info: #9bb4c7;
+	--rf-color-info-bg: #1f2530;
+	--rf-color-info-border: #3d4655;
+	--rf-color-warning: #d4a868;
+	--rf-color-warning-bg: #2a2519;
+	--rf-color-warning-border: #4a3f2a;
+	--rf-color-danger: #d48888;
+	--rf-color-danger-bg: #2a1818;
+	--rf-color-danger-border: #4a2a2a;
+	--rf-color-success: #7eb398;
+	--rf-color-success-bg: #1a2a1f;
+	--rf-color-success-border: #2a4a35;
+
+	--rf-color-code-bg: #222220;
+	--rf-color-code-text: #f6f4ef;
+	--rf-color-code-inline-bg: #2b2b29;
+	--rf-color-inline-code-bg: #2b2b29;
+
+	--rf-syntax-keyword: #7eb6bc;
+	--rf-syntax-function: #a89bc7;
+	--rf-syntax-string: #c79a9a;
+	--rf-syntax-constant: #d4b07e;
+	--rf-syntax-comment: #6b6661;
+	--rf-syntax-punctuation: #94908a;
+	--rf-syntax-variable: #f6f4ef;
+
+	--rf-syntax-foreground: #f6f4ef;
+	--rf-syntax-background: #222220;
+	--rf-syntax-token-keyword: #7eb6bc;
+	--rf-syntax-token-string: #c79a9a;
+	--rf-syntax-token-string-expression: #c79a9a;
+	--rf-syntax-token-constant: #d4b07e;
+	--rf-syntax-token-comment: #6b6661;
+	--rf-syntax-token-function: #a89bc7;
+	--rf-syntax-token-parameter: #f6f4ef;
+	--rf-syntax-token-punctuation: #94908a;
+	--rf-syntax-token-link: #a89bc7;
 
 	--rf-shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
 	--rf-shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
@@ -103,12 +124,12 @@
 	color: var(--rf-color-text);
 	background-color: var(--rf-color-bg);
 
-	--cs-bg: #faf5eb;
-	--cs-surface: #fffbf2;
-	--cs-text: #1d3557;
-	--cs-muted: #5a7a90;
-	--cs-accent: #457b9d;
-	--cs-border: #d8e4de;
+	--cs-bg: #f5f4f1;
+	--cs-surface: #fbfaf7;
+	--cs-text: #1c1a17;
+	--cs-muted: #6b6661;
+	--cs-accent: #1c1a17;
+	--cs-border: #e2e0dd;
 
 	--rf-color-bg: var(--cs-bg);
 	--rf-color-surface: var(--cs-surface);
@@ -117,25 +138,48 @@
 	--rf-color-primary: var(--cs-accent);
 	--rf-color-border: var(--cs-border);
 
-	--rf-color-primary-hover: #376585;
-	--rf-color-surface-hover: #fdf0d5;
-	--rf-color-surface-active: #f9ebcc;
+	--rf-color-primary-hover: #3a342d;
+	--rf-color-surface-hover: #ecebe8;
+	--rf-color-surface-active: #e2e0dd;
 	--rf-color-surface-raised: #ffffff;
 
-	--rf-color-info: #457b9d;
-	--rf-color-info-bg: #edf4f8;
-	--rf-color-info-border: #a8dadc;
-	--rf-color-warning: #c8900a;
-	--rf-color-warning-bg: #fdf5e4;
-	--rf-color-warning-border: #edd49a;
-	--rf-color-danger: #e63946;
-	--rf-color-danger-bg: #fdeced;
-	--rf-color-danger-border: #f0b0b5;
-	--rf-color-success: #3d8f65;
-	--rf-color-success-bg: #ecf5ef;
-	--rf-color-success-border: #a8d4b8;
-
-	--rf-color-inline-code-bg: #f9ebcc;
+	--rf-color-info: #34547a;
+	--rf-color-info-bg: #e8edf4;
+	--rf-color-info-border: #c5d2e0;
+	--rf-color-warning: #9c5a18;
+	--rf-color-warning-bg: #f5ebd9;
+	--rf-color-warning-border: #e0c9a3;
+	--rf-color-danger: #a83232;
+	--rf-color-danger-bg: #f5e0e0;
+	--rf-color-danger-border: #e0b8b8;
+	--rf-color-success: #2d6a3e;
+	--rf-color-success-bg: #e0eee4;
+	--rf-color-success-border: #b8d4be;
+
+	--rf-color-code-bg: #ebeae8;
+	--rf-color-code-text: #1c1a17;
+	--rf-color-code-inline-bg: #e6e5e3;
+	--rf-color-inline-code-bg: #e6e5e3;
+
+	--rf-syntax-keyword: #2a5c63;
+	--rf-syntax-function: #4a3b6e;
+	--rf-syntax-string: #8a3a3a;
+	--rf-syntax-constant: #876327;
+	--rf-syntax-comment: #8a857d;
+	--rf-syntax-punctuation: #6b6661;
+	--rf-syntax-variable: #1c1a17;
+
+	--rf-syntax-foreground: #1c1a17;
+	--rf-syntax-background: #ebeae8;
+	--rf-syntax-token-keyword: #2a5c63;
+	--rf-syntax-token-string: #8a3a3a;
+	--rf-syntax-token-string-expression: #8a3a3a;
+	--rf-syntax-token-constant: #876327;
+	--rf-syntax-token-comment: #8a857d;
+	--rf-syntax-token-function: #4a3b6e;
+	--rf-syntax-token-parameter: #1c1a17;
+	--rf-syntax-token-punctuation: #6b6661;
+	--rf-syntax-token-link: #4a3b6e;
 
 	--rf-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
 	--rf-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
@@ -157,11 +201,11 @@
 
 [data-tint] {
 	color: var(--rf-color-text);
-	--rf-color-bg: var(--tint-background);
+	--rf-color-bg: var(--tint-bg);
 	--rf-color-surface: var(--tint-surface);
-	--rf-color-text: var(--tint-primary);
-	--rf-color-muted: var(--tint-secondary);
-	--rf-color-primary: var(--tint-accent);
+	--rf-color-text: var(--tint-text);
+	--rf-color-muted: var(--tint-muted);
+	--rf-color-primary: var(--tint-primary);
 	--rf-color-border: var(--tint-border);
 }
 
@@ -173,11 +217,11 @@
  * (which carries the dark theme value). */
 
 :is([data-theme="dark"], [data-color-scheme="dark"]) [data-tint] {
-	--rf-color-bg: var(--tint-dark-background, var(--tint-background));
+	--rf-color-bg: var(--tint-dark-bg, var(--tint-bg));
 	--rf-color-surface: var(--tint-dark-surface, var(--tint-surface));
-	--rf-color-text: var(--tint-dark-primary, var(--tint-primary));
-	--rf-color-muted: var(--tint-dark-secondary, var(--tint-secondary));
-	--rf-color-primary: var(--tint-dark-accent, var(--tint-accent));
+	--rf-color-text: var(--tint-dark-text, var(--tint-text));
+	--rf-color-muted: var(--tint-dark-muted, var(--tint-muted));
+	--rf-color-primary: var(--tint-dark-primary, var(--tint-primary));
 	--rf-color-border: var(--tint-dark-border, var(--tint-border));
 }
 
@@ -187,19 +231,19 @@
  * tint tokens use the colour-scheme value, not the page-level value. */
 
 [data-color-scheme="dark"][data-tint] {
-	--rf-color-bg: var(--tint-dark-background, var(--tint-background, var(--cs-bg)));
+	--rf-color-bg: var(--tint-dark-bg, var(--tint-bg, var(--cs-bg)));
 	--rf-color-surface: var(--tint-dark-surface, var(--tint-surface, var(--cs-surface)));
-	--rf-color-text: var(--tint-dark-primary, var(--tint-primary, var(--cs-text)));
-	--rf-color-muted: var(--tint-dark-secondary, var(--tint-secondary, var(--cs-muted)));
-	--rf-color-primary: var(--tint-dark-accent, var(--tint-accent, var(--cs-accent)));
+	--rf-color-text: var(--tint-dark-text, var(--tint-text, var(--cs-text)));
+	--rf-color-muted: var(--tint-dark-muted, var(--tint-muted, var(--cs-muted)));
+	--rf-color-primary: var(--tint-dark-primary, var(--tint-primary, var(--cs-accent)));
 	--rf-color-border: var(--tint-dark-border, var(--tint-border, var(--cs-border)));
 }
 
 [data-color-scheme="light"][data-tint] {
-	--rf-color-bg: var(--tint-background, var(--cs-bg));
+	--rf-color-bg: var(--tint-bg, var(--cs-bg));
 	--rf-color-surface: var(--tint-surface, var(--cs-surface));
-	--rf-color-text: var(--tint-primary, var(--cs-text));
-	--rf-color-muted: var(--tint-secondary, var(--cs-muted));
-	--rf-color-primary: var(--tint-accent, var(--cs-accent));
+	--rf-color-text: var(--tint-text, var(--cs-text));
+	--rf-color-muted: var(--tint-muted, var(--cs-muted));
+	--rf-color-primary: var(--tint-primary, var(--cs-accent));
 	--rf-color-border: var(--tint-border, var(--cs-border));
 }

package/tokens/base.css

@@ -1,50 +1,56 @@
-/* Lumina Theme — Design Tokens (Light Mode) */
+/* Lumina Theme — Design Tokens (Light Mode)
+ *
+ * Source of truth: packages/lumina/src/tokens.ts (`luminaTokens` export).
+ * This file mirrors that export verbatim — a coverage test in
+ * `packages/lumina/test/token-config-coverage.test.ts` keeps them in
+ * lockstep; drift fails CI. Edit `tokens.ts` and update both, or run
+ * a future build script that regenerates this file. */
 
 :root {
 	/* Typography */
-	--rf-font-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
-	--rf-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+	--rf-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+	--rf-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'Cascadia Code', monospace;
 
-	/* Primary scale (cerulean → frosted blue) */
-	--rf-color-primary-50: #f0f6f9;
-	--rf-color-primary-100: #dcebf0;
-	--rf-color-primary-200: #b8d6e2;
-	--rf-color-primary-300: #a8dadc;
-	--rf-color-primary-400: #70b4c0;
-	--rf-color-primary-500: #457b9d;
-	--rf-color-primary-600: #376585;
-	--rf-color-primary-700: #1d3557;
-	--rf-color-primary-800: #182c4a;
-	--rf-color-primary-900: #12213a;
-	--rf-color-primary-950: #0c162a;
+	/* Primary scale — warm-neutral axis, near-bg → near-text */
+	--rf-color-primary-50: #fbfaf7;
+	--rf-color-primary-100: #f5f4f1;
+	--rf-color-primary-200: #ecebe8;
+	--rf-color-primary-300: #e2e0dd;
+	--rf-color-primary-400: #bfbab2;
+	--rf-color-primary-500: #94908a;
+	--rf-color-primary-600: #76716a;
+	--rf-color-primary-700: #5a564f;
+	--rf-color-primary-800: #3a342d;
+	--rf-color-primary-900: #2a2622;
+	--rf-color-primary-950: #1c1a17;
 
 	/* Core palette */
-	--rf-color-text: #1d3557;
-	--rf-color-muted: #5a7a90;
-	--rf-color-border: #d8e4de;
-	--rf-color-bg: #faf5eb;
-	--rf-color-primary: #457b9d;
-	--rf-color-primary-hover: #376585;
+	--rf-color-text: #1c1a17;
+	--rf-color-muted: #6b6661;
+	--rf-color-border: #e2e0dd;
+	--rf-color-bg: #f5f4f1;
+	--rf-color-primary: #1c1a17;
+	--rf-color-primary-hover: #3a342d;
 
-	/* Surfaces — lighter than background */
-	--rf-color-surface: #fffbf2;
-	--rf-color-surface-hover: #fdf0d5;
-	--rf-color-surface-active: #f9ebcc;
+	/* Surfaces */
+	--rf-color-surface: #fbfaf7;
+	--rf-color-surface-hover: #ecebe8;
+	--rf-color-surface-active: #e2e0dd;
 	--rf-color-surface-raised: #ffffff;
 
-	/* Semantic */
-	--rf-color-info: #457b9d;
-	--rf-color-info-bg: #edf4f8;
-	--rf-color-info-border: #a8dadc;
-	--rf-color-warning: #c8900a;
-	--rf-color-warning-bg: #fdf5e4;
-	--rf-color-warning-border: #edd49a;
-	--rf-color-danger: #e63946;
-	--rf-color-danger-bg: #fdeced;
-	--rf-color-danger-border: #f0b0b5;
-	--rf-color-success: #3d8f65;
-	--rf-color-success-bg: #ecf5ef;
-	--rf-color-success-border: #a8d4b8;
+	/* Semantic — muted earthy band per SPEC-051 */
+	--rf-color-info: #34547a;
+	--rf-color-info-bg: #e8edf4;
+	--rf-color-info-border: #c5d2e0;
+	--rf-color-warning: #9c5a18;
+	--rf-color-warning-bg: #f5ebd9;
+	--rf-color-warning-border: #e0c9a3;
+	--rf-color-danger: #a83232;
+	--rf-color-danger-bg: #f5e0e0;
+	--rf-color-danger-border: #e0b8b8;
+	--rf-color-success: #2d6a3e;
+	--rf-color-success-bg: #e0eee4;
+	--rf-color-success-border: #b8d4be;
 
 	/* Radii */
 	--rf-radius-sm: 6px;
@@ -79,20 +85,35 @@
 	--rf-shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
 
 	/* Code block */
-	--rf-color-code-bg: #1d3557;
-	--rf-color-code-text: #f1faee;
-	--rf-color-inline-code-bg: #f9ebcc;
+	--rf-color-code-bg: #ebeae8;
+	--rf-color-code-text: #1c1a17;
+	--rf-color-code-inline-bg: #e6e5e3;
+	/* Legacy alias — same value, kept for downstream CSS that reads the
+	 * older variable name. Will be removed once the rename is documented
+	 * widely enough that it's safe to drop. */
+	--rf-color-inline-code-bg: #e6e5e3;
 
-	/* Syntax highlighting (Shiki CSS variables) */
-	--shiki-foreground: #f1faee;
-	--shiki-background: #1d3557;
-	--shiki-token-keyword: #f2cc8f;
-	--shiki-token-string: #a8dadc;
-	--shiki-token-string-expression: #a8dadc;
-	--shiki-token-constant: #e8c07a;
-	--shiki-token-comment: #5a7a90;
-	--shiki-token-function: #70b4c0;
-	--shiki-token-parameter: #b8d6e2;
-	--shiki-token-punctuation: #a8dadc;
-	--shiki-token-link: #70b4c0;
+	/* Syntax — the quiet spectrum walk */
+	--rf-syntax-keyword: #2a5c63;
+	--rf-syntax-function: #4a3b6e;
+	--rf-syntax-string: #8a3a3a;
+	--rf-syntax-constant: #876327;
+	--rf-syntax-comment: #8a857d;
+	--rf-syntax-punctuation: #6b6661;
+	--rf-syntax-variable: #1c1a17;
+
+	/* Shiki aliases — Shiki's CSS-variables theme emits `--rf-syntax-token-*`
+	 * with `token-` hardcoded inside its theme builder. We bridge by emitting
+	 * literal hex values matching the contract surface above. */
+	--rf-syntax-foreground: #1c1a17;
+	--rf-syntax-background: #ebeae8;
+	--rf-syntax-token-keyword: #2a5c63;
+	--rf-syntax-token-string: #8a3a3a;
+	--rf-syntax-token-string-expression: #8a3a3a;
+	--rf-syntax-token-constant: #876327;
+	--rf-syntax-token-comment: #8a857d;
+	--rf-syntax-token-function: #4a3b6e;
+	--rf-syntax-token-parameter: #1c1a17;
+	--rf-syntax-token-punctuation: #6b6661;
+	--rf-syntax-token-link: #4a3b6e;
 }

package/tokens/dark.css

@@ -1,47 +1,61 @@
-/* Lumina Theme — Dark Mode Token Overrides */
+/* Lumina Theme — Dark Mode Token Overrides
+ *
+ * Source of truth: packages/lumina/src/tokens.ts (`luminaTokens.modes.dark`).
+ * This file mirrors that overlay verbatim under both selectors
+ * (`[data-theme="dark"]` for user toggles and the `prefers-color-scheme`
+ * media query for system preference). A coverage test keeps the two in
+ * lockstep; drift fails CI. */
 
 [data-theme="dark"] {
-	--rf-color-text: #f1faee;
-	--rf-color-muted: #a8dadc;
-	--rf-color-border: rgba(168, 218, 220, 0.15);
-	--rf-color-bg: #152238;
-	--rf-color-primary: #70b4c0;
-	--rf-color-primary-hover: #a8dadc;
+	--rf-color-text: #f6f4ef;
+	--rf-color-muted: #94908a;
+	--rf-color-border: #2a2825;
+	--rf-color-bg: #1a1a17;
+	--rf-color-primary: #f6f4ef;
+	--rf-color-primary-hover: #d4cfc5;
 
-	--rf-color-surface: #1a2940;
-	--rf-color-surface-hover: #203048;
-	--rf-color-surface-active: #263850;
-	--rf-color-surface-raised: #1a2940;
+	--rf-color-surface: #211f1c;
+	--rf-color-surface-hover: #2a2825;
+	--rf-color-surface-active: #353330;
+	--rf-color-surface-raised: #292723;
 
-	--rf-color-info: #a8dadc;
-	--rf-color-info-bg: rgba(69, 123, 157, 0.12);
-	--rf-color-info-border: rgba(69, 123, 157, 0.3);
-	--rf-color-warning: #e8c07a;
-	--rf-color-warning-bg: rgba(200, 144, 10, 0.12);
-	--rf-color-warning-border: rgba(200, 144, 10, 0.3);
-	--rf-color-danger: #f07078;
-	--rf-color-danger-bg: rgba(230, 57, 70, 0.12);
-	--rf-color-danger-border: rgba(230, 57, 70, 0.3);
-	--rf-color-success: #72c098;
-	--rf-color-success-bg: rgba(61, 143, 101, 0.12);
-	--rf-color-success-border: rgba(61, 143, 101, 0.3);
+	--rf-color-info: #9bb4c7;
+	--rf-color-info-bg: #1f2530;
+	--rf-color-info-border: #3d4655;
+	--rf-color-warning: #d4a868;
+	--rf-color-warning-bg: #2a2519;
+	--rf-color-warning-border: #4a3f2a;
+	--rf-color-danger: #d48888;
+	--rf-color-danger-bg: #2a1818;
+	--rf-color-danger-border: #4a2a2a;
+	--rf-color-success: #7eb398;
+	--rf-color-success-bg: #1a2a1f;
+	--rf-color-success-border: #2a4a35;
 
-	--rf-color-code-bg: #152238;
-	--rf-color-code-text: #f1faee;
-	--rf-color-inline-code-bg: rgba(168, 218, 220, 0.08);
+	--rf-color-code-bg: #222220;
+	--rf-color-code-text: #f6f4ef;
+	--rf-color-code-inline-bg: #2b2b29;
+	--rf-color-inline-code-bg: #2b2b29;
 
-	/* Syntax highlighting (Shiki CSS variables) */
-	--shiki-foreground: #f1faee;
-	--shiki-background: #0c162a;
-	--shiki-token-keyword: #f2cc8f;
-	--shiki-token-string: #a8dadc;
-	--shiki-token-string-expression: #a8dadc;
-	--shiki-token-constant: #e8c07a;
-	--shiki-token-comment: #5a7a90;
-	--shiki-token-function: #a8dadc;
-	--shiki-token-parameter: #b8d6e2;
-	--shiki-token-punctuation: #70b4c0;
-	--shiki-token-link: #a8dadc;
+	--rf-syntax-keyword: #7eb6bc;
+	--rf-syntax-function: #a89bc7;
+	--rf-syntax-string: #c79a9a;
+	--rf-syntax-constant: #d4b07e;
+	--rf-syntax-comment: #6b6661;
+	--rf-syntax-punctuation: #94908a;
+	--rf-syntax-variable: #f6f4ef;
+
+	--rf-syntax-foreground: #f6f4ef;
+	--rf-syntax-background: #222220;
+	--rf-syntax-token-keyword: #7eb6bc;
+	--rf-syntax-token-string: #c79a9a;
+	--rf-syntax-token-string-expression: #c79a9a;
+	--rf-syntax-token-constant: #d4b07e;
+	--rf-syntax-token-comment: #6b6661;
+	--rf-syntax-token-function: #a89bc7;
+	--rf-syntax-token-parameter: #f6f4ef;
+	--rf-syntax-token-punctuation: #94908a;
+	--rf-syntax-token-link: #a89bc7;
 
 	--rf-shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
 	--rf-shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
@@ -52,47 +66,55 @@
 /* Auto dark mode via system preference */
 @media (prefers-color-scheme: dark) {
 	:root:not([data-theme="light"]) {
-		--rf-color-text: #f1faee;
-		--rf-color-muted: #a8dadc;
-		--rf-color-border: rgba(168, 218, 220, 0.15);
-		--rf-color-bg: #152238;
-		--rf-color-primary: #70b4c0;
-		--rf-color-primary-hover: #a8dadc;
+		--rf-color-text: #f6f4ef;
+		--rf-color-muted: #94908a;
+		--rf-color-border: #2a2825;
+		--rf-color-bg: #1a1a17;
+		--rf-color-primary: #f6f4ef;
+		--rf-color-primary-hover: #d4cfc5;
+
+		--rf-color-surface: #211f1c;
+		--rf-color-surface-hover: #2a2825;
+		--rf-color-surface-active: #353330;
+		--rf-color-surface-raised: #292723;
 
-		--rf-color-surface: #1a2940;
-		--rf-color-surface-hover: #203048;
-		--rf-color-surface-active: #263850;
-		--rf-color-surface-raised: #1a2940;
+		--rf-color-info: #9bb4c7;
+		--rf-color-info-bg: #1f2530;
+		--rf-color-info-border: #3d4655;
+		--rf-color-warning: #d4a868;
+		--rf-color-warning-bg: #2a2519;
+		--rf-color-warning-border: #4a3f2a;
+		--rf-color-danger: #d48888;
+		--rf-color-danger-bg: #2a1818;
+		--rf-color-danger-border: #4a2a2a;
+		--rf-color-success: #7eb398;
+		--rf-color-success-bg: #1a2a1f;
+		--rf-color-success-border: #2a4a35;
 
-		--rf-color-info: #a8dadc;
-		--rf-color-info-bg: rgba(69, 123, 157, 0.12);
-		--rf-color-info-border: rgba(69, 123, 157, 0.3);
-		--rf-color-warning: #e8c07a;
-		--rf-color-warning-bg: rgba(200, 144, 10, 0.12);
-		--rf-color-warning-border: rgba(200, 144, 10, 0.3);
-		--rf-color-danger: #f07078;
-		--rf-color-danger-bg: rgba(230, 57, 70, 0.12);
-		--rf-color-danger-border: rgba(230, 57, 70, 0.3);
-		--rf-color-success: #72c098;
-		--rf-color-success-bg: rgba(61, 143, 101, 0.12);
-		--rf-color-success-border: rgba(61, 143, 101, 0.3);
+		--rf-color-code-bg: #222220;
+		--rf-color-code-text: #f6f4ef;
+		--rf-color-code-inline-bg: #2b2b29;
+		--rf-color-inline-code-bg: #2b2b29;
 
-		--rf-color-code-bg: #152238;
-		--rf-color-code-text: #f1faee;
-		--rf-color-inline-code-bg: rgba(168, 218, 220, 0.08);
+		--rf-syntax-keyword: #7eb6bc;
+		--rf-syntax-function: #a89bc7;
+		--rf-syntax-string: #c79a9a;
+		--rf-syntax-constant: #d4b07e;
+		--rf-syntax-comment: #6b6661;
+		--rf-syntax-punctuation: #94908a;
+		--rf-syntax-variable: #f6f4ef;
 
-		/* Syntax highlighting (Shiki CSS variables) */
-		--shiki-foreground: #f1faee;
-		--shiki-background: #0c162a;
-		--shiki-token-keyword: #f2cc8f;
-		--shiki-token-string: #a8dadc;
-		--shiki-token-string-expression: #a8dadc;
-		--shiki-token-constant: #e8c07a;
-		--shiki-token-comment: #5a7a90;
-		--shiki-token-function: #a8dadc;
-		--shiki-token-parameter: #b8d6e2;
-		--shiki-token-punctuation: #70b4c0;
-		--shiki-token-link: #a8dadc;
+		--rf-syntax-foreground: #f6f4ef;
+		--rf-syntax-background: #222220;
+		--rf-syntax-token-keyword: #7eb6bc;
+		--rf-syntax-token-string: #c79a9a;
+		--rf-syntax-token-string-expression: #c79a9a;
+		--rf-syntax-token-constant: #d4b07e;
+		--rf-syntax-token-comment: #6b6661;
+		--rf-syntax-token-function: #a89bc7;
+		--rf-syntax-token-parameter: #f6f4ef;
+		--rf-syntax-token-punctuation: #94908a;
+		--rf-syntax-token-link: #a89bc7;
 
 		--rf-shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
 		--rf-shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);