@cyberskill/design 2.0.0 → 2.2.0

package/tokens/elements.css

@@ -16,7 +16,7 @@
  * Generative cycle (Tương sinh) only for grad-b: Mộc→Hỏa→Thổ→Kim→Thủy→Mộc. */
 :root {
   --cs-accent: #F4BA17;
-  --cs-accent-strong: #916D10;
+  --cs-accent-strong: #916D11;
   --cs-accent-bright: #F4BA17;
   --cs-accent-on: #45210E;
   --cs-accent-on-strong: #FFFFFF;
@@ -24,7 +24,7 @@
   --cs-accent-ink: #45210E;
   --cs-accent-glow: rgba(244, 186, 23, 0.48);
   --cs-accent-grad-a: #F4BA17;
-  --cs-accent-grad-b: #F3B958;
+  --cs-accent-grad-b: #C4B78F;
 }
 
 /* ---- Aurora washes ---- */
@@ -119,8 +119,8 @@
   --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62);
   --_cs-light-accent: #F4BA17;
   --_cs-dark-accent: #F4BA17;
-  --_cs-light-accent-strong: #916D10;
-  --_cs-dark-accent-strong: #916D10;
+  --_cs-light-accent-strong: #916D11;
+  --_cs-dark-accent-strong: #916D11;
   --_cs-light-accent-bright: #F4BA17;
   --_cs-dark-accent-bright: #F4BA17;
   --_cs-light-accent-on: #45210E;
@@ -135,8 +135,8 @@
   --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48);
   --_cs-light-accent-grad-a: #F4BA17;
   --_cs-dark-accent-grad-a: #F4BA17;
-  --_cs-light-accent-grad-b: #F3B958;
-  --_cs-dark-accent-grad-b: #F3B958;
+  --_cs-light-accent-grad-b: #C4B78F;
+  --_cs-dark-accent-grad-b: #C4B78F;
   --_cs-standard: initial;
   --_cs-high: ;
 }
@@ -153,30 +153,30 @@
 [data-cs-contrast="high"] { --_cs-standard: ; --_cs-high: initial; }
 
 [data-cs-element="tho"][data-cs-variant="sand"] {
-  --_cs-light-accent: #F8E9C0;
-  --_cs-dark-accent: #F8E9C0;
-  --_cs-light-accent-strong: #80724E;
-  --_cs-dark-accent-strong: #665A37;
-  --_cs-light-accent-bright: #F6EBCC;
-  --_cs-dark-accent-bright: #F6EBCC;
-  --_cs-light-accent-on: #292414;
+  --_cs-light-accent: #F9E3A7;
+  --_cs-dark-accent: #E6CD88;
+  --_cs-light-accent-strong: #856A03;
+  --_cs-dark-accent-strong: #80671A;
+  --_cs-light-accent-bright: #FDEAB7;
+  --_cs-dark-accent-bright: #F9E5AE;
+  --_cs-light-accent-on: #271E06;
   --_cs-dark-accent-on: #f5ead9;
   --_cs-light-accent-on-strong: #FFFFFF;
   --_cs-dark-accent-on-strong: #FFFFFF;
-  --_cs-light-accent-tint: #FBF7EA;
-  --_cs-dark-accent-tint: #332701;
-  --_cs-light-accent-ink: #292414;
-  --_cs-dark-accent-ink: #F6EBCC;
-  --_cs-light-accent-glow: rgba(248, 233, 192, 0.48);
-  --_cs-dark-accent-glow: rgba(248, 233, 192, 0.48);
-  --_cs-light-accent-grad-a: #F8E9C0;
-  --_cs-dark-accent-grad-a: #F8E9C0;
-  --_cs-light-accent-grad-b: #F3B958;
-  --_cs-dark-accent-grad-b: #F3B958;
-  --_cs-light-color-text-accent: #625431;
-  --_cs-dark-color-text-accent: #F6EBCC;
-  --_cs-light-color-link: #625431;
-  --_cs-dark-color-link: #F6EBCC;
+  --_cs-light-accent-tint: #FEF8E7;
+  --_cs-dark-accent-tint: #342C15;
+  --_cs-light-accent-ink: #292108;
+  --_cs-dark-accent-ink: #F9E5AE;
+  --_cs-light-accent-glow: rgba(249, 227, 167, 0.48);
+  --_cs-dark-accent-glow: rgba(249, 227, 167, 0.48);
+  --_cs-light-accent-grad-a: #F9E3A7;
+  --_cs-dark-accent-grad-a: #F9E3A7;
+  --_cs-light-accent-grad-b: #C4B78F;
+  --_cs-dark-accent-grad-b: #C4B78F;
+  --_cs-light-color-text-accent: #695300;
+  --_cs-dark-color-text-accent: #F9E5AE;
+  --_cs-light-color-link: #695300;
+  --_cs-dark-color-link: #F9E5AE;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -187,37 +187,37 @@
   --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
   --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
   --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
-  --_cs-light-component-button-primary-bg: #45210E;
-  --_cs-dark-component-button-primary-bg: #665A37;
+  --_cs-light-component-button-primary-bg: #856A03;
+  --_cs-dark-component-button-primary-bg: #80671A;
   --_cs-light-component-button-primary-fg: #FFFFFF;
   --_cs-dark-component-button-primary-fg: #FFFFFF;
 }
 
 [data-cs-element="tho"] {
   --_cs-light-accent: #F4BA17;
-  --_cs-dark-accent: #F4BA17;
-  --_cs-light-accent-strong: #916D10;
-  --_cs-dark-accent-strong: #73560B;
+  --_cs-dark-accent: #E9B321;
+  --_cs-light-accent-strong: #916D11;
+  --_cs-dark-accent-strong: #6E5205;
   --_cs-light-accent-bright: #F4BA17;
-  --_cs-dark-accent-bright: #FEC42C;
+  --_cs-dark-accent-bright: #FDD378;
   --_cs-light-accent-on: #45210E;
   --_cs-dark-accent-on: #f5ead9;
   --_cs-light-accent-on-strong: #FFFFFF;
   --_cs-dark-accent-on-strong: #FFFFFF;
   --_cs-light-accent-tint: #FBF4E9;
-  --_cs-dark-accent-tint: #352602;
+  --_cs-dark-accent-tint: #2B1E00;
   --_cs-light-accent-ink: #45210E;
-  --_cs-dark-accent-ink: #FECD5E;
+  --_cs-dark-accent-ink: #FDD378;
   --_cs-light-accent-glow: rgba(244, 186, 23, 0.48);
   --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48);
   --_cs-light-accent-grad-a: #F4BA17;
   --_cs-dark-accent-grad-a: #F4BA17;
-  --_cs-light-accent-grad-b: #F3B958;
-  --_cs-dark-accent-grad-b: #F3B958;
+  --_cs-light-accent-grad-b: #C4B78F;
+  --_cs-dark-accent-grad-b: #C4B78F;
   --_cs-light-color-text-accent: #6E3B0E;
-  --_cs-dark-color-text-accent: #FED57C;
+  --_cs-dark-color-text-accent: #FFD57A;
   --_cs-light-color-link: #644A05;
-  --_cs-dark-color-link: #FED57C;
+  --_cs-dark-color-link: #FFD57A;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -229,36 +229,36 @@
   --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
   --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
   --_cs-light-component-button-primary-bg: #45210E;
