@cyberskill/design 1.0.0 → 1.1.0

package/tokens/elements.css

@@ -1,48 +1,29 @@
 /* CyberSkill — Ngũ Hành elemental identity (the L1 product layer).
+ * GENERATED from tokens/element-seeds.json by scripts/generate-element-packs.mjs
+ * DO NOT HAND-EDIT pack values — change seeds and re-run the generator.
+ *
  * Five elements: Kim (metal) · Mộc (wood) · Thủy (water) · Hỏa (fire) · Thổ (earth).
- * The studio itself IS Thổ — Umber + Ochre — so :root defaults to it and every
- * page without an element scope looks exactly as before.
+ * Soft / middle / deep intensity ladder (middle = default). Thổ middle pins logo ochre.
  *
  * Contract — every element/variant sets exactly these 9 role tokens:
- *   --cs-accent          hue anchor (CTAs, highlights)
- *   --cs-accent-strong   pressed / deep / accessible accent text on light
- *   --cs-accent-bright   accent for dark surfaces (headings on ink)
- *   --cs-accent-on       text on accent / accent-bright
- *   --cs-accent-tint     light wash surface
- *   --cs-accent-ink      element-tinted near-black (dark surfaces)
- *   --cs-accent-glow     aurora / glow rgba
- *   --cs-accent-grad-a/b wash gradient endpoints (b follows Tương sinh)
- *   Aurora washes ride on the .cs-aurora-wash class (bottom of this file) —
- *   relative url() cannot pass through a custom property (it re-resolves
- *   against each consuming DOCUMENT, not this stylesheet).
- *
- * Scope with data-cs-element="kim|moc|thuy|hoa|tho" (+ data-cs-variant).
- * TEXT RULE: text sits on -bright or -tint only — never on the mid-tone -accent
- * (-accent is for bars, borders, progress fills, and large non-text fills).
- * Rules: semantic status tokens NEVER remap. --cs-color-accent-ochre (the 3px
- * focus ring) is NEVER remapped — the Ochre ring is a studio-wide
- * accessibility signature. One element per surface; a secondary element may
- * appear only as a gradient endpoint, and only along the generative cycle
- * (Mộc→Hỏa→Thổ→Kim→Thủy→Mộc). Overcoming (Tương khắc) pairs never mix. */
+ *   --cs-accent · --cs-accent-strong · --cs-accent-bright · --cs-accent-on
+ *   --cs-accent-tint · --cs-accent-ink · --cs-accent-glow · --cs-accent-grad-a/b
+ * TEXT RULE: text sits on -bright or -tint only — never on the mid-tone -accent.
+ * Focus ring --cs-color-accent-ochre and semantic status tokens NEVER remap.
+ * 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: #B98200;
+  --cs-accent-strong: #A47D17;
   --cs-accent-bright: #F4BA17;
   --cs-accent-on: #45210E;
   --cs-accent-tint: #FBF4E9;
   --cs-accent-ink: #45210E;
-  --cs-accent-glow: rgba(244, 186, 23, 0.5);
+  --cs-accent-glow: rgba(244, 186, 23, 0.48);
   --cs-accent-grad-a: #F4BA17;
-  --cs-accent-grad-b: #C77B4A;
+  --cs-accent-grad-b: #FCAF91;
 }
 
-/* ---- Element reach beyond accent (v3 Batch-0 foundation, Jul 2026) ----
- * Owner concern: switching Element barely changed the page because elements only
- * remapped the 9 ACCENT tokens (a small % of pixels). Now every element scope also
- * washes page + panel + raised surfaces + borders with its own accent, so the WHOLE
- * surface reads as the element. Per-theme literal bases keep each elevation tier's
- * hierarchy and contrast intact (tints capped low: text still sits ≥AA on every
- * surface). Pages with NO element attribute are untouched (default Thổ look). */
+/* ---- Element reach beyond accent ---- */
 [data-cs-element] {
   --cs-color-surface-panel: color-mix(in oklab, var(--cs-accent) 4%, #FFFFFF);
   --cs-color-surface-page: color-mix(in oklab, var(--cs-accent) 8%, #FFFDF8);
@@ -64,107 +45,210 @@
   }
 }
 
-/* ---- Thổ · Earth — the mother brand (explicit; equals the defaults) ---- */
+/* ---- Thổ · Earth — soft / middle / deep ---- */
 [data-cs-element="tho"] {
-  --cs-accent: #F4BA17; --cs-accent-strong: #B98200; --cs-accent-bright: #F4BA17;
-  --cs-accent-on: #45210E; --cs-accent-tint: #FBF4E9; --cs-accent-ink: #45210E;
-  --cs-accent-glow: rgba(244, 186, 23, 0.5); --cs-accent-grad-a: #F4BA17; --cs-accent-grad-b: #C77B4A;
-}
-[data-cs-element="tho"][data-cs-variant="clay"] {
-  --cs-accent: #C77B4A; --cs-accent-strong: #8F5230; --cs-accent-bright: #EDBF9D;
-  --cs-accent-on: #2E1607; --cs-accent-tint: #F8EDE4; --cs-accent-ink: #2E1607;
-  --cs-accent-glow: rgba(199, 123, 74, 0.5); --cs-accent-grad-a: #C77B4A; --cs-accent-grad-b: #F4BA17;
-  --cs-color-text-accent: #8F5230; --cs-color-link: #8F5230;
+  --cs-accent: #F4BA17;
+  --cs-accent-strong: #A47D17;
+  --cs-accent-bright: #F4BA17;
+  --cs-accent-on: #45210E;
+  --cs-accent-tint: #FBF4E9;
+  --cs-accent-ink: #45210E;
+  --cs-accent-glow: rgba(244, 186, 23, 0.48);
+  --cs-accent-grad-a: #F4BA17;
+  --cs-accent-grad-b: #FCAF91;
 }
 [data-cs-element="tho"][data-cs-variant="sand"] {
-  --cs-accent: #E4C98F; --cs-accent-strong: #A98B4E; --cs-accent-bright: #EFDCB2;
-  --cs-accent-on: #3A2A10; --cs-accent-tint: #FAF3E3; --cs-accent-ink: #3A2A10;
-  --cs-accent-glow: rgba(228, 201, 143, 0.55); --cs-accent-grad-a: #E4C98F; --cs-accent-grad-b: #F4BA17;
-  --cs-color-text-accent: #8A6F3C; --cs-color-link: #8A6F3C;
+  --cs-accent: #F8E9C0;
+  --cs-accent-strong: #90825E;
+  --cs-accent-bright: #F6EBCC;
+  --cs-accent-on: #292414;
+  --cs-accent-tint: #FBF7EA;
+  --cs-accent-ink: #292414;
+  --cs-accent-glow: rgba(248, 233, 192, 0.48);
+  --cs-accent-grad-a: #F8E9C0;
+  --cs-accent-grad-b: #FCAF91;
+  --cs-color-text-accent: #90825E;
+  --cs-color-link: #90825E;
+}
+[data-cs-element="tho"][data-cs-variant="clay"] {
+  --cs-accent: #513801;
+  --cs-accent-strong: #201300;
+  --cs-accent-bright: #DEC7A2;
+  --cs-accent-on: #2D220E;
+  --cs-accent-tint: #FFF6E7;
+  --cs-accent-ink: #2D220E;
+  --cs-accent-glow: rgba(81, 56, 1, 0.48);
+  --cs-accent-grad-a: #513801;
+  --cs-accent-grad-b: #FCAF91;
+  --cs-color-text-accent: #201300;
+  --cs-color-link: #201300;
 }
 
-/* ---- Hỏa · Fire — energy. Variants: ember (default) · lava · plasma ---- */
+/* ---- Hỏa · Fire — soft / middle / deep ---- */
 [data-cs-element="hoa"] {
-  --cs-accent: #E0632B; --cs-accent-strong: #A93E14; --cs-accent-bright: #F6A26B;
-  --cs-accent-on: #231007; --cs-accent-tint: #FBEADF; --cs-accent-ink: #231007;
-  --cs-accent-glow: rgba(224, 99, 43, 0.5); --cs-accent-grad-a: #E0632B; --cs-accent-grad-b: #F4BA17;
-  --cs-color-text-accent: #A93E14; --cs-color-link: #A93E14;
-}
-[data-cs-element="hoa"][data-cs-variant="lava"] {
-  --cs-accent: #C43D1F; --cs-accent-strong: #7E1F0E; --cs-accent-bright: #F6AC85;
-  --cs-accent-on: #1D0B05; --cs-accent-tint: #FAE5DC; --cs-accent-ink: #1D0B05;
-  --cs-accent-glow: rgba(196, 61, 31, 0.55); --cs-accent-grad-a: #C43D1F; --cs-accent-grad-b: #E0632B;
-  --cs-color-text-accent: #9B2D14; --cs-color-link: #9B2D14;
+  --cs-accent: #FCAF91;
+  --cs-accent-strong: #B47054;
+  --cs-accent-bright: #FED3C3;
+  --cs-accent-on: #381B10;
+  --cs-accent-tint: #FFF4F0;
+  --cs-accent-ink: #381B10;
+  --cs-accent-glow: rgba(252, 175, 145, 0.48);
+  --cs-accent-grad-a: #FCAF91;
+  --cs-accent-grad-b: #F4BA17;
+  --cs-color-text-accent: #B47054;
+  --cs-color-link: #B47054;
 }
 [data-cs-element="hoa"][data-cs-variant="plasma"] {
-  --cs-accent: #E8506E; --cs-accent-strong: #B02348; --cs-accent-bright: #F7A8B8;
-  --cs-accent-on: #200812; --cs-accent-tint: #FBE6EB; --cs-accent-ink: #200812;
-  --cs-accent-glow: rgba(232, 80, 110, 0.5); --cs-accent-grad-a: #E8506E; --cs-accent-grad-b: #F08A52;
-  --cs-color-text-accent: #B02348; --cs-color-link: #B02348;
+  --cs-accent: #FFE1D8;
+  --cs-accent-strong: #967C75;
+  --cs-accent-bright: #FCE6DF;
+  --cs-accent-on: #2C211E;
+  --cs-accent-tint: #FEF4F2;
+  --cs-accent-ink: #2C211E;
+  --cs-accent-glow: rgba(255, 225, 216, 0.48);
+  --cs-accent-grad-a: #FFE1D8;
+  --cs-accent-grad-b: #F4BA17;
+  --cs-color-text-accent: #967C75;
+  --cs-color-link: #967C75;
+}
+[data-cs-element="hoa"][data-cs-variant="lava"] {
+  --cs-accent: #622B06;
+  --cs-accent-strong: #280D00;
+  --cs-accent-bright: #F1BEA4;
+  --cs-accent-on: #361D0F;
+  --cs-accent-tint: #FFF4EF;
+  --cs-accent-ink: #361D0F;
+  --cs-accent-glow: rgba(98, 43, 6, 0.48);
+  --cs-accent-grad-a: #622B06;
+  --cs-accent-grad-b: #F4BA17;
+  --cs-color-text-accent: #280D00;
+  --cs-color-link: #280D00;
 }
 
-/* ---- Thủy · Water — flow. Variants: river (default) · ocean · mist ---- */
+/* ---- Thủy · Water — soft / middle / deep ---- */
 [data-cs-element="thuy"] {
-  --cs-accent: #4E8E9B; --cs-accent-strong: #2F5E6B; --cs-accent-bright: #A6D0DA;
-  --cs-accent-on: #0E1D20; --cs-accent-tint: #E6F1F2; --cs-accent-ink: #0E1D20;
-  --cs-accent-glow: rgba(78, 142, 155, 0.5); --cs-accent-grad-a: #4E8E9B; --cs-accent-grad-b: #7A9B57;
-  --cs-color-text-accent: #2F5E6B; --cs-color-link: #2F5E6B;
-}
-[data-cs-element="thuy"][data-cs-variant="ocean"] {
-  --cs-accent: #2E5E7E; --cs-accent-strong: #1C3E56; --cs-accent-bright: #A9CCE0;
-  --cs-accent-on: #0B161E; --cs-accent-tint: #E4EEF4; --cs-accent-ink: #0B161E;
-  --cs-accent-glow: rgba(46, 94, 126, 0.55); --cs-accent-grad-a: #2E5E7E; --cs-accent-grad-b: #4E8E9B;
-  --cs-color-text-accent: #1C3E56; --cs-color-link: #1C3E56;
+  --cs-accent: #2EDBF7;
+  --cs-accent-strong: #108EA0;
+  --cs-accent-bright: #99EEFF;
+  --cs-accent-on: #012A30;
+  --cs-accent-tint: #E7FBFF;
+  --cs-accent-ink: #012A30;
+  --cs-accent-glow: rgba(46, 219, 247, 0.48);
+  --cs-accent-grad-a: #2EDBF7;
+  --cs-accent-grad-b: #A3D768;
+  --cs-color-text-accent: #108EA0;
+  --cs-color-link: #108EA0;
 }
 [data-cs-element="thuy"][data-cs-variant="mist"] {
-  --cs-accent: #A7C4C9; --cs-accent-strong: #5E7F85; --cs-accent-bright: #C4DADD;
-  --cs-accent-on: #16262A; --cs-accent-tint: #F0F6F7; --cs-accent-ink: #16262A;
-  --cs-accent-glow: rgba(167, 196, 201, 0.55); --cs-accent-grad-a: #A7C4C9; --cs-accent-grad-b: #4E8E9B;
-  --cs-color-text-accent: #4A686E; --cs-color-link: #4A686E;
+  --cs-accent: #C0F5FC;
+  --cs-accent-strong: #5A8A90;
+  --cs-accent-bright: #CDF4F9;
+  --cs-accent-on: #13282B;
+  --cs-accent-tint: #EBFAFC;
+  --cs-accent-ink: #13282B;
+  --cs-accent-glow: rgba(192, 245, 252, 0.48);
+  --cs-accent-grad-a: #C0F5FC;
+  --cs-accent-grad-b: #A3D768;
+  --cs-color-text-accent: #5A8A90;
+  --cs-color-link: #5A8A90;
+}
+[data-cs-element="thuy"][data-cs-variant="ocean"] {
+  --cs-accent: #004554;
+  --cs-accent-strong: #011A21;
+  --cs-accent-bright: #A8D3E0;
+  --cs-accent-on: #10282F;
+  --cs-accent-tint: #EAFAFF;
+  --cs-accent-ink: #10282F;
+  --cs-accent-glow: rgba(0, 69, 84, 0.48);
+  --cs-accent-grad-a: #004554;
+  --cs-accent-grad-b: #A3D768;
+  --cs-color-text-accent: #011A21;
+  --cs-color-link: #011A21;
 }
 
-/* ---- Mộc · Wood — growth. Variants: leaf (default) · bamboo · forest ---- */
+/* ---- Mộc · Wood — soft / middle / deep ---- */
 [data-cs-element="moc"] {
-  --cs-accent: #7A9B57; --cs-accent-strong: #4C6B35; --cs-accent-bright: #A9C177;
-  --cs-accent-on: #18200F; --cs-accent-tint: #EEF3E2; --cs-accent-ink: #18200F;
-  --cs-accent-glow: rgba(122, 155, 87, 0.5); --cs-accent-grad-a: #7A9B57; --cs-accent-grad-b: #E0632B;
-  --cs-color-text-accent: #4C6B35; --cs-color-link: #4C6B35;
+  --cs-accent: #A3D768;
+  --cs-accent-strong: #629122;
+  --cs-accent-bright: #C5ED9C;
+  --cs-accent-on: #182A00;
+  --cs-accent-tint: #EFFCE3;
+  --cs-accent-ink: #182A00;
+  --cs-accent-glow: rgba(163, 215, 104, 0.48);
+  --cs-accent-grad-a: #A3D768;
+  --cs-accent-grad-b: #FCAF91;
+  --cs-color-text-accent: #629122;
+  --cs-color-link: #629122;
 }
 [data-cs-element="moc"][data-cs-variant="bamboo"] {
-  --cs-accent: #A9C177; --cs-accent-strong: #6B8442; --cs-accent-bright: #C4D69B;
-  --cs-accent-on: #1C240F; --cs-accent-tint: #F3F7E8; --cs-accent-ink: #1C240F;
-  --cs-accent-glow: rgba(169, 193, 119, 0.55); --cs-accent-grad-a: #A9C177; --cs-accent-grad-b: #7A9B57;
-  --cs-color-text-accent: #5B7237; --cs-color-link: #5B7237;
+  --cs-accent: #E1F1C8;
+  --cs-accent-strong: #7C8965;
+  --cs-accent-bright: #E5F1D2;
+  --cs-accent-on: #212617;
+  --cs-accent-tint: #F4F9ED;
+  --cs-accent-ink: #212617;
+  --cs-accent-glow: rgba(225, 241, 200, 0.48);
+  --cs-accent-grad-a: #E1F1C8;
+  --cs-accent-grad-b: #FCAF91;
+  --cs-color-text-accent: #7C8965;
+  --cs-color-link: #7C8965;
 }
 [data-cs-element="moc"][data-cs-variant="forest"] {
-  --cs-accent: #3E5A2E; --cs-accent-strong: #263A1B; --cs-accent-bright: #B3CE9B;
-  --cs-accent-on: #101708; --cs-accent-tint: #E9EFE1; --cs-accent-ink: #101708;
-  --cs-accent-glow: rgba(62, 90, 46, 0.55); --cs-accent-grad-a: #3E5A2E; --cs-accent-grad-b: #7A9B57;
-  --cs-color-text-accent: #31481F; --cs-color-link: #31481F;
+  --cs-accent: #1A4A01;
+  --cs-accent-strong: #051D00;
+  --cs-accent-bright: #B0D8A3;
+  --cs-accent-on: #162A0E;
+  --cs-accent-tint: #ECFDE7;
+  --cs-accent-ink: #162A0E;
+  --cs-accent-glow: rgba(26, 74, 1, 0.48);
+  --cs-accent-grad-a: #1A4A01;
+  --cs-accent-grad-b: #FCAF91;
+  --cs-color-text-accent: #051D00;
+  --cs-color-link: #051D00;
 }
 
-/* ---- Kim · Metal — precision. Variants: champagne (default) · steel · titanium ---- */
+/* ---- Kim · Metal — soft / middle / deep ---- */
 [data-cs-element="kim"] {
-  --cs-accent: #BFB29B; --cs-accent-strong: #7E7160; --cs-accent-bright: #D8CCB6;
-  --cs-accent-on: #221C12; --cs-accent-tint: #F3EFE6; --cs-accent-ink: #221C12;
-  --cs-accent-glow: rgba(191, 178, 155, 0.5); --cs-accent-grad-a: #BFB29B; --cs-accent-grad-b: #4E8E9B;
-  --cs-color-text-accent: #6E6151; --cs-color-link: #6E6151;
-}
-[data-cs-element="kim"][data-cs-variant="steel"] {
-  --cs-accent: #9FA3A3; --cs-accent-strong: #63696B; --cs-accent-bright: #C2C6C6;
-  --cs-accent-on: #191D1E; --cs-accent-tint: #EFF1F1; --cs-accent-ink: #191D1E;
-  --cs-accent-glow: rgba(159, 163, 163, 0.5); --cs-accent-grad-a: #9FA3A3; --cs-accent-grad-b: #BFB29B;
-  --cs-color-text-accent: #565C5E; --cs-color-link: #565C5E;
+  --cs-accent: #F3B958;
+  --cs-accent-strong: #AC780B;
+  --cs-accent-bright: #FDD89F;
+  --cs-accent-on: #312002;
+  --cs-accent-tint: #FFF5E7;
+  --cs-accent-ink: #312002;
+  --cs-accent-glow: rgba(243, 185, 88, 0.48);
+  --cs-accent-grad-a: #F3B958;
+  --cs-accent-grad-b: #2EDBF7;
+  --cs-color-text-accent: #AC780B;
+  --cs-color-link: #AC780B;
 }
 [data-cs-element="kim"][data-cs-variant="titanium"] {
-  --cs-accent: #8A7F72; --cs-accent-strong: #56504A; --cs-accent-bright: #D9CFC0;
-  --cs-accent-on: #171310; --cs-accent-tint: #EFEBE5; --cs-accent-ink: #171310;
-  --cs-accent-glow: rgba(138, 127, 114, 0.5); --cs-accent-grad-a: #8A7F72; --cs-accent-grad-b: #BFB29B;
-  --cs-color-text-accent: #56504A; --cs-color-link: #56504A;
+  --cs-accent: #FEE5C7;
+  --cs-accent-strong: #947F65;
+  --cs-accent-bright: #FBE8D2;
+  --cs-accent-on: #2B2217;
+  --cs-accent-tint: #FDF5ED;
+  --cs-accent-ink: #2B2217;
+  --cs-accent-glow: rgba(254, 229, 199, 0.48);
+  --cs-accent-grad-a: #FEE5C7;
+  --cs-accent-grad-b: #2EDBF7;
+  --cs-color-text-accent: #947F65;
+  --cs-color-link: #947F65;
+}
+[data-cs-element="kim"][data-cs-variant="steel"] {
+  --cs-accent: #503901;
+  --cs-accent-strong: #1F1400;
+  --cs-accent-bright: #DCC8A2;
+  --cs-accent-on: #2D220E;
+  --cs-accent-tint: #FEF6E7;
+  --cs-accent-ink: #2D220E;
+  --cs-accent-glow: rgba(80, 57, 1, 0.48);
+  --cs-accent-grad-a: #503901;
+  --cs-accent-grad-b: #2EDBF7;
+  --cs-color-text-accent: #1F1400;
+  --cs-color-link: #1F1400;
 }
 
-/* ---- Dark theme inside an element scope: the element takes the CTA role
- * (exactly as Ochre does in core dark). Thổ resolves to today's values. ---- */
+/* ---- Dark theme CTA remaps inside element scopes ---- */
 [data-theme="dark"] [data-cs-element], [data-cs-element][data-theme="dark"] {
   --cs-component-button-primary-bg: var(--cs-accent-strong);
   --cs-component-button-primary-fg: var(--cs-accent-on);
@@ -173,128 +257,131 @@
   --cs-color-link-hover: var(--cs-color-text-primary);
 }
 
-/* ---- Aurora washes (class-based: relative url() must live in a normal
- * declaration so it resolves against THIS stylesheet, not the page). Overlay
- * usage: <div class="cs-aurora-wash" style="position:absolute;inset:0;opacity:0.55"></div> ---- */
+/* ---- Aurora washes ---- */
 .cs-aurora-wash { background-image: url("../assets/aurora-gold.jpg"); background-size: cover; background-position: center; }
 [data-cs-element="hoa"] .cs-aurora-wash { background-image: url("../assets/aurora-hoa.png"); }
 [data-cs-element="thuy"] .cs-aurora-wash { background-image: url("../assets/aurora-thuy.png"); }
 [data-cs-element="moc"] .cs-aurora-wash { background-image: url("../assets/aurora-moc.png"); }
 [data-cs-element="kim"] .cs-aurora-wash { background-image: url("../assets/aurora-kim.png"); }
 
-
-/* ---- APCA-derived DARK elemental packs (v4.0.0, owner-approved Jul 2026) ----
- * Generated by the algorithm in _audit/apca-dark-preview.html (SAPC-4g, oklch lightness-solve):
- * bright ≥ Lc 75 on dark panel · accent ≥ 60 · button ink ≥ 75 on strong (mid-tones re-solved) ·
- * ink ≥ 75 on dark-native tint. The preview page doubles as the regression gate (currentFail must be 0).
- * Note (v5.0.0 contrast triage): accent-ink has zero foreground consumers in the codebase — every real
- * consumer is a `background:var(--cs-accent-ink);color:#fff` banner/CTA-strip, which this override broke
- * (ink flips light here, for a theoretical ink-on-tint text role). Fixed by repointing every banner consumer
- * to `--cs-accent-strong` instead (already APCA-solved as a dark, white-text-safe fill) rather than touching
- * this gate-checked pack. Themeable filled CTAs follow the same rule: `background:var(--cs-accent-strong);
- * color:var(--cs-accent-on)` — never bright+on in dark (cream-on-bright fails WCAG). ---- */
+/* ---- APCA-derived DARK elemental packs (generated; hue-locked to light) ---- */
+[data-theme="dark"][data-cs-element="tho"][data-cs-variant="sand"] {
+  --cs-accent: #F8E9C0;
+  --cs-accent-bright: #F6EBCC;
+  --cs-accent-strong: #665A37;
+  --cs-accent-on: #f5ead9;
+  --cs-accent-tint: #332701;
+  --cs-accent-ink: #F6EBCC;
+}
 [data-theme="dark"][data-cs-element="tho"] {
+  --cs-accent: #F4BA17;
   --cs-accent-bright: #FEC42C;
-  --cs-accent-strong: #795507;
+  --cs-accent-strong: #73560B;
   --cs-accent-on: #f5ead9;
-  --cs-accent-tint: #2F2203;
-  --cs-accent-ink: #FEC849;
+  --cs-accent-tint: #352602;
+  --cs-accent-ink: #FECD5E;
 }
 [data-theme="dark"][data-cs-element="tho"][data-cs-variant="clay"] {
-  --cs-accent: #F3A372;
-  --cs-accent-bright: #F4C5A3;
-  --cs-accent-strong: #864927;
+  --cs-accent: #CDB07E;
+  --cs-accent-bright: #E4CDA8;
+  --cs-accent-strong: #1F1300;
   --cs-accent-on: #f5ead9;
-  --cs-accent-tint: #371C0B;
-  --cs-accent-ink: #F7C8A6;
+  --cs-accent-tint: #372502;
+  --cs-accent-ink: #E7D0AB;
 }
-[data-theme="dark"][data-cs-element="tho"][data-cs-variant="sand"] {
-  --cs-accent-strong: #725615;
+[data-theme="dark"][data-cs-element="hoa"][data-cs-variant="plasma"] {
+  --cs-accent: #FFE1D8;
+  --cs-accent-bright: #FCE6DF;
+  --cs-accent-strong: #6F5750;
   --cs-accent-on: #f5ead9;
-  --cs-accent-tint: #2F2203;
-  --cs-accent-ink: #EFDCB2;
+  --cs-accent-tint: #38231C;
+  --cs-accent-ink: #FCE6DF;
 }
 [data-theme="dark"][data-cs-element="hoa"] {
-  --cs-accent: #FB9E7A;
-  --cs-accent-bright: #FEC099;
-  --cs-accent-strong: #9F3405;
+  --cs-accent: #FCAF91;
+  --cs-accent-bright: #FED3C3;
+  --cs-accent-strong: #8A4A30;
   --cs-accent-on: #f5ead9;
-  --cs-accent-tint: #381B10;
-  --cs-accent-ink: #FEC5A1;
+  --cs-accent-tint: #411E0F;
+  --cs-accent-ink: #FED3C3;
 }
 [data-theme="dark"][data-cs-element="hoa"][data-cs-variant="lava"] {
-  --cs-accent: #FE9982;
-  --cs-accent-bright: #FFBF9E;
+  --cs-accent: #E8A683;
+  --cs-accent-bright: #F8C4AA;
+  --cs-accent-strong: #280D00;
   --cs-accent-on: #f5ead9;
-  --cs-accent-tint: #391A13;
-  --cs-accent-ink: #FFC4A5;
+  --cs-accent-tint: #401F0B;
+  --cs-accent-ink: #FBC7AD;
 }
-[data-theme="dark"][data-cs-element="hoa"][data-cs-variant="plasma"] {
-  --cs-accent: #FD97A3;
-  --cs-accent-bright: #FDBECA;
-  --cs-accent-strong: #A91A43;
+[data-theme="dark"][data-cs-element="thuy"][data-cs-variant="mist"] {
+  --cs-accent: #C0F5FC;
+  --cs-accent-bright: #CDF4F9;
+  --cs-accent-strong: #316167;
   --cs-accent-on: #f5ead9;
-  --cs-accent-tint: #38191D;
-  --cs-accent-ink: #FDC3CE;
+  --cs-accent-tint: #022F34;
+  --cs-accent-ink: #CDF4F9;
 }
 [data-theme="dark"][data-cs-element="thuy"] {
-  --cs-accent: #7FC0CE;
-  --cs-accent-bright: #ACD7E1;
+  --cs-accent: #2EDBF7;
+  --cs-accent-bright: #99EEFF;
+  --cs-accent-strong: #046270;
   --cs-accent-on: #f5ead9;
-  --cs-accent-tint: #042930;
-  --cs-accent-ink: #AFDAE4;
+  --cs-accent-tint: #032F36;
+  --cs-accent-ink: #99EEFF;
 }
 [data-theme="dark"][data-cs-element="thuy"][data-cs-variant="ocean"] {
-  --cs-accent: #87B9DD;
-  --cs-accent-bright: #B2D6EA;
+  --cs-accent: #82BCCD;
+  --cs-accent-bright: #ABD6E3;
+  --cs-accent-strong: #011A21;
   --cs-accent-on: #f5ead9;
-  --cs-accent-tint: #08273A;
-  --cs-accent-ink: #B2D6EA;
+  --cs-accent-tint: #002F3A;
+  --cs-accent-ink: #AED9E6;
 }
-[data-theme="dark"][data-cs-element="thuy"][data-cs-variant="mist"] {
-  --cs-accent-strong: #3F5F65;
+[data-theme="dark"][data-cs-element="moc"][data-cs-variant="bamboo"] {
+  --cs-accent: #E1F1C8;
+  --cs-accent-bright: #E5F1D2;
+  --cs-accent-strong: #54603E;
   --cs-accent-on: #f5ead9;
-  --cs-accent-tint: #0F282C;
-  --cs-accent-ink: #C4DADD;
+  --cs-accent-tint: #232D0B;
+  --cs-accent-ink: #E5F1D2;
 }
 [data-theme="dark"][data-cs-element="moc"] {
-  --cs-accent: #9BBE78;
-  --cs-accent-bright: #BFD88D;
-  --cs-accent-strong: #44622D;
+  --cs-accent: #A3D768;
+  --cs-accent-bright: #C5ED9C;
+  --cs-accent-strong: #416501;
   --cs-accent-on: #f5ead9;
-  --cs-accent-tint: #1C290D;
-  --cs-accent-ink: #C2DB90;
+  --cs-accent-tint: #1F2E0B;
+  --cs-accent-ink: #C5ED9C;
 }
-[data-theme="dark"][data-cs-element="moc"][data-cs-variant="bamboo"] {
-  --cs-accent-strong: #4C6421;
+[data-theme="dark"][data-cs-element="moc"][data-cs-variant="forest"] {
+  --cs-accent: #8EC27D;
+  --cs-accent-bright: #B0D8A3;
+  --cs-accent-strong: #061D00;
   --cs-accent-on: #f5ead9;
-  --cs-accent-tint: #1F280A;
-  --cs-accent-ink: #C7D99E;
+  --cs-accent-tint: #193011;
+  --cs-accent-ink: #B6DFA9;
 }
-[data-theme="dark"][data-cs-element="moc"][data-cs-variant="forest"] {
-  --cs-accent: #9EBE8D;
-  --cs-accent-bright: #BDD8A4;
+[data-theme="dark"][data-cs-element="kim"][data-cs-variant="titanium"] {
+  --cs-accent: #FEE5C7;
+  --cs-accent-bright: #FBE8D2;
+  --cs-accent-strong: #6B573E;
   --cs-accent-on: #f5ead9;
-  --cs-accent-tint: #19290F;
-  --cs-accent-ink: #C0DBA7;
+  --cs-accent-tint: #37250B;
+  --cs-accent-ink: #FBE8D2;
 }
 [data-theme="dark"][data-cs-element="kim"] {
-  --cs-accent-strong: #675A4A;
+  --cs-accent: #F3B958;
+  --cs-accent-bright: #FDD89F;
+  --cs-accent-strong: #795303;
   --cs-accent-on: #f5ead9;
-  --cs-accent-tint: #2D220F;
-  --cs-accent-ink: #DBCFB9;
+  --cs-accent-tint: #382503;
+  --cs-accent-ink: #FDD89F;
 }
 [data-theme="dark"][data-cs-element="kim"][data-cs-variant="steel"] {
-  --cs-accent: #B2B6B6;
-  --cs-accent-bright: #CCD0D0;
-  --cs-accent-strong: #555B5D;
-  --cs-accent-on: #f5ead9;
-  --cs-accent-tint: #222525;
-  --cs-accent-ink: #CFD3D3;
-}
-[data-theme="dark"][data-cs-element="kim"][data-cs-variant="titanium"] {
-  --cs-accent: #BFB3A5;
+  --cs-accent: #CCB17E;
+  --cs-accent-bright: #DFCBA5;
+  --cs-accent-strong: #1F1400;
   --cs-accent-on: #f5ead9;
-  --cs-accent-tint: #2B2217;
-  --cs-accent-ink: #D9CFC0;
+  --cs-accent-tint: #362602;
+  --cs-accent-ink: #E6D1AB;
 }

package/tokens/fonts.css

@@ -1,7 +1,8 @@
 /* CyberSkill — self-hosted webfonts.
- * Be Vietnam Pro (UI/display, 300-800 + italics) and JetBrains Mono (code/data,
- * 400/500/700) are self-hosted from fonts/ as subset-split woff2 (latin,
- * latin-ext, vietnamese). Vietnamese subset coverage is a brand anchor.
+ * Be Vietnam Pro (UI, 300-800 + italics), JetBrains Mono (code/data,
+ * 400/500/700), and Space Grotesk (display/headline, variable 300-700) are
+ * self-hosted from fonts/ as subset-split woff2 (latin, latin-ext,
+ * vietnamese). Vietnamese subset coverage is a brand anchor.
  * Files fetched from Google Fonts and committed locally; no CDN dependency. */
 
 /* Be Vietnam Pro */
@@ -49,3 +50,11 @@
 @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jetbrainsmono-700-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
 @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jetbrainsmono-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
 @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jetbrainsmono-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
+
+/* Space Grotesk — display / headline face (--cs-font-family-display).
+ * One variable file per subset covers the whole 300-700 axis; the family has no
+ * 800, so --cs-heading-weight-strong (800) under .cs-display-face clamps to 700
+ * within Space Grotesk (see guidelines/type-families.html). */
+@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/spacegrotesk-var-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
+@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/spacegrotesk-var-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
+@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/spacegrotesk-var-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}