css-is-awesome 1.19.1 → 1.20.0

package/public/theme.css

@@ -38,14 +38,14 @@
   --ink-soft: light-dark(#1e293b, #e2e8f0);
   --ink-faint: light-dark(#475569, #94a3b8);
   --graphite: light-dark(#0f172a, #f1f5f9);
-  --muted: light-dark(#64748b, #64748b);
+  --muted: light-dark(#718299, #64748b);
   /* Lines */
   --guide: light-dark(#cbd5e1, #334155);
   --guide-soft: light-dark(#e2e8f0, #1e293b);
   --hair: light-dark(#e2e8f0, #1e293b);
   --hair-soft: light-dark(#f1f5f9, #0f172a);
   /* Primary accent */
-  --ai: light-dark(#2563eb, #3b82f6);
+  --ai: light-dark(#2563eb, #3d85f9);
   --ai-ink: light-dark(#1d4ed8, #60a5fa);
   --ai-wash: light-dark(#eff6ff, #1e3a8a);
   /* Seal — red */
@@ -58,9 +58,9 @@
   --code-bg: light-dark(#f8fafc, #020617);
   --code-ink: light-dark(#0f172a, #e2e8f0);
   --code-muted: light-dark(#5E6D83, #6F8098);
-  --code-accent: light-dark(#C1410C, #fb923c);
+  --code-accent: light-dark(#c0400b, #fb923c);
   --code-green: light-dark(#147C3B, #4ade80);
-  --code-blue: light-dark(#2362EB, #60a5fa);
+  --code-blue: light-dark(#2361ea, #60a5fa);
   /* Typography — system stacks, no @import, identical */
   --font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   --font-script: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@@ -139,10 +139,10 @@
   --info-text: light-dark(var(--ai-ink), #85BFFF);
   --success-default: light-dark(#16a34a, #22c55e);
   --success-subtle: light-dark(#f0fdf4, #14532d);
-  --success-text: light-dark(#15803d, #4ade80);
+  --success-text: light-dark(#0e7c3a, #4ade80);
   --warning-default: var(--ochre);
   --warning-subtle: var(--ochre-wash);
-  --warning-text: light-dark(#b45309, #fbbf24);
+  --warning-text: light-dark(#b15003, #fbbf24);
   --error-default: var(--shu);
   --error-subtle: var(--shu-wash);
   --error-text: light-dark(#b91c1c, #fca5a5);
@@ -189,6 +189,12 @@
   --z-modal: 1050;
   --z-popover: 1060;
   --z-tooltip: 1070;
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: light-dark(#f2f6fe, #121e36);
+  --page-hero-ink: light-dark(#0f172a, #f8fafc);
+  --page-band-bg: light-dark(#f7fafe, #111b31);
+  --page-band-ink: light-dark(#0f172a, #f8fafc);
 }
 :root[data-theme=boilerplate-dark] {
   color-scheme: dark;
@@ -202,14 +208,14 @@
   --ink-soft: #e2e8f0;
   --ink-faint: #94a3b8;
   --graphite: #f1f5f9;
-  --muted: #64748b;
+  --muted: #718299;
   /* Lines — dark slate borders */
   --guide: #334155;
   --guide-soft: #1e293b;
   --hair: #1e293b;
   --hair-soft: #0f172a;
   /* Primary accent — brighter blue for dark surfaces */
-  --ai: #3b82f6;
+  --ai: #3d85f9;
   --ai-ink: #60a5fa;
   --ai-wash: #1e3a8a;
   /* Seal — red */
@@ -363,6 +369,12 @@
   --space-7: calc(var(--space-unit) * 24);
   --space-8: calc(var(--space-unit) * 32);
   --space-9: calc(var(--space-unit) * 48);
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: #121e36;
+  --page-hero-ink: #f8fafc;
+  --page-band-bg: #111b31;
+  --page-band-ink: #f8fafc;
 }
 :root[data-theme=boilerplate-light] {
   color-scheme: light;
@@ -395,10 +407,10 @@
   /* Code — neutral light syntax surface */
   --code-bg: #f8fafc;
   --code-ink: #0f172a;
-  --code-muted: #64748b;
-  --code-accent: #c2410c;
-  --code-green: #15803d;
-  --code-blue: #2563eb;
+  --code-muted: #5e6d84;
+  --code-accent: #c04009;
+  --code-green: #0e7c3a;
+  --code-blue: #2461e9;
   /* Typography — system stacks only (no @import) */
   --font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   --font-script: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@@ -484,11 +496,11 @@
   /* Status — success */
   --success-default: #16a34a;
   --success-subtle: #f0fdf4;
-  --success-text: #15803d;
+  --success-text: #0e7c3a;
   /* Status — warning */
   --warning-default: var(--ochre);
   --warning-subtle: var(--ochre-wash);
-  --warning-text: #b45309;
+  --warning-text: #b15003;
   /* Status — error */
   --error-default: var(--shu);
   --error-subtle: var(--shu-wash);
@@ -537,6 +549,12 @@
   --space-7: calc(var(--space-unit) * 24);
   --space-8: calc(var(--space-unit) * 32);
   --space-9: calc(var(--space-unit) * 48);
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: #f2f6fe;
+  --page-hero-ink: #0f172a;
+  --page-band-bg: #f7fafe;
+  --page-band-ink: #0f172a;
 }
 :root[data-theme=cupertino] {
   color-scheme: light dark;
@@ -550,18 +568,18 @@
   --ink-soft: light-dark(#3A3A3C, #C7C7CC);
   --ink-faint: light-dark(#66666B, #98989D);
   --graphite: light-dark(#2C2C2E, #AEAEB2);
-  --muted: light-dark(#6E6E73, #6E6E73);
+  --muted: light-dark(#84858a, #6E6E73);
   /* Hairlines — solid in light, translucent white in dark */
   --guide: light-dark(#D2D2D7, rgba(255, 255, 255, 0.16));
   --guide-soft: light-dark(#E5E5EA, rgba(255, 255, 255, 0.08));
   --hair: light-dark(#D2D2D7, rgba(255, 255, 255, 0.12));
   --hair-soft: light-dark(#E5E5EA, rgba(255, 255, 255, 0.06));
   /* Primary accent — Apple system blue (dark variant brighter) */
-  --ai: light-dark(#005EBB, #0A84FF);
+  --ai: light-dark(#005EBB, #1e8eff);
   --ai-ink: light-dark(#0058B0, #409CFF);
   --ai-wash: light-dark(#E5F0FB, rgba(10, 132, 255, 0.16));
   /* Seal — Apple system red */
-  --shu: light-dark(#FF3B30, #FF453A);
+  --shu: light-dark(#f73229, #FF453A);
   --shu-wash: light-dark(#FFEAE8, rgba(255, 69, 58, 0.16));
   /* Accent — Apple system orange */
   --ochre: light-dark(#FF9F0A, #FF9F0A);
@@ -711,6 +729,12 @@
   --input-radius: var(--r-sm);
   --modal-radius: var(--r-lg);
   --tooltip-radius: var(--r-sm);
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: light-dark(#e6ecf3, #1e252c);
+  --page-hero-ink: light-dark(#1d1d1f, #f5f5f7);
+  --page-band-bg: light-dark(#ecf0f5, #1e2226);
+  --page-band-ink: light-dark(#1d1d1f, #f5f5f7);
 }
 :root[data-theme=cupertino-dark] {
   color-scheme: dark;
@@ -724,14 +748,14 @@
   --ink-soft: #C7C7CC;
   --ink-faint: #98989D;
   --graphite: #AEAEB2;
-  --muted: #6E6E73;
+  --muted: #84858a;
   /* Hairlines / guides — translucent white */
   --guide: rgba(255, 255, 255, 0.16);
   --guide-soft: rgba(255, 255, 255, 0.08);
   --hair: rgba(255, 255, 255, 0.12);
   --hair-soft: rgba(255, 255, 255, 0.06);
   /* Primary accent — Apple system blue (dark variant) */
-  --ai: #0A84FF;
+  --ai: #1e8eff;
   --ai-ink: #409CFF;
   --ai-wash: rgba(10, 132, 255, 0.16);
   /* Seal — Apple system red (dark variant) */
@@ -902,6 +926,12 @@
   --input-radius: var(--r-sm); /* 8px — text field */
   --modal-radius: var(--r-lg); /* matches panel */
   --tooltip-radius: var(--r-sm); /* bezel tooltip */
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: #1e252c;
+  --page-hero-ink: #f5f5f7;
+  --page-band-bg: #1e2226;
+  --page-band-ink: #f5f5f7;
 }
 :root[data-theme=cupertino-light] {
   color-scheme: light;
@@ -926,7 +956,7 @@
   --ai-ink: #0058B0;
   --ai-wash: #E5F0FB;
   /* Seal — system red */
-  --shu: #FF3B30;
+  --shu: #f73229;
   --shu-wash: #FFEAE8;
   /* Accent — system orange / amber */
   --ochre: #FF9F0A;
@@ -1109,6 +1139,12 @@
   --input-radius: var(--r-sm); /* 8px — text field */
   --modal-radius: var(--r-lg); /* matches panel */
   --tooltip-radius: var(--r-sm); /* bezel tooltip */
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: #e6ecf3;
+  --page-hero-ink: #1d1d1f;
+  --page-band-bg: #ecf0f5;
+  --page-band-ink: #1d1d1f;
 }
 :root[data-theme=glass] {
   color-scheme: light dark;
@@ -1122,18 +1158,18 @@
   --ink-soft: light-dark(#3A3A3C, #C8CFE0);
   --ink-faint: light-dark(#65656A, #8A92A8);
   --graphite: light-dark(#2C2C2E, #DCE2F0);
-  --muted: light-dark(#6E6E73, #5A627A);
+  --muted: light-dark(#6E6E73, #727b93);
   /* Construction lines — translucent */
   --guide: light-dark(rgba(29, 29, 31, 0.14), rgba(240, 244, 255, 0.16));
   --guide-soft: light-dark(rgba(29, 29, 31, 0.10), rgba(240, 244, 255, 0.08));
   --hair: light-dark(rgba(29, 29, 31, 0.08), rgba(240, 244, 255, 0.12));
   --hair-soft: light-dark(rgba(29, 29, 31, 0.04), rgba(240, 244, 255, 0.06));
   /* Primary accent — iOS indigo / vibrant dark blue */
-  --ai: light-dark(#5957E2, #6FA9FF);
+  --ai: light-dark(#5653de, #6FA9FF);
   --ai-ink: light-dark(#3634A3, #93C2FF);
   --ai-wash: light-dark(rgba(89, 87, 226, 0.12), rgba(111, 169, 255, 0.16));
   /* Seal — iOS system pink */
-  --shu: light-dark(#FF375F, #FF6B8A);
+  --shu: light-dark(#f32856, #FF6B8A);
   --shu-wash: light-dark(rgba(255, 55, 95, 0.12), rgba(255, 107, 138, 0.16));
   /* Draft / marginalia — iOS orange */
   --ochre: light-dark(#FF9500, #FFC56B);
@@ -1143,7 +1179,7 @@
   --code-ink: light-dark(#F5F5F7, #F0F4FF);
   --code-muted: light-dark(#BCBCC0, #8A92A8);
   --code-accent: #FFD60A;
-  --code-green: light-dark(#30D158, #5FE37F);
+  --code-green: light-dark(#3ad85e, #5FE37F);
   --code-blue: light-dark(#64D2FF, #93C2FF);
   /* Typography — SF stack, identical */
   --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
@@ -1308,6 +1344,12 @@
   --z-modal: 1050;
   --z-popover: 1060;
   --z-tooltip: 1070;
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: light-dark(#ebe5fd, #101828);
+  --page-hero-ink: light-dark(#1d1d1f, #f0f4ff);
+  --page-band-bg: light-dark(#eee9fe, #0e1422);
+  --page-band-ink: light-dark(#1d1d1f, #f0f4ff);
 }
 :root[data-theme=glass-dark] {
   color-scheme: dark;
@@ -1321,7 +1363,7 @@
   --ink-soft: #C8CFE0;
   --ink-faint: #8A92A8;
   --graphite: #DCE2F0;
-  --muted: #5A627A;
+  --muted: #727b93;
   /* Construction lines — translucent white hairlines */
   --guide: rgba(240, 244, 255, 0.16);
   --guide-soft: rgba(240, 244, 255, 0.08);
@@ -1499,6 +1541,12 @@
   --z-modal: 1050;
   --z-popover: 1060;
   --z-tooltip: 1070;
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: #101828;
+  --page-hero-ink: #f0f4ff;
+  --page-band-bg: #0e1422;
+  --page-band-ink: #f0f4ff;
 }
 :root[data-theme=glass-light] {
   color-scheme: light;
@@ -1519,11 +1567,11 @@
   --hair: rgba(29, 29, 31, 0.08);
   --hair-soft: rgba(29, 29, 31, 0.04);
   /* Primary accent — iOS indigo */
-  --ai: #5957E2;
+  --ai: #5653de;
   --ai-ink: #3634A3;
   --ai-wash: rgba(89, 87, 226, 0.12);
   /* Seal — iOS system pink (draft / emphasis) */
-  --shu: #FF375F;
+  --shu: #f32856;
   --shu-wash: rgba(255, 55, 95, 0.12);
   /* Draft / marginalia — iOS orange */
   --ochre: #FF9500;
@@ -1533,7 +1581,7 @@
   --code-ink: #F5F5F7;
   --code-muted: #BABABE;
   --code-accent: #FFD60A;
-  --code-green: #30D158;
+  --code-green: #3ad85e;
   --code-blue: #64D2FF;
   /* Typography — SF system stack */
   --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
@@ -1701,6 +1749,12 @@
   --z-modal: 1050;
   --z-popover: 1060;
   --z-tooltip: 1070;
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: #ebe5fd;
+  --page-hero-ink: #1d1d1f;
+  --page-band-bg: #eee9fe;
+  --page-band-ink: #1d1d1f;
 }
 :root[data-theme=graphite] {
   color-scheme: light dark;
@@ -1714,14 +1768,14 @@
   --ink-soft: light-dark(#3A4048, #C7C7CC);
   --ink-faint: light-dark(#5E646D, #98989D);
   --graphite: light-dark(#2A2F36, #AEAEB2);
-  --muted: light-dark(#878D95, #6A6A6E);
+  --muted: light-dark(#6a7078, #6A6A6E);
   /* Construction lines — translucent ink (light) / translucent white (dark) */
   --guide: light-dark(rgba(26, 31, 38, 0.16), rgba(255, 255, 255, 0.16));
   --guide-soft: light-dark(rgba(26, 31, 38, 0.08), rgba(255, 255, 255, 0.08));
   --hair: light-dark(rgba(26, 31, 38, 0.12), rgba(255, 255, 255, 0.12));
   --hair-soft: light-dark(rgba(26, 31, 38, 0.06), rgba(255, 255, 255, 0.06));
   /* Primary accent — cool blue-gray (light) / Apple dark blue (dark) */
-  --ai: light-dark(#4A6585, #0A84FF);
+  --ai: light-dark(#4A6585, #178aff);
   --ai-ink: light-dark(#2F4866, #409CFF);
   --ai-wash: light-dark(rgba(74, 101, 133, 0.10), rgba(10, 132, 255, 0.14));
   /* Seal */
@@ -1734,8 +1788,8 @@
   --code-bg: light-dark(#F6F7F9, #0D0D0F);
   --code-ink: light-dark(#1A1F26, #E8E8ED);
   --code-muted: light-dark(#666B73, #818186);
-  --code-accent: light-dark(#87652B, #FFB86C);
-  --code-green: light-dark(#3D7746, #A8E6A1);
+  --code-accent: light-dark(#86642a, #FFB86C);
+  --code-green: light-dark(#3d7646, #A8E6A1);
   --code-blue: light-dark(#4A6585, #9AD4F7);
   /* Typography — SF stack, identical */
   --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
@@ -1815,7 +1869,7 @@
   --info-text: light-dark(var(--ai-ink), #409CFF);
   --success-default: light-dark(#28A745, #30D158);
   --success-subtle: light-dark(rgba(40, 167, 69, 0.10), rgba(48, 209, 88, 0.14));
-  --success-text: light-dark(#1B7530, #5FE37F);
+  --success-text: light-dark(#1b7530, #5FE37F);
   --warning-default: var(--ochre);
   --warning-subtle: light-dark(rgba(181, 135, 58, 0.10), rgba(255, 159, 10, 0.14));
   --warning-text: light-dark(#7A5A22, #FFB340);
@@ -1865,6 +1919,12 @@
   --z-modal: 1050;
   --z-popover: 1060;
   --z-tooltip: 1070;
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: light-dark(#e8ebef, #1a212a);
+  --page-hero-ink: light-dark(#1a1f26, #f5f5f7);
+  --page-band-bg: light-dark(#eceff2, #1a1e24);
+  --page-band-ink: light-dark(#1a1f26, #f5f5f7);
 }
 :root[data-theme=graphite-dark] {
   color-scheme: dark;
@@ -1878,14 +1938,14 @@
   --ink-soft: #C7C7CC;
   --ink-faint: #98989D;
   --graphite: #AEAEB2;
-  --muted: #6A6A6E;
+  --muted: #818286;
   /* Construction lines — translucent white hairlines */
   --guide: rgba(255, 255, 255, 0.16);
   --guide-soft: rgba(255, 255, 255, 0.08);
   --hair: rgba(255, 255, 255, 0.12);
   --hair-soft: rgba(255, 255, 255, 0.06);
   /* Primary accent — Apple dark-mode system blue */
-  --ai: #0A84FF;
+  --ai: #178aff;
   --ai-ink: #409CFF;
   --ai-wash: rgba(10, 132, 255, 0.14);
   /* Seal — Apple dark-mode red (reserve for emphasis) */
@@ -2057,6 +2117,12 @@
   --z-modal: 1050;
   --z-popover: 1060;
   --z-tooltip: 1070;
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: #1a212a;
+  --page-hero-ink: #f5f5f7;
+  --page-band-bg: #1a1e24;
+  --page-band-ink: #f5f5f7;
 }
 :root[data-theme=graphite-light] {
   color-scheme: light;
@@ -2070,7 +2136,7 @@
   --ink-soft: #3A4048;
   --ink-faint: #5E646D;
   --graphite: #2A2F36;
-  --muted: #878D95;
+  --muted: #6a7078;
   /* Construction lines — translucent ink hairlines */
   --guide: rgba(26, 31, 38, 0.16);
   --guide-soft: rgba(26, 31, 38, 0.08);
@@ -2091,7 +2157,7 @@
   --code-ink: #1A1F26;
   --code-muted: #656A72;
   --code-accent: #86642B;
-  --code-green: #3F7A48;
+  --code-green: #3c7645;
   --code-blue: #4A6585;
   /* Typography — match Graphite (SF system stack) */
   --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
@@ -2181,7 +2247,7 @@
   /* Status — success (Apple light-mode green) */
   --success-default: #28A745;
   --success-subtle: rgba(40, 167, 69, 0.10);
-  --success-text: #1B7530;
+  --success-text: #1b7530;
   /* Status — warning */
   --warning-default: var(--ochre);
   --warning-subtle: rgba(181, 135, 58, 0.10);
@@ -2239,6 +2305,12 @@
   --z-modal: 1050;
   --z-popover: 1060;
   --z-tooltip: 1070;
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: #e8ebef;
+  --page-hero-ink: #1a1f26;
+  --page-band-bg: #eceff2;
+  --page-band-ink: #1a1f26;
 }
 :root[data-theme=press] {
   color-scheme: light dark;
@@ -2254,9 +2326,9 @@
      ---------------------------------------------------------------- */
   --ink: light-dark(#0A0A0A, #FAFAF7);
   --ink-soft: light-dark(#555, #C8C6C0);
-  --ink-faint: light-dark(#727069, #8A8A86);
+  --ink-faint: light-dark(#6e6c66, #8A8A86);
   --graphite: light-dark(#1A1A1A, #ECEAE4);
-  --muted: light-dark(#8E8C86, #6B6963);
+  --muted: light-dark(#75736e, #6B6963);
   /* Rules / hairlines */
   --guide: light-dark(#1A1A1A, #ECEAE4);
   --guide-soft: light-dark(#D9D7D1, #2A2A2A);
@@ -2471,7 +2543,7 @@
   --ink-soft: #C8C6C0;
   --ink-faint: #8A8A86;
   --graphite: #ECEAE4;
-  --muted: #6B6963;
+  --muted: #7d7b74;
   /* Rules / hairlines — thin editorial rules on dark */
   --guide: #ECEAE4;
   --guide-soft: #2A2A2A;
@@ -2649,6 +2721,12 @@
   --card-border: 1px solid var(--hair); /* thin rule instead */
   --input-radius: var(--r-sm); /* 2px */
   --modal-radius: var(--r-md); /* 3px */
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: #1c1c1c;
+  --page-hero-ink: #fafaf7;
+  --page-band-bg: #161616;
+  --page-band-ink: #fafaf7;
 }
 :root[data-theme=press-light] {
   color-scheme: light;
@@ -2660,9 +2738,9 @@
   /* Ink — warm near-black */
   --ink: #0A0A0A;
   --ink-soft: #555;
-  --ink-faint: #727069;
+  --ink-faint: #6e6c66;
   --graphite: #1A1A1A;
-  --muted: #8E8C86;
+  --muted: #75736e;
   /* Rules / hairlines — thin editorial rules */
   --guide: #1A1A1A;
   --guide-soft: #D9D7D1;
@@ -2859,6 +2937,12 @@
   --card-border: 1px solid var(--hair); /* thin ink rule instead */
   --input-radius: var(--r-sm); /* 2px — text field */
   --modal-radius: var(--r-md); /* 3px — still tight */
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: #ededea;
+  --page-hero-ink: #0a0a0a;
+  --page-band-bg: #f2f2ef;
+  --page-band-ink: #0a0a0a;
 }
 :root[data-theme=prism] {
   color-scheme: light dark;
@@ -2892,7 +2976,7 @@
   --code-bg: light-dark(#fafafa, #0a0a0a);
   --code-ink: light-dark(#18181b, #e4e4e7);
   --code-muted: light-dark(#6B6B73, #808089);
-  --code-accent: light-dark(#C1410C, #fb923c);
+  --code-accent: light-dark(#c0410b, #fb923c);
   --code-green: light-dark(#117D39, #4ade80);
   --code-blue: light-dark(#2462EB, #60a5fa);
   /* Typography — identical across modes */
@@ -2970,7 +3054,7 @@
   --info-text: light-dark(var(--ai-ink), #85BFFF);
   --success-default: light-dark(#16a34a, #22c55e);
   --success-subtle: light-dark(#f0fdf4, #14532d);
-  --success-text: light-dark(#15803d, #4ade80);
+  --success-text: light-dark(#0e7c3a, #4ade80);
   --warning-default: light-dark(#ca8a04, #eab308);
   --warning-subtle: light-dark(#fefce8, #422006);
   --warning-text: light-dark(#854d0e, #fde047);
@@ -3027,6 +3111,12 @@
   --card-border: 1px solid var(--hair);
   --input-radius: var(--r-md);
   --modal-radius: var(--r-lg);
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: light-dark(#f2f6fe, #0c1019);
+  --page-hero-ink: light-dark(#09090b, #fafafa);
+  --page-band-bg: light-dark(#f7fafe, #0b0d13);
+  --page-band-ink: light-dark(#09090b, #fafafa);
 }
 :root[data-theme=prism-dark] {
   color-scheme: dark;
@@ -3210,6 +3300,12 @@
   --card-border: 1px solid var(--hair);
   --input-radius: var(--r-md);
   --modal-radius: var(--r-lg);
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: #0c1019;
+  --page-hero-ink: #fafafa;
+  --page-band-bg: #0b0d13;
+  --page-band-ink: #fafafa;
 }
 :root[data-theme=prism-light] {
   color-scheme: light;
@@ -3242,10 +3338,10 @@
   /* Code — light syntax surface */
   --code-bg: #fafafa;
   --code-ink: #18181b;
-  --code-muted: #71717a;
-  --code-accent: #c2410c;
+  --code-muted: #6c6b74;
+  --code-accent: #c1400b;
   --code-green: #117C38;
-  --code-blue: #2563eb;
+  --code-blue: #2462e9;
   /* Typography */
   --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   --font-script: 'Inter', cursive;
@@ -3331,7 +3427,7 @@
   /* Status — success */
   --success-default: #16a34a;
   --success-subtle: #f0fdf4;
-  --success-text: #15803d;
+  --success-text: #0e7c3a;
   /* Status — warning */
   --warning-default: #ca8a04;
   --warning-subtle: #fefce8;
@@ -3393,6 +3489,12 @@
   --card-border: 1px solid var(--hair);
   --input-radius: var(--r-md);
   --modal-radius: var(--r-lg);
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: #f2f6fe;
+  --page-hero-ink: #09090b;
+  --page-band-bg: #f7fafe;
+  --page-band-ink: #09090b;
 }
 :root[data-theme=sketchbook] {
   color-scheme: light dark;
@@ -3404,9 +3506,9 @@
   /* Ink — warm pencil + sumi / warm cream */
   --ink: light-dark(#2A241E, #F4EFE2);
   --ink-soft: light-dark(#4A4037, #D8D0BE);
-  --ink-faint: light-dark(#726858, #A89E89);
+  --ink-faint: light-dark(#706757, #A89E89);
   --graphite: light-dark(#3A332B, #E8E0CE);
-  --muted: light-dark(#948977, #7A715F);
+  --muted: light-dark(#786e5d, #89806d);
   /* Construction lines */
   --guide: light-dark(#C9BDA5, #4A4239);
   --guide-soft: light-dark(#DDD4C0, #382F27);
@@ -3554,6 +3656,12 @@
   --z-modal: 1050;
   --z-popover: 1060;
   --z-tooltip: 1070;
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: light-dark(#eae8e2, #1f1f1f);
+  --page-hero-ink: light-dark(#2a241e, #f4efe2);
+  --page-band-bg: light-dark(#efede5, #1d1c1b);
+  --page-band-ink: light-dark(#2a241e, #f4efe2);
 }
 :root[data-theme=sketchbook-dark] {
   color-scheme: dark;
@@ -3567,7 +3675,7 @@
   --ink-soft: #D8D0BE;
   --ink-faint: #A89E89;
   --graphite: #E8E0CE;
-  --muted: #7A715F;
+  --muted: #89806d;
   /* Construction lines — warm dark hairlines */
   --guide: #4A4239;
   --guide-soft: #382F27;
@@ -3736,6 +3844,12 @@
   --z-modal: 1050;
   --z-popover: 1060;
   --z-tooltip: 1070;
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: #1f1f1f;
+  --page-hero-ink: #f4efe2;
+  --page-band-bg: #1d1c1b;
+  --page-band-ink: #f4efe2;
 }
 :root[data-theme=sketchbook-light] {
   color-scheme: light;
@@ -3747,9 +3861,9 @@
   /* Ink — warm pencil + sumi */
   --ink: #2A241E;
   --ink-soft: #4A4037;
-  --ink-faint: #726858;
+  --ink-faint: #706757;
   --graphite: #3A332B;
-  --muted: #948977;
+  --muted: #786e5d;
   /* Construction lines */
   --guide: #C9BDA5;
   --guide-soft: #DDD4C0;
@@ -3927,6 +4041,12 @@
   --space-7: calc(var(--space-unit) * 24);
   --space-8: calc(var(--space-unit) * 32);
   --space-9: calc(var(--space-unit) * 48);
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: #eae8e2;
+  --page-hero-ink: #2a241e;
+  --page-band-bg: #efede5;
+  --page-band-ink: #2a241e;
 }
 :root[data-theme=terminal] {
   color-scheme: dark;
@@ -3937,7 +4057,7 @@
   --paper-glass: rgba(79, 224, 120, 0.06);
   /* Ink — phosphor green on the tube */
   --ink: #4FE078;
-  --ink-soft: #2A8B42;
+  --ink-soft: #34944a;
   --ink-faint: #3DAF4F;
   --graphite: #1A3D22;
   --muted: #2A8B42;
@@ -4095,6 +4215,12 @@
   --input-radius: 0;
   --card-shadow: var(--glow-sm);
   --card-border: 1px solid var(--ink-faint);
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: #111a19;
+  --page-hero-ink: #4fe078;
+  --page-band-bg: #0e1513;
+  --page-band-ink: #4fe078;
 }
 :root[data-theme=terminal-dark] {
   color-scheme: dark;
@@ -4105,7 +4231,7 @@
   --paper-glass: rgba(79, 224, 120, 0.06);
   /* Ink — phosphor green on the tube */
   --ink: #4FE078;
-  --ink-soft: #2A8B42;
+  --ink-soft: #34944a;
   --ink-faint: #3DAF4F;
   --graphite: #1A3D22;
   --muted: #2A8B42;
@@ -4127,7 +4253,7 @@
   /* Code surface */
   --code-bg: #070A07;
   --code-ink: #4FE078;
-  --code-muted: #2A8B42;
+  --code-muted: #329248;
   --code-accent: #F0A030;
   --code-green: #8FFCA8;
   --code-blue: #7FDBFF;
@@ -4298,6 +4424,12 @@
   --input-radius: 0;
   --card-shadow: var(--glow-sm);
   --card-border: 1px solid var(--ink-faint);
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: #111a19;
+  --page-hero-ink: #4fe078;
+  --page-band-bg: #0e1513;
+  --page-band-ink: #4fe078;
 }
 :root[data-theme=terminal-light] {
   color-scheme: light;
@@ -4309,9 +4441,9 @@
   /* Ink — near-black mono */
   --ink: #1A1A1A;
   --ink-soft: #404040;
-  --ink-faint: #666;
+  --ink-faint: #626161;
   --graphite: #0A0A0A;
-  --muted: #7C7C7C;
+  --muted: #696868;
   /* Hairlines — medium gray */
   --guide: #B8B8B8;
   --guide-soft: #C8C8C8;
@@ -4330,9 +4462,9 @@
   /* Code surface */
   --code-bg: #DDD;
   --code-ink: #1A1A1A;
-  --code-muted: #5B5B5B;
+  --code-muted: #5b5a5a;
   --code-accent: #934407;
-  --code-green: #006A28;
+  --code-green: #006928;
   --code-blue: #0451A5;
   /* Typography — mono everywhere */
   --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', ui-monospace, Consolas, Menlo, 'Courier New', monospace;
@@ -4459,4 +4591,10 @@
   --z-modal: 1050;
   --z-popover: 1060;
   --z-tooltip: 1070;
+
+  /* page surfaces — derived, see scripts/derive-page-surfaces.mjs */
+  --page-hero-bg: #dadfe4;
+  --page-hero-ink: #1a1a1a;
+  --page-band-bg: #e0e3e6;
+  --page-band-ink: #1a1a1a;
 }