-  --_cs-dark-component-button-primary-bg: #73560B;
+  --_cs-dark-component-button-primary-bg: #6E5205;
   --_cs-light-component-button-primary-fg: #FFFFFF;
   --_cs-dark-component-button-primary-fg: #FFFFFF;
 }
 
 [data-cs-element="tho"][data-cs-variant="clay"] {
-  --_cs-light-accent: #513801;
-  --_cs-dark-accent: #CDB07E;
-  --_cs-light-accent-strong: #201300;
-  --_cs-dark-accent-strong: #1F1300;
-  --_cs-light-accent-bright: #DEC7A2;
-  --_cs-dark-accent-bright: #E4CDA8;
-  --_cs-light-accent-on: #2D220E;
+  --_cs-light-accent: #723E06;
+  --_cs-dark-accent: #E0A97C;
+  --_cs-light-accent-strong: #5A3004;
+  --_cs-dark-accent-strong: #5C3001;
+  --_cs-light-accent-bright: #F2C5A3;
+  --_cs-dark-accent-bright: #F8C7A1;
+  --_cs-light-accent-on: #080200;
   --_cs-dark-accent-on: #f5ead9;
   --_cs-light-accent-on-strong: #FFFFFF;
   --_cs-dark-accent-on-strong: #FFFFFF;
-  --_cs-light-accent-tint: #FFF6E7;
-  --_cs-dark-accent-tint: #372502;
-  --_cs-light-accent-ink: #2D220E;
-  --_cs-dark-accent-ink: #E7D0AB;
-  --_cs-light-accent-glow: rgba(81, 56, 1, 0.48);
-  --_cs-dark-accent-glow: rgba(81, 56, 1, 0.48);
-  --_cs-light-accent-grad-a: #513801;
-  --_cs-dark-accent-grad-a: #513801;
-  --_cs-light-accent-grad-b: #F3B958;
-  --_cs-dark-accent-grad-b: #F3B958;
-  --_cs-light-color-text-accent: #201300;
-  --_cs-dark-color-text-accent: #EED7B1;
-  --_cs-light-color-link: #201300;
-  --_cs-dark-color-link: #EED7B1;
+  --_cs-light-accent-tint: #FCEEE3;
+  --_cs-dark-accent-tint: #220F01;
+  --_cs-light-accent-ink: #321B07;
+  --_cs-dark-accent-ink: #FBCAA4;
+  --_cs-light-accent-glow: rgba(114, 62, 6, 0.48);
+  --_cs-dark-accent-glow: rgba(114, 62, 6, 0.48);
+  --_cs-light-accent-grad-a: #723E06;
+  --_cs-dark-accent-grad-a: #723E06;
+  --_cs-light-accent-grad-b: #C4B78F;
+  --_cs-dark-accent-grad-b: #C4B78F;
+  --_cs-light-color-text-accent: #462402;
+  --_cs-dark-color-text-accent: #FFD2AF;
+  --_cs-light-color-link: #462402;
+  --_cs-dark-color-link: #FFD2AF;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -269,37 +269,37 @@
   --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
   --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
   --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
-  --_cs-light-component-button-primary-bg: #45210E;
-  --_cs-dark-component-button-primary-bg: #1F1300;
+  --_cs-light-component-button-primary-bg: #5A3004;
+  --_cs-dark-component-button-primary-bg: #5C3001;
   --_cs-light-component-button-primary-fg: #FFFFFF;
   --_cs-dark-component-button-primary-fg: #FFFFFF;
 }
 
 [data-cs-element="hoa"][data-cs-variant="plasma"] {
-  --_cs-light-accent: #FFE1D8;
-  --_cs-dark-accent: #FFE1D8;
-  --_cs-light-accent-strong: #856E68;
-  --_cs-dark-accent-strong: #6F5750;
-  --_cs-light-accent-bright: #FCE6DF;
-  --_cs-dark-accent-bright: #FCE6DF;
-  --_cs-light-accent-on: #2C211E;
+  --_cs-light-accent: #FEDBDC;
+  --_cs-dark-accent: #EBC4C5;
+  --_cs-light-accent-strong: #896163;
+  --_cs-dark-accent-strong: #836061;
+  --_cs-light-accent-bright: #FFE3E4;
+  --_cs-dark-accent-bright: #FDDDDE;
+  --_cs-light-accent-on: #281B1C;
   --_cs-dark-accent-on: #f5ead9;
   --_cs-light-accent-on-strong: #FFFFFF;
   --_cs-dark-accent-on-strong: #FFFFFF;
-  --_cs-light-accent-tint: #FEF4F2;
-  --_cs-dark-accent-tint: #38231C;
-  --_cs-light-accent-ink: #2C211E;
-  --_cs-dark-accent-ink: #FCE6DF;
-  --_cs-light-accent-glow: rgba(255, 225, 216, 0.48);
-  --_cs-dark-accent-glow: rgba(255, 225, 216, 0.48);
-  --_cs-light-accent-grad-a: #FFE1D8;
-  --_cs-dark-accent-grad-a: #FFE1D8;
+  --_cs-light-accent-tint: #FFF5F5;
+  --_cs-dark-accent-tint: #352929;
+  --_cs-light-accent-ink: #2B1E1E;
+  --_cs-dark-accent-ink: #FDDDDE;
+  --_cs-light-accent-glow: rgba(254, 219, 220, 0.48);
+  --_cs-dark-accent-glow: rgba(254, 219, 220, 0.48);
+  --_cs-light-accent-grad-a: #FEDBDC;
+  --_cs-dark-accent-grad-a: #FEDBDC;
   --_cs-light-accent-grad-b: #F4BA17;
   --_cs-dark-accent-grad-b: #F4BA17;
-  --_cs-light-color-text-accent: #66504B;
-  --_cs-dark-color-text-accent: #FCE6DF;
-  --_cs-light-color-link: #66504B;
-  --_cs-dark-color-link: #FCE6DF;
+  --_cs-light-color-text-accent: #714B4D;
+  --_cs-dark-color-text-accent: #FDDDDE;
+  --_cs-light-color-link: #714B4D;
+  --_cs-dark-color-link: #FDDDDE;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -310,37 +310,37 @@
   --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
   --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
   --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
-  --_cs-light-component-button-primary-bg: #45210E;
-  --_cs-dark-component-button-primary-bg: #6F5750;
+  --_cs-light-component-button-primary-bg: #896163;
+  --_cs-dark-component-button-primary-bg: #836061;
   --_cs-light-component-button-primary-fg: #FFFFFF;
   --_cs-dark-component-button-primary-fg: #FFFFFF;
 }
 
 [data-cs-element="hoa"] {
-  --_cs-light-accent: #FCAF91;
-  --_cs-dark-accent: #FCAF91;
-  --_cs-light-accent-strong: #A46146;
-  --_cs-dark-accent-strong: #8A4A30;
-  --_cs-light-accent-bright: #FED3C3;
-  --_cs-dark-accent-bright: #FED3C3;
-  --_cs-light-accent-on: #381B10;
+  --_cs-light-accent: #FC9C69;
+  --_cs-dark-accent: #FEA272;
+  --_cs-light-accent-strong: #96440B;
+  --_cs-dark-accent-strong: #883E0D;
+  --_cs-light-accent-bright: #FFD3BD;
+  --_cs-dark-accent-bright: #FECDB4;
+  --_cs-light-accent-on: #361402;
   --_cs-dark-accent-on: #f5ead9;
   --_cs-light-accent-on-strong: #FFFFFF;
   --_cs-dark-accent-on-strong: #FFFFFF;
-  --_cs-light-accent-tint: #FFF4F0;
-  --_cs-dark-accent-tint: #411E0F;
-  --_cs-light-accent-ink: #381B10;
-  --_cs-dark-accent-ink: #FED3C3;
-  --_cs-light-accent-glow: rgba(252, 175, 145, 0.48);
-  --_cs-dark-accent-glow: rgba(252, 175, 145, 0.48);
-  --_cs-light-accent-grad-a: #FCAF91;
-  --_cs-dark-accent-grad-a: #FCAF91;
+  --_cs-light-accent-tint: #FFF1EA;
+  --_cs-dark-accent-tint: #351706;
+  --_cs-light-accent-ink: #3A1501;
+  --_cs-dark-accent-ink: #FECDB4;
+  --_cs-light-accent-glow: rgba(252, 156, 105, 0.48);
+  --_cs-dark-accent-glow: rgba(252, 156, 105, 0.48);
+  --_cs-light-accent-grad-a: #FC9C69;
+  --_cs-dark-accent-grad-a: #FC9C69;
   --_cs-light-accent-grad-b: #F4BA17;
   --_cs-dark-accent-grad-b: #F4BA17;
-  --_cs-light-color-text-accent: #793B20;
-  --_cs-dark-color-text-accent: #FED3C3;
-  --_cs-light-color-link: #793B20;
-  --_cs-dark-color-link: #FED3C3;
+  --_cs-light-color-text-accent: #793609;
+  --_cs-dark-color-text-accent: #FFD1BA;
+  --_cs-light-color-link: #793609;
+  --_cs-dark-color-link: #FFD1BA;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -351,37 +351,37 @@
   --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
   --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
   --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
-  --_cs-light-component-button-primary-bg: #45210E;
-  --_cs-dark-component-button-primary-bg: #8A4A30;
+  --_cs-light-component-button-primary-bg: #96440B;
+  --_cs-dark-component-button-primary-bg: #883E0D;
   --_cs-light-component-button-primary-fg: #FFFFFF;
   --_cs-dark-component-button-primary-fg: #FFFFFF;
 }
 
 [data-cs-element="hoa"][data-cs-variant="lava"] {
-  --_cs-light-accent: #622B06;
-  --_cs-dark-accent: #E8A683;
-  --_cs-light-accent-strong: #280D00;
-  --_cs-dark-accent-strong: #280D00;
-  --_cs-light-accent-bright: #F1BEA4;
-  --_cs-dark-accent-bright: #F8C4AA;
-  --_cs-light-accent-on: #361D0F;
+  --_cs-light-accent: #93050F;
+  --_cs-dark-accent: #FC9A8F;
+  --_cs-light-accent-strong: #760008;
+  --_cs-dark-accent-strong: #6D1D19;
+  --_cs-light-accent-bright: #FFBCB4;
+  --_cs-dark-accent-bright: #FFC1B9;
+  --_cs-light-accent-on: #0D0000;
   --_cs-dark-accent-on: #f5ead9;
   --_cs-light-accent-on-strong: #FFFFFF;
   --_cs-dark-accent-on-strong: #FFFFFF;
-  --_cs-light-accent-tint: #FFF4EF;
-  --_cs-dark-accent-tint: #401F0B;
-  --_cs-light-accent-ink: #361D0F;
-  --_cs-dark-accent-ink: #FBC7AD;
-  --_cs-light-accent-glow: rgba(98, 43, 6, 0.48);
-  --_cs-dark-accent-glow: rgba(98, 43, 6, 0.48);
-  --_cs-light-accent-grad-a: #622B06;
-  --_cs-dark-accent-grad-a: #622B06;
+  --_cs-light-accent-tint: #FFEBE9;
+  --_cs-dark-accent-tint: #2A0806;
+  --_cs-light-accent-ink: #400C0B;
+  --_cs-dark-accent-ink: #FFC6BF;
+  --_cs-light-accent-glow: rgba(147, 5, 15, 0.48);
+  --_cs-dark-accent-glow: rgba(147, 5, 15, 0.48);
+  --_cs-light-accent-grad-a: #93050F;
+  --_cs-dark-accent-grad-a: #93050F;
   --_cs-light-accent-grad-b: #F4BA17;
   --_cs-dark-accent-grad-b: #F4BA17;
-  --_cs-light-color-text-accent: #280D00;
-  --_cs-dark-color-text-accent: #FED1BB;
-  --_cs-light-color-link: #280D00;
-  --_cs-dark-color-link: #FED1BB;
+  --_cs-light-color-text-accent: #550306;
+  --_cs-dark-color-text-accent: #FDD0CA;
+  --_cs-light-color-link: #550306;
+  --_cs-dark-color-link: #FDD0CA;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -392,37 +392,37 @@
   --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
   --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
   --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
-  --_cs-light-component-button-primary-bg: #45210E;
-  --_cs-dark-component-button-primary-bg: #280D00;
+  --_cs-light-component-button-primary-bg: #760008;
+  --_cs-dark-component-button-primary-bg: #6D1D19;
   --_cs-light-component-button-primary-fg: #FFFFFF;
   --_cs-dark-component-button-primary-fg: #FFFFFF;
 }
 
 [data-cs-element="thuy"][data-cs-variant="mist"] {
-  --_cs-light-accent: #C0F5FC;
-  --_cs-dark-accent: #C0F5FC;
-  --_cs-light-accent-strong: #4B7B81;
-  --_cs-dark-accent-strong: #316167;
-  --_cs-light-accent-bright: #CDF4F9;
-  --_cs-dark-accent-bright: #CDF4F9;
-  --_cs-light-accent-on: #13282B;
+  --_cs-light-accent: #9DF7F5;
+  --_cs-dark-accent: #79E4E2;
+  --_cs-light-accent-strong: #037D7D;
+  --_cs-dark-accent-strong: #077A79;
+  --_cs-light-accent-bright: #B1FBF9;
+  --_cs-dark-accent-bright: #A6F8F6;
+  --_cs-light-accent-on: #012525;
   --_cs-dark-accent-on: #f5ead9;
   --_cs-light-accent-on-strong: #FFFFFF;
   --_cs-dark-accent-on-strong: #FFFFFF;
-  --_cs-light-accent-tint: #EBFAFC;
-  --_cs-dark-accent-tint: #022F34;
-  --_cs-light-accent-ink: #13282B;
-  --_cs-dark-accent-ink: #CDF4F9;
-  --_cs-light-accent-glow: rgba(192, 245, 252, 0.48);
-  --_cs-dark-accent-glow: rgba(192, 245, 252, 0.48);
-  --_cs-light-accent-grad-a: #C0F5FC;
-  --_cs-dark-accent-grad-a: #C0F5FC;
-  --_cs-light-accent-grad-b: #A3D768;
-  --_cs-dark-accent-grad-b: #A3D768;
-  --_cs-light-color-text-accent: #2E5E64;
-  --_cs-dark-color-text-accent: #CDF4F9;
-  --_cs-light-color-link: #2E5E64;
-  --_cs-dark-color-link: #CDF4F9;
+  --_cs-light-accent-tint: #E6FDFC;
+  --_cs-dark-accent-tint: #0D3333;
+  --_cs-light-accent-ink: #032727;
+  --_cs-dark-accent-ink: #A6F8F6;
+  --_cs-light-accent-glow: rgba(157, 247, 245, 0.48);
+  --_cs-dark-accent-glow: rgba(157, 247, 245, 0.48);
+  --_cs-light-accent-grad-a: #9DF7F5;
+  --_cs-dark-accent-grad-a: #9DF7F5;
+  --_cs-light-accent-grad-b: #82CF66;
+  --_cs-dark-accent-grad-b: #82CF66;
+  --_cs-light-color-text-accent: #116060;
+  --_cs-dark-color-text-accent: #A6F8F6;
+  --_cs-light-color-link: #116060;
+  --_cs-dark-color-link: #A6F8F6;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -433,37 +433,37 @@
   --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
   --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
   --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
-  --_cs-light-component-button-primary-bg: #45210E;
-  --_cs-dark-component-button-primary-bg: #316167;
+  --_cs-light-component-button-primary-bg: #037D7D;
+  --_cs-dark-component-button-primary-bg: #077A79;
   --_cs-light-component-button-primary-fg: #FFFFFF;
   --_cs-dark-component-button-primary-fg: #FFFFFF;
 }
 
 [data-cs-element="thuy"] {
-  --_cs-light-accent: #2EDBF7;
-  --_cs-dark-accent: #2EDBF7;
-  --_cs-light-accent-strong: #0B7E8E;
-  --_cs-dark-accent-strong: #046270;
-  --_cs-light-accent-bright: #99EEFF;
-  --_cs-dark-accent-bright: #99EEFF;
-  --_cs-light-accent-on: #012A30;
+  --_cs-light-accent: #00CEE4;
+  --_cs-dark-accent: #32D2E7;
+  --_cs-light-accent-strong: #166B76;
+  --_cs-dark-accent-strong: #04626D;
+  --_cs-light-accent-bright: #94EFFD;
+  --_cs-dark-accent-bright: #79EDFF;
+  --_cs-light-accent-on: #012429;
   --_cs-dark-accent-on: #f5ead9;
   --_cs-light-accent-on-strong: #FFFFFF;
   --_cs-dark-accent-on-strong: #FFFFFF;
-  --_cs-light-accent-tint: #E7FBFF;
-  --_cs-dark-accent-tint: #032F36;
-  --_cs-light-accent-ink: #012A30;
-  --_cs-dark-accent-ink: #99EEFF;
-  --_cs-light-accent-glow: rgba(46, 219, 247, 0.48);
-  --_cs-dark-accent-glow: rgba(46, 219, 247, 0.48);
-  --_cs-light-accent-grad-a: #2EDBF7;
-  --_cs-dark-accent-grad-a: #2EDBF7;
-  --_cs-light-accent-grad-b: #A3D768;
-  --_cs-dark-accent-grad-b: #A3D768;
-  --_cs-light-color-text-accent: #035763;
-  --_cs-dark-color-text-accent: #99EEFF;
-  --_cs-light-color-link: #035763;
-  --_cs-dark-color-link: #99EEFF;
+  --_cs-light-accent-tint: #DFFBFF;
+  --_cs-dark-accent-tint: #03252A;
+  --_cs-light-accent-ink: #03272C;
+  --_cs-dark-accent-ink: #79EDFF;
+  --_cs-light-accent-glow: rgba(0, 206, 228, 0.48);
+  --_cs-dark-accent-glow: rgba(0, 206, 228, 0.48);
+  --_cs-light-accent-grad-a: #00CEE4;
+  --_cs-dark-accent-grad-a: #00CEE4;
+  --_cs-light-accent-grad-b: #82CF66;
+  --_cs-dark-accent-grad-b: #82CF66;
+  --_cs-light-color-text-accent: #0D535C;
+  --_cs-dark-color-text-accent: #79EDFF;
+  --_cs-light-color-link: #0D535C;
+  --_cs-dark-color-link: #79EDFF;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -474,37 +474,37 @@
   --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
   --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
   --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
-  --_cs-light-component-button-primary-bg: #45210E;
-  --_cs-dark-component-button-primary-bg: #046270;
+  --_cs-light-component-button-primary-bg: #166B76;
+  --_cs-dark-component-button-primary-bg: #04626D;
   --_cs-light-component-button-primary-fg: #FFFFFF;
   --_cs-dark-component-button-primary-fg: #FFFFFF;
 }
 
 [data-cs-element="thuy"][data-cs-variant="ocean"] {
-  --_cs-light-accent: #004554;
-  --_cs-dark-accent: #82BCCD;
-  --_cs-light-accent-strong: #011A21;
-  --_cs-dark-accent-strong: #011A21;
-  --_cs-light-accent-bright: #A8D3E0;
-  --_cs-dark-accent-bright: #ABD6E3;
-  --_cs-light-accent-on: #10282F;
+  --_cs-light-accent: #06556F;
+  --_cs-dark-accent: #80BDD8;
+  --_cs-light-accent-strong: #034257;
+  --_cs-dark-accent-strong: #00445A;
+  --_cs-light-accent-bright: #A9D8ED;
+  --_cs-dark-accent-bright: #A5D8F0;
+  --_cs-light-accent-on: #001721;
   --_cs-dark-accent-on: #f5ead9;
   --_cs-light-accent-on-strong: #FFFFFF;
   --_cs-dark-accent-on-strong: #FFFFFF;
-  --_cs-light-accent-tint: #EAFAFF;
-  --_cs-dark-accent-tint: #002F3A;
-  --_cs-light-accent-ink: #10282F;
-  --_cs-dark-accent-ink: #AED9E6;
-  --_cs-light-accent-glow: rgba(0, 69, 84, 0.48);
-  --_cs-dark-accent-glow: rgba(0, 69, 84, 0.48);
-  --_cs-light-accent-grad-a: #004554;
-  --_cs-dark-accent-grad-a: #004554;
-  --_cs-light-accent-grad-b: #A3D768;
-  --_cs-dark-accent-grad-b: #A3D768;
-  --_cs-light-color-text-accent: #011A21;
-  --_cs-dark-color-text-accent: #B6E1EF;
-  --_cs-light-color-link: #011A21;
-  --_cs-dark-color-link: #B6E1EF;
+  --_cs-light-accent-tint: #E5F3FA;
+  --_cs-dark-accent-tint: #021821;
+  --_cs-light-accent-ink: #092531;
+  --_cs-dark-accent-ink: #A8DBF3;
+  --_cs-light-accent-glow: rgba(6, 85, 111, 0.48);
+  --_cs-dark-accent-glow: rgba(6, 85, 111, 0.48);
+  --_cs-light-accent-grad-a: #06556F;
+  --_cs-dark-accent-grad-a: #06556F;
+  --_cs-light-accent-grad-b: #82CF66;
+  --_cs-dark-accent-grad-b: #82CF66;
+  --_cs-light-color-text-accent: #003142;
+  --_cs-dark-color-text-accent: #AFE2FA;
+  --_cs-light-color-link: #003142;
+  --_cs-dark-color-link: #AFE2FA;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -515,37 +515,37 @@
   --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
   --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
   --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
-  --_cs-light-component-button-primary-bg: #45210E;
-  --_cs-dark-component-button-primary-bg: #011A21;
+  --_cs-light-component-button-primary-bg: #034257;
+  --_cs-dark-component-button-primary-bg: #00445A;
   --_cs-light-component-button-primary-fg: #FFFFFF;
   --_cs-dark-component-button-primary-fg: #FFFFFF;
 }
 
 [data-cs-element="moc"][data-cs-variant="bamboo"] {
-  --_cs-light-accent: #E1F1C8;
-  --_cs-dark-accent: #E1F1C8;
-  --_cs-light-accent-strong: #6B7754;
-  --_cs-dark-accent-strong: #54603E;
-  --_cs-light-accent-bright: #E5F1D2;
-  --_cs-dark-accent-bright: #E5F1D2;
-  --_cs-light-accent-on: #212617;
+  --_cs-light-accent: #DAEFAA;
+  --_cs-dark-accent: #C4DB8C;
+  --_cs-light-accent-strong: #62780E;
+  --_cs-dark-accent-strong: #607420;
+  --_cs-light-accent-bright: #E2F4BA;
+  --_cs-dark-accent-bright: #DCF0B1;
+  --_cs-light-accent-on: #1C2307;
   --_cs-dark-accent-on: #f5ead9;
   --_cs-light-accent-on-strong: #FFFFFF;
   --_cs-dark-accent-on-strong: #FFFFFF;
-  --_cs-light-accent-tint: #F4F9ED;
-  --_cs-dark-accent-tint: #232D0B;
-  --_cs-light-accent-ink: #212617;
-  --_cs-dark-accent-ink: #E5F1D2;
-  --_cs-light-accent-glow: rgba(225, 241, 200, 0.48);
-  --_cs-dark-accent-glow: rgba(225, 241, 200, 0.48);
-  --_cs-light-accent-grad-a: #E1F1C8;
-  --_cs-dark-accent-grad-a: #E1F1C8;
-  --_cs-light-accent-grad-b: #FCAF91;
-  --_cs-dark-accent-grad-b: #FCAF91;
-  --_cs-light-color-text-accent: #505C3A;
-  --_cs-dark-color-text-accent: #E5F1D2;
-  --_cs-light-color-link: #505C3A;
-  --_cs-dark-color-link: #E5F1D2;
+  --_cs-light-accent-tint: #F5FBE8;
+  --_cs-dark-accent-tint: #293016;
+  --_cs-light-accent-ink: #1E250A;
+  --_cs-dark-accent-ink: #DCF0B1;
+  --_cs-light-accent-glow: rgba(218, 239, 170, 0.48);
+  --_cs-dark-accent-glow: rgba(218, 239, 170, 0.48);
+  --_cs-light-accent-grad-a: #DAEFAA;
+  --_cs-dark-accent-grad-a: #DAEFAA;
+  --_cs-light-accent-grad-b: #FC9C69;
+  --_cs-dark-accent-grad-b: #FC9C69;
+  --_cs-light-color-text-accent: #4A5B02;
+  --_cs-dark-color-text-accent: #DCF0B1;
+  --_cs-light-color-link: #4A5B02;
+  --_cs-dark-color-link: #DCF0B1;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -556,37 +556,37 @@
   --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
   --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
   --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
-  --_cs-light-component-button-primary-bg: #45210E;
-  --_cs-dark-component-button-primary-bg: #54603E;
+  --_cs-light-component-button-primary-bg: #62780E;
+  --_cs-dark-component-button-primary-bg: #607420;
   --_cs-light-component-button-primary-fg: #FFFFFF;
   --_cs-dark-component-button-primary-fg: #FFFFFF;
 }
 
 [data-cs-element="moc"] {
-  --_cs-light-accent: #A3D768;
-  --_cs-dark-accent: #A3D768;
-  --_cs-light-accent-strong: #528003;
-  --_cs-dark-accent-strong: #416501;
-  --_cs-light-accent-bright: #C5ED9C;
-  --_cs-dark-accent-bright: #C5ED9C;
-  --_cs-light-accent-on: #182A00;
+  --_cs-light-accent: #82CF66;
+  --_cs-dark-accent: #8AD370;
+  --_cs-light-accent-strong: #2B7100;
+  --_cs-dark-accent-strong: #286704;
+  --_cs-light-accent-bright: #B9F0A6;
+  --_cs-dark-accent-bright: #B2EC9E;
+  --_cs-light-accent-on: #0A2700;
   --_cs-dark-accent-on: #f5ead9;
   --_cs-light-accent-on-strong: #FFFFFF;
   --_cs-dark-accent-on-strong: #FFFFFF;
-  --_cs-light-accent-tint: #EFFCE3;
-  --_cs-dark-accent-tint: #1F2E0B;
-  --_cs-light-accent-ink: #182A00;
-  --_cs-dark-accent-ink: #C5ED9C;
-  --_cs-light-accent-glow: rgba(163, 215, 104, 0.48);
-  --_cs-dark-accent-glow: rgba(163, 215, 104, 0.48);
-  --_cs-light-accent-grad-a: #A3D768;
-  --_cs-dark-accent-grad-a: #A3D768;
-  --_cs-light-accent-grad-b: #FCAF91;
-  --_cs-dark-accent-grad-b: #FCAF91;
-  --_cs-light-color-text-accent: #38570C;
-  --_cs-dark-color-text-accent: #C5ED9C;
-  --_cs-light-color-link: #38570C;
-  --_cs-dark-color-link: #C5ED9C;
+  --_cs-light-accent-tint: #EAFAE5;
+  --_cs-dark-accent-tint: #12260B;
+  --_cs-light-accent-ink: #0D2902;
+  --_cs-dark-accent-ink: #B2EC9E;
+  --_cs-light-accent-glow: rgba(130, 207, 102, 0.48);
+  --_cs-dark-accent-glow: rgba(130, 207, 102, 0.48);
+  --_cs-light-accent-grad-a: #82CF66;
+  --_cs-dark-accent-grad-a: #82CF66;
+  --_cs-light-accent-grad-b: #FC9C69;
+  --_cs-dark-accent-grad-b: #FC9C69;
+  --_cs-light-color-text-accent: #24570B;
+  --_cs-dark-color-text-accent: #B2EC9E;
+  --_cs-light-color-link: #24570B;
+  --_cs-dark-color-link: #B2EC9E;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -597,37 +597,37 @@
   --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
   --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
   --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
-  --_cs-light-component-button-primary-bg: #45210E;
-  --_cs-dark-component-button-primary-bg: #416501;
+  --_cs-light-component-button-primary-bg: #2B7100;
+  --_cs-dark-component-button-primary-bg: #286704;
   --_cs-light-component-button-primary-fg: #FFFFFF;
   --_cs-dark-component-button-primary-fg: #FFFFFF;
 }
 
 [data-cs-element="moc"][data-cs-variant="forest"] {
-  --_cs-light-accent: #1A4A01;
-  --_cs-dark-accent: #8EC27D;
-  --_cs-light-accent-strong: #051D00;
-  --_cs-dark-accent-strong: #061D00;
-  --_cs-light-accent-bright: #B0D8A3;
-  --_cs-dark-accent-bright: #B0D8A3;
-  --_cs-light-accent-on: #162A0E;
+  --_cs-light-accent: #105C36;
+  --_cs-dark-accent: #84C49B;
+  --_cs-light-accent-strong: #0A4829;
+  --_cs-dark-accent-strong: #074A29;
+  --_cs-light-accent-bright: #ACDDBD;
+  --_cs-dark-accent-bright: #A8DFBB;
+  --_cs-light-accent-on: #011C0D;
   --_cs-dark-accent-on: #f5ead9;
   --_cs-light-accent-on-strong: #FFFFFF;
   --_cs-dark-accent-on-strong: #FFFFFF;
-  --_cs-light-accent-tint: #ECFDE7;
-  --_cs-dark-accent-tint: #193011;
-  --_cs-light-accent-ink: #162A0E;
-  --_cs-dark-accent-ink: #B6DFA9;
-  --_cs-light-accent-glow: rgba(26, 74, 1, 0.48);
-  --_cs-dark-accent-glow: rgba(26, 74, 1, 0.48);
-  --_cs-light-accent-grad-a: #1A4A01;
-  --_cs-dark-accent-grad-a: #1A4A01;
-  --_cs-light-accent-grad-b: #FCAF91;
-  --_cs-dark-accent-grad-b: #FCAF91;
-  --_cs-light-color-text-accent: #051D00;
-  --_cs-dark-color-text-accent: #BDE5B0;
-  --_cs-light-color-link: #051D00;
-  --_cs-dark-color-link: #BDE5B0;
+  --_cs-light-accent-tint: #E6F5EB;
+  --_cs-dark-accent-tint: #031A0C;
+  --_cs-light-accent-ink: #0B2818;
+  --_cs-dark-accent-ink: #A8DFBB;
+  --_cs-light-accent-glow: rgba(16, 92, 54, 0.48);
+  --_cs-dark-accent-glow: rgba(16, 92, 54, 0.48);
+  --_cs-light-accent-grad-a: #105C36;
+  --_cs-dark-accent-grad-a: #105C36;
+  --_cs-light-accent-grad-b: #FC9C69;
+  --_cs-dark-accent-grad-b: #FC9C69;
+  --_cs-light-color-text-accent: #04361D;
+  --_cs-dark-color-text-accent: #B0E7C3;
+  --_cs-light-color-link: #04361D;
+  --_cs-dark-color-link: #B0E7C3;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -638,37 +638,37 @@
   --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
   --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
   --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
-  --_cs-light-component-button-primary-bg: #45210E;
-  --_cs-dark-component-button-primary-bg: #061D00;
+  --_cs-light-component-button-primary-bg: #0A4829;
+  --_cs-dark-component-button-primary-bg: #074A29;
   --_cs-light-component-button-primary-fg: #FFFFFF;
   --_cs-dark-component-button-primary-fg: #FFFFFF;
 }
 
 [data-cs-element="kim"][data-cs-variant="titanium"] {
-  --_cs-light-accent: #FEE5C7;
-  --_cs-dark-accent: #FEE5C7;
-  --_cs-light-accent-strong: #847058;
-  --_cs-dark-accent-strong: #6B573E;
-  --_cs-light-accent-bright: #FBE8D2;
-  --_cs-dark-accent-bright: #FBE8D2;
-  --_cs-light-accent-on: #2B2217;
+  --_cs-light-accent: #D3E7FC;
+  --_cs-dark-accent: #BCD2EA;
+  --_cs-light-accent-strong: #56708B;
+  --_cs-dark-accent-strong: #576D83;
+  --_cs-light-accent-bright: #DDEDFF;
+  --_cs-dark-accent-bright: #D6E9FD;
+  --_cs-light-accent-on: #182029;
   --_cs-dark-accent-on: #f5ead9;
   --_cs-light-accent-on-strong: #FFFFFF;
   --_cs-dark-accent-on-strong: #FFFFFF;
-  --_cs-light-accent-tint: #FDF5ED;
-  --_cs-dark-accent-tint: #37250B;
-  --_cs-light-accent-ink: #2B2217;
-  --_cs-dark-accent-ink: #FBE8D2;
-  --_cs-light-accent-glow: rgba(254, 229, 199, 0.48);
-  --_cs-dark-accent-glow: rgba(254, 229, 199, 0.48);
-  --_cs-light-accent-grad-a: #FEE5C7;
-  --_cs-dark-accent-grad-a: #FEE5C7;
-  --_cs-light-accent-grad-b: #2EDBF7;
-  --_cs-dark-accent-grad-b: #2EDBF7;
-  --_cs-light-color-text-accent: #67543D;
-  --_cs-dark-color-text-accent: #FBE8D2;
-  --_cs-light-color-link: #67543D;
-  --_cs-dark-color-link: #FBE8D2;
+  --_cs-light-accent-tint: #F3F8FE;
+  --_cs-dark-accent-tint: #262D35;
+  --_cs-light-accent-ink: #1A232B;
+  --_cs-dark-accent-ink: #D6E9FD;
+  --_cs-light-accent-glow: rgba(211, 231, 252, 0.48);
+  --_cs-dark-accent-glow: rgba(211, 231, 252, 0.48);
+  --_cs-light-accent-grad-a: #D3E7FC;
+  --_cs-dark-accent-grad-a: #D3E7FC;
+  --_cs-light-accent-grad-b: #00CEE4;
+  --_cs-dark-accent-grad-b: #00CEE4;
+  --_cs-light-color-text-accent: #3D5670;
+  --_cs-dark-color-text-accent: #D6E9FD;
+  --_cs-light-color-link: #3D5670;
+  --_cs-dark-color-link: #D6E9FD;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -679,37 +679,37 @@
   --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
   --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
   --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
-  --_cs-light-component-button-primary-bg: #45210E;
-  --_cs-dark-component-button-primary-bg: #6B573E;
+  --_cs-light-component-button-primary-bg: #56708B;
+  --_cs-dark-component-button-primary-bg: #576D83;
   --_cs-light-component-button-primary-fg: #FFFFFF;
   --_cs-dark-component-button-primary-fg: #FFFFFF;
 }
 
 [data-cs-element="kim"] {
-  --_cs-light-accent: #F3B958;
-  --_cs-dark-accent: #F3B958;
-  --_cs-light-accent-strong: #996A08;
-  --_cs-dark-accent-strong: #795303;
-  --_cs-light-accent-bright: #FDD89F;
-  --_cs-dark-accent-bright: #FDD89F;
-  --_cs-light-accent-on: #312002;
+  --_cs-light-accent: #C4B78F;
+  --_cs-dark-accent: #C8BC96;
+  --_cs-light-accent-strong: #6A5E3A;
+  --_cs-dark-accent-strong: #615633;
+  --_cs-light-accent-bright: #E8DEBD;
+  --_cs-dark-accent-bright: #E3D9B8;
+  --_cs-light-accent-on: #241F0F;
   --_cs-dark-accent-on: #f5ead9;
   --_cs-light-accent-on-strong: #FFFFFF;
   --_cs-dark-accent-on-strong: #FFFFFF;
-  --_cs-light-accent-tint: #FFF5E7;
-  --_cs-dark-accent-tint: #382503;
-  --_cs-light-accent-ink: #312002;
-  --_cs-dark-accent-ink: #FDD89F;
-  --_cs-light-accent-glow: rgba(243, 185, 88, 0.48);
-  --_cs-dark-accent-glow: rgba(243, 185, 88, 0.48);
-  --_cs-light-accent-grad-a: #F3B958;
-  --_cs-dark-accent-grad-a: #F3B958;
-  --_cs-light-accent-grad-b: #2EDBF7;
-  --_cs-dark-accent-grad-b: #2EDBF7;
-  --_cs-light-color-text-accent: #65460B;
-  --_cs-dark-color-text-accent: #FDD89F;
-  --_cs-light-color-link: #65460B;
-  --_cs-dark-color-link: #FDD89F;
+  --_cs-light-accent-tint: #F8F4EA;
+  --_cs-dark-accent-tint: #242013;
+  --_cs-light-accent-ink: #262112;
+  --_cs-dark-accent-ink: #E3D9B8;
+  --_cs-light-accent-glow: rgba(196, 183, 143, 0.48);
+  --_cs-dark-accent-glow: rgba(196, 183, 143, 0.48);
+  --_cs-light-accent-grad-a: #C4B78F;
+  --_cs-dark-accent-grad-a: #C4B78F;
+  --_cs-light-accent-grad-b: #00CEE4;
+  --_cs-dark-accent-grad-b: #00CEE4;
+  --_cs-light-color-text-accent: #564B27;
+  --_cs-dark-color-text-accent: #E5DBBA;
+  --_cs-light-color-link: #564B27;
+  --_cs-dark-color-link: #E5DBBA;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -720,37 +720,37 @@
   --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
   --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
   --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
-  --_cs-light-component-button-primary-bg: #45210E;
-  --_cs-dark-component-button-primary-bg: #795303;
+  --_cs-light-component-button-primary-bg: #6A5E3A;
+  --_cs-dark-component-button-primary-bg: #615633;
   --_cs-light-component-button-primary-fg: #FFFFFF;
   --_cs-dark-component-button-primary-fg: #FFFFFF;
 }
 
 [data-cs-element="kim"][data-cs-variant="steel"] {
-  --_cs-light-accent: #503901;
-  --_cs-dark-accent: #CCB17E;
-  --_cs-light-accent-strong: #1F1400;
-  --_cs-dark-accent-strong: #1F1400;
-  --_cs-light-accent-bright: #DCC8A2;
-  --_cs-dark-accent-bright: #DFCBA5;
-  --_cs-light-accent-on: #2D220E;
+  --_cs-light-accent: #384D72;
+  --_cs-dark-accent: #9FB7E0;
+  --_cs-light-accent-strong: #293C5C;
+  --_cs-dark-accent-strong: #2B3D5D;
+  --_cs-light-accent-bright: #BED0F0;
+  --_cs-dark-accent-bright: #BBD0F4;
+  --_cs-light-accent-on: #020818;
   --_cs-dark-accent-on: #f5ead9;
   --_cs-light-accent-on-strong: #FFFFFF;
   --_cs-dark-accent-on-strong: #FFFFFF;
-  --_cs-light-accent-tint: #FEF6E7;
-  --_cs-dark-accent-tint: #362602;
-  --_cs-light-accent-ink: #2D220E;
-  --_cs-dark-accent-ink: #E6D1AB;
-  --_cs-light-accent-glow: rgba(80, 57, 1, 0.48);
-  --_cs-dark-accent-glow: rgba(80, 57, 1, 0.48);
-  --_cs-light-accent-grad-a: #503901;
-  --_cs-dark-accent-grad-a: #503901;
-  --_cs-light-accent-grad-b: #2EDBF7;
-  --_cs-dark-accent-grad-b: #2EDBF7;
-  --_cs-light-color-text-accent: #1F1400;
-  --_cs-dark-color-text-accent: #ECD8B2;
-  --_cs-light-color-link: #1F1400;
-  --_cs-dark-color-link: #ECD8B2;
+  --_cs-light-accent-tint: #EBF1FB;
+  --_cs-dark-accent-tint: #0D1523;
+  --_cs-light-accent-ink: #182232;
+  --_cs-dark-accent-ink: #BED3F7;
+  --_cs-light-accent-glow: rgba(56, 77, 114, 0.48);
+  --_cs-dark-accent-glow: rgba(56, 77, 114, 0.48);
+  --_cs-light-accent-grad-a: #384D72;
+  --_cs-dark-accent-grad-a: #384D72;
+  --_cs-light-accent-grad-b: #00CEE4;
+  --_cs-dark-accent-grad-b: #00CEE4;
+  --_cs-light-color-text-accent: #1B2E4C;
+  --_cs-dark-color-text-accent: #C8DBFD;
+  --_cs-light-color-link: #1B2E4C;
+  --_cs-dark-color-link: #C8DBFD;
   --_cs-light-color-link-hover: #45210E;
   --_cs-dark-color-link-hover: #f5ead9;
   --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -761,59 +761,59 @@
   --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
   --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
   --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
-  --_cs-light-component-button-primary-bg: #45210E;
-  --_cs-dark-component-button-primary-bg: #1F1400;
+  --_cs-light-component-button-primary-bg: #293C5C;
+  --_cs-dark-component-button-primary-bg: #2B3D5D;
   --_cs-light-component-button-primary-fg: #FFFFFF;
   --_cs-dark-component-button-primary-fg: #FFFFFF;
 }
 
 :is(:root, [data-theme], [data-cs-element], [data-cs-contrast], [data-theme][data-cs-element][data-cs-variant]) {
-  --cs-color-brand-umber: var(--_cs-light, var(--_cs-light-color-brand-umber)) var(--_cs-dark, var(--_cs-dark-color-brand-umber));
-  --cs-color-brand-ochre: var(--_cs-light, var(--_cs-light-color-brand-ochre)) var(--_cs-dark, var(--_cs-dark-color-brand-ochre));
-  --cs-color-surface-page: var(--_cs-light, var(--_cs-light-color-surface-page)) var(--_cs-dark, var(--_cs-dark-color-surface-page));
-  --cs-color-surface-panel: var(--_cs-light, var(--_cs-light-color-surface-panel)) var(--_cs-dark, var(--_cs-dark-color-surface-panel));
-  --cs-color-surface-raised: var(--_cs-light, var(--_cs-light-color-surface-raised)) var(--_cs-dark, var(--_cs-dark-color-surface-raised));
-  --cs-color-text-primary: var(--_cs-light, var(--_cs-light-color-text-primary)) var(--_cs-dark, var(--_cs-dark-color-text-primary));
-  --cs-color-text-inverse: var(--_cs-light, var(--_cs-light-color-text-inverse)) var(--_cs-dark, var(--_cs-dark-color-text-inverse));
-  --cs-color-text-accent: var(--_cs-light, var(--_cs-light-color-text-accent)) var(--_cs-dark, var(--_cs-dark-color-text-accent));
-  --cs-color-text-muted: var(--_cs-standard, var(--_cs-light, var(--_cs-light-color-text-muted)) var(--_cs-dark, var(--_cs-dark-color-text-muted))) var(--_cs-high, var(--_cs-light, #45210E) var(--_cs-dark, #F5EAD9));
-  --cs-color-semantic-success: var(--_cs-light, var(--_cs-light-color-semantic-success)) var(--_cs-dark, var(--_cs-dark-color-semantic-success));
-  --cs-color-semantic-danger: var(--_cs-light, var(--_cs-light-color-semantic-danger)) var(--_cs-dark, var(--_cs-dark-color-semantic-danger));
-  --cs-color-semantic-warning: var(--_cs-light, var(--_cs-light-color-semantic-warning)) var(--_cs-dark, var(--_cs-dark-color-semantic-warning));
-  --cs-color-semantic-info: var(--_cs-light, var(--_cs-light-color-semantic-info)) var(--_cs-dark, var(--_cs-dark-color-semantic-info));
-  --cs-color-semantic-success-fg: var(--_cs-light, var(--_cs-light-color-semantic-success-fg)) var(--_cs-dark, var(--_cs-dark-color-semantic-success-fg));
-  --cs-color-semantic-danger-fg: var(--_cs-light, var(--_cs-light-color-semantic-danger-fg)) var(--_cs-dark, var(--_cs-dark-color-semantic-danger-fg));
-  --cs-color-semantic-warning-fg: var(--_cs-light, var(--_cs-light-color-semantic-warning-fg)) var(--_cs-dark, var(--_cs-dark-color-semantic-warning-fg));
-  --cs-color-semantic-info-fg: var(--_cs-light, var(--_cs-light-color-semantic-info-fg)) var(--_cs-dark, var(--_cs-dark-color-semantic-info-fg));
-  --cs-color-semantic-success-text: var(--_cs-light, var(--_cs-light-color-semantic-success-text)) var(--_cs-dark, var(--_cs-dark-color-semantic-success-text));
-  --cs-color-semantic-danger-text: var(--_cs-light, var(--_cs-light-color-semantic-danger-text)) var(--_cs-dark, var(--_cs-dark-color-semantic-danger-text));
-  --cs-color-semantic-warning-text: var(--_cs-light, var(--_cs-light-color-semantic-warning-text)) var(--_cs-dark, var(--_cs-dark-color-semantic-warning-text));
-  --cs-color-semantic-info-text: var(--_cs-light, var(--_cs-light-color-semantic-info-text)) var(--_cs-dark, var(--_cs-dark-color-semantic-info-text));
-  --cs-doc-ink: var(--_cs-light, var(--_cs-light-doc-ink)) var(--_cs-dark, var(--_cs-dark-doc-ink));
-  --cs-doc-slate: var(--_cs-light, var(--_cs-light-doc-slate)) var(--_cs-dark, var(--_cs-dark-doc-slate));
-  --cs-doc-fill: var(--_cs-light, var(--_cs-light-doc-fill)) var(--_cs-dark, var(--_cs-dark-doc-fill));
-  --cs-doc-fill-ink: var(--_cs-light, var(--_cs-light-doc-fill-ink)) var(--_cs-dark, var(--_cs-dark-doc-fill-ink));
-  --cs-color-accent-ochre: var(--_cs-light, var(--_cs-light-color-accent-ochre)) var(--_cs-dark, var(--_cs-dark-color-accent-ochre));
-  --cs-color-border-default: var(--_cs-standard, var(--_cs-light, var(--_cs-light-color-border-default)) var(--_cs-dark, var(--_cs-dark-color-border-default))) var(--_cs-high, var(--_cs-light, #9a8060) var(--_cs-dark, #7a6450));
-  --cs-color-link: var(--_cs-light, var(--_cs-light-color-link)) var(--_cs-dark, var(--_cs-dark-color-link));
-  --cs-color-link-hover: var(--_cs-light, var(--_cs-light-color-link-hover)) var(--_cs-dark, var(--_cs-dark-color-link-hover));
-  --cs-component-button-primary-bg: var(--_cs-light, var(--_cs-light-component-button-primary-bg)) var(--_cs-dark, var(--_cs-dark-component-button-primary-bg));
-  --cs-component-button-primary-fg: var(--_cs-light, var(--_cs-light-component-button-primary-fg)) var(--_cs-dark, var(--_cs-dark-component-button-primary-fg));
-  --cs-component-textfield-border-default: var(--_cs-light, var(--_cs-light-component-textfield-border-default)) var(--_cs-dark, var(--_cs-dark-component-textfield-border-default));
-  --cs-shadow-xs: var(--_cs-light, var(--_cs-light-shadow-xs)) var(--_cs-dark, var(--_cs-dark-shadow-xs));
-  --cs-shadow-sm: var(--_cs-light, var(--_cs-light-shadow-sm)) var(--_cs-dark, var(--_cs-dark-shadow-sm));
-  --cs-shadow-md: var(--_cs-light, var(--_cs-light-shadow-md)) var(--_cs-dark, var(--_cs-dark-shadow-md));
-  --cs-shadow-lg: var(--_cs-light, var(--_cs-light-shadow-lg)) var(--_cs-dark, var(--_cs-dark-shadow-lg));
-  --cs-shadow-xl: var(--_cs-light, var(--_cs-light-shadow-xl)) var(--_cs-dark, var(--_cs-dark-shadow-xl));
-  --cs-accent: var(--_cs-light, var(--_cs-light-accent)) var(--_cs-dark, var(--_cs-dark-accent));
-  --cs-accent-strong: var(--_cs-light, var(--_cs-light-accent-strong)) var(--_cs-dark, var(--_cs-dark-accent-strong));
-  --cs-accent-bright: var(--_cs-light, var(--_cs-light-accent-bright)) var(--_cs-dark, var(--_cs-dark-accent-bright));
-  --cs-accent-on: var(--_cs-light, var(--_cs-light-accent-on)) var(--_cs-dark, var(--_cs-dark-accent-on));
-  --cs-accent-on-strong: var(--_cs-light, var(--_cs-light-accent-on-strong)) var(--_cs-dark, var(--_cs-dark-accent-on-strong));
-  --cs-accent-tint: var(--_cs-light, var(--_cs-light-accent-tint)) var(--_cs-dark, var(--_cs-dark-accent-tint));
-  --cs-accent-ink: var(--_cs-light, var(--_cs-light-accent-ink)) var(--_cs-dark, var(--_cs-dark-accent-ink));
-  --cs-accent-glow: var(--_cs-light, var(--_cs-light-accent-glow)) var(--_cs-dark, var(--_cs-dark-accent-glow));
-  --cs-accent-grad-a: var(--_cs-light, var(--_cs-light-accent-grad-a)) var(--_cs-dark, var(--_cs-dark-accent-grad-a));
-  --cs-accent-grad-b: var(--_cs-light, var(--_cs-light-accent-grad-b)) var(--_cs-dark, var(--_cs-dark-accent-grad-b));
-  color-scheme: var(--_cs-light, light) var(--_cs-dark, dark);
+  --cs-color-brand-umber: var(--_cs-light, var(--_cs-light-color-brand-umber))var(--_cs-dark, var(--_cs-dark-color-brand-umber));
+  --cs-color-brand-ochre: var(--_cs-light, var(--_cs-light-color-brand-ochre))var(--_cs-dark, var(--_cs-dark-color-brand-ochre));
+  --cs-color-surface-page: var(--_cs-light, var(--_cs-light-color-surface-page))var(--_cs-dark, var(--_cs-dark-color-surface-page));
+  --cs-color-surface-panel: var(--_cs-light, var(--_cs-light-color-surface-panel))var(--_cs-dark, var(--_cs-dark-color-surface-panel));
+  --cs-color-surface-raised: var(--_cs-light, var(--_cs-light-color-surface-raised))var(--_cs-dark, var(--_cs-dark-color-surface-raised));
+  --cs-color-text-primary: var(--_cs-light, var(--_cs-light-color-text-primary))var(--_cs-dark, var(--_cs-dark-color-text-primary));
+  --cs-color-text-inverse: var(--_cs-light, var(--_cs-light-color-text-inverse))var(--_cs-dark, var(--_cs-dark-color-text-inverse));
+  --cs-color-text-accent: var(--_cs-light, var(--_cs-light-color-text-accent))var(--_cs-dark, var(--_cs-dark-color-text-accent));
+  --cs-color-text-muted: var(--_cs-standard, var(--_cs-light, var(--_cs-light-color-text-muted))var(--_cs-dark, var(--_cs-dark-color-text-muted)))var(--_cs-high, var(--_cs-light, #45210E)var(--_cs-dark, #F5EAD9));
+  --cs-color-semantic-success: var(--_cs-light, var(--_cs-light-color-semantic-success))var(--_cs-dark, var(--_cs-dark-color-semantic-success));
+  --cs-color-semantic-danger: var(--_cs-light, var(--_cs-light-color-semantic-danger))var(--_cs-dark, var(--_cs-dark-color-semantic-danger));
+  --cs-color-semantic-warning: var(--_cs-light, var(--_cs-light-color-semantic-warning))var(--_cs-dark, var(--_cs-dark-color-semantic-warning));
+  --cs-color-semantic-info: var(--_cs-light, var(--_cs-light-color-semantic-info))var(--_cs-dark, var(--_cs-dark-color-semantic-info));
+  --cs-color-semantic-success-fg: var(--_cs-light, var(--_cs-light-color-semantic-success-fg))var(--_cs-dark, var(--_cs-dark-color-semantic-success-fg));
+  --cs-color-semantic-danger-fg: var(--_cs-light, var(--_cs-light-color-semantic-danger-fg))var(--_cs-dark, var(--_cs-dark-color-semantic-danger-fg));
+  --cs-color-semantic-warning-fg: var(--_cs-light, var(--_cs-light-color-semantic-warning-fg))var(--_cs-dark, var(--_cs-dark-color-semantic-warning-fg));
+  --cs-color-semantic-info-fg: var(--_cs-light, var(--_cs-light-color-semantic-info-fg))var(--_cs-dark, var(--_cs-dark-color-semantic-info-fg));
+  --cs-color-semantic-success-text: var(--_cs-light, var(--_cs-light-color-semantic-success-text))var(--_cs-dark, var(--_cs-dark-color-semantic-success-text));
+  --cs-color-semantic-danger-text: var(--_cs-light, var(--_cs-light-color-semantic-danger-text))var(--_cs-dark, var(--_cs-dark-color-semantic-danger-text));
+  --cs-color-semantic-warning-text: var(--_cs-light, var(--_cs-light-color-semantic-warning-text))var(--_cs-dark, var(--_cs-dark-color-semantic-warning-text));
+  --cs-color-semantic-info-text: var(--_cs-light, var(--_cs-light-color-semantic-info-text))var(--_cs-dark, var(--_cs-dark-color-semantic-info-text));
+  --cs-doc-ink: var(--_cs-light, var(--_cs-light-doc-ink))var(--_cs-dark, var(--_cs-dark-doc-ink));
+  --cs-doc-slate: var(--_cs-light, var(--_cs-light-doc-slate))var(--_cs-dark, var(--_cs-dark-doc-slate));
+  --cs-doc-fill: var(--_cs-light, var(--_cs-light-doc-fill))var(--_cs-dark, var(--_cs-dark-doc-fill));
+  --cs-doc-fill-ink: var(--_cs-light, var(--_cs-light-doc-fill-ink))var(--_cs-dark, var(--_cs-dark-doc-fill-ink));
+  --cs-color-accent-ochre: var(--_cs-light, var(--_cs-light-color-accent-ochre))var(--_cs-dark, var(--_cs-dark-color-accent-ochre));
+  --cs-color-border-default: var(--_cs-standard, var(--_cs-light, var(--_cs-light-color-border-default))var(--_cs-dark, var(--_cs-dark-color-border-default)))var(--_cs-high, var(--_cs-light, #9a8060)var(--_cs-dark, #7a6450));
+  --cs-color-link: var(--_cs-light, var(--_cs-light-color-link))var(--_cs-dark, var(--_cs-dark-color-link));
+  --cs-color-link-hover: var(--_cs-light, var(--_cs-light-color-link-hover))var(--_cs-dark, var(--_cs-dark-color-link-hover));
+  --cs-component-button-primary-bg: var(--_cs-light, var(--_cs-light-component-button-primary-bg))var(--_cs-dark, var(--_cs-dark-component-button-primary-bg));
+  --cs-component-button-primary-fg: var(--_cs-light, var(--_cs-light-component-button-primary-fg))var(--_cs-dark, var(--_cs-dark-component-button-primary-fg));
+  --cs-component-textfield-border-default: var(--_cs-light, var(--_cs-light-component-textfield-border-default))var(--_cs-dark, var(--_cs-dark-component-textfield-border-default));
+  --cs-shadow-xs: var(--_cs-light, var(--_cs-light-shadow-xs))var(--_cs-dark, var(--_cs-dark-shadow-xs));
+  --cs-shadow-sm: var(--_cs-light, var(--_cs-light-shadow-sm))var(--_cs-dark, var(--_cs-dark-shadow-sm));
+  --cs-shadow-md: var(--_cs-light, var(--_cs-light-shadow-md))var(--_cs-dark, var(--_cs-dark-shadow-md));
+  --cs-shadow-lg: var(--_cs-light, var(--_cs-light-shadow-lg))var(--_cs-dark, var(--_cs-dark-shadow-lg));
+  --cs-shadow-xl: var(--_cs-light, var(--_cs-light-shadow-xl))var(--_cs-dark, var(--_cs-dark-shadow-xl));
+  --cs-accent: var(--_cs-light, var(--_cs-light-accent))var(--_cs-dark, var(--_cs-dark-accent));
+  --cs-accent-strong: var(--_cs-light, var(--_cs-light-accent-strong))var(--_cs-dark, var(--_cs-dark-accent-strong));
+  --cs-accent-bright: var(--_cs-light, var(--_cs-light-accent-bright))var(--_cs-dark, var(--_cs-dark-accent-bright));
+  --cs-accent-on: var(--_cs-light, var(--_cs-light-accent-on))var(--_cs-dark, var(--_cs-dark-accent-on));
+  --cs-accent-on-strong: var(--_cs-light, var(--_cs-light-accent-on-strong))var(--_cs-dark, var(--_cs-dark-accent-on-strong));
+  --cs-accent-tint: var(--_cs-light, var(--_cs-light-accent-tint))var(--_cs-dark, var(--_cs-dark-accent-tint));
+  --cs-accent-ink: var(--_cs-light, var(--_cs-light-accent-ink))var(--_cs-dark, var(--_cs-dark-accent-ink));
+  --cs-accent-glow: var(--_cs-light, var(--_cs-light-accent-glow))var(--_cs-dark, var(--_cs-dark-accent-glow));
+  --cs-accent-grad-a: var(--_cs-light, var(--_cs-light-accent-grad-a))var(--_cs-dark, var(--_cs-dark-accent-grad-a));
+  --cs-accent-grad-b: var(--_cs-light, var(--_cs-light-accent-grad-b))var(--_cs-dark, var(--_cs-dark-accent-grad-b));
+  color-scheme: var(--_cs-light, light)var(--_cs-dark, dark);
 }