@cyberskill/design 1.2.0 → 1.3.9

package/tokens/elements.css

@@ -11,7 +11,7 @@
  *   --cs-accent-glow · --cs-accent-grad-a/b
  * TEXT RULE: text sits on -bright or -tint only — never on the mid-tone -accent.
  * Text on -strong uses --cs-accent-on-strong (WCAG AA ≥4.5:1 light and dark).
- * Focus ring --cs-color-accent-ochre and semantic status tokens NEVER remap.
+ * Focus indicator (text-primary contour + ochre halo) 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;
@@ -23,7 +23,7 @@
   --cs-accent-ink: #45210E;
   --cs-accent-glow: rgba(244, 186, 23, 0.48);
   --cs-accent-grad-a: #F4BA17;
-  --cs-accent-grad-b: #FCAF91;
+  --cs-accent-grad-b: #F3B958;
 }
 
 /* ---- Element reach beyond accent ---- */
@@ -59,7 +59,7 @@
   --cs-accent-ink: #45210E;
   --cs-accent-glow: rgba(244, 186, 23, 0.48);
   --cs-accent-grad-a: #F4BA17;
-  --cs-accent-grad-b: #FCAF91;
+  --cs-accent-grad-b: #F3B958;
 }
 [data-cs-element="tho"][data-cs-variant="sand"] {
   --cs-accent: #F8E9C0;
@@ -71,9 +71,9 @@
   --cs-accent-ink: #292414;
   --cs-accent-glow: rgba(248, 233, 192, 0.48);
   --cs-accent-grad-a: #F8E9C0;
-  --cs-accent-grad-b: #FCAF91;
+  --cs-accent-grad-b: #F3B958;
   --cs-color-text-accent: #90825E;
-  --cs-color-link: #90825E;
+  --cs-color-link: #7B6D4A;
 }
 [data-cs-element="tho"][data-cs-variant="clay"] {
   --cs-accent: #513801;
@@ -85,7 +85,7 @@
   --cs-accent-ink: #2D220E;
   --cs-accent-glow: rgba(81, 56, 1, 0.48);
   --cs-accent-grad-a: #513801;
-  --cs-accent-grad-b: #FCAF91;
+  --cs-accent-grad-b: #F3B958;
   --cs-color-text-accent: #201300;
   --cs-color-link: #201300;
 }
@@ -103,7 +103,7 @@
   --cs-accent-grad-a: #FCAF91;
   --cs-accent-grad-b: #F4BA17;
   --cs-color-text-accent: #B47054;
-  --cs-color-link: #B47054;
+  --cs-color-link: #A15E43;
 }
 [data-cs-element="hoa"][data-cs-variant="plasma"] {
   --cs-accent: #FFE1D8;
@@ -117,7 +117,7 @@
   --cs-accent-grad-a: #FFE1D8;
   --cs-accent-grad-b: #F4BA17;
   --cs-color-text-accent: #967C75;
-  --cs-color-link: #967C75;
+  --cs-color-link: #846B64;
 }
 [data-cs-element="hoa"][data-cs-variant="lava"] {
   --cs-accent: #622B06;
@@ -147,7 +147,7 @@
   --cs-accent-grad-a: #2EDBF7;
   --cs-accent-grad-b: #A3D768;
   --cs-color-text-accent: #108EA0;
-  --cs-color-link: #108EA0;
+  --cs-color-link: #027B8B;
 }
 [data-cs-element="thuy"][data-cs-variant="mist"] {
   --cs-accent: #C0F5FC;
@@ -161,7 +161,7 @@
   --cs-accent-grad-a: #C0F5FC;
   --cs-accent-grad-b: #A3D768;
   --cs-color-text-accent: #5A8A90;
-  --cs-color-link: #5A8A90;
+  --cs-color-link: #48787E;
 }
 [data-cs-element="thuy"][data-cs-variant="ocean"] {
   --cs-accent: #004554;
@@ -191,7 +191,7 @@
   --cs-accent-grad-a: #A3D768;
   --cs-accent-grad-b: #FCAF91;
   --cs-color-text-accent: #629122;
-  --cs-color-link: #629122;
+  --cs-color-link: #517B13;
 }
 [data-cs-element="moc"][data-cs-variant="bamboo"] {
   --cs-accent: #E1F1C8;
@@ -205,7 +205,7 @@
   --cs-accent-grad-a: #E1F1C8;
   --cs-accent-grad-b: #FCAF91;
   --cs-color-text-accent: #7C8965;
-  --cs-color-link: #7C8965;
+  --cs-color-link: #687451;
 }
 [data-cs-element="moc"][data-cs-variant="forest"] {
   --cs-accent: #1A4A01;
@@ -235,7 +235,7 @@
   --cs-accent-grad-a: #F3B958;
   --cs-accent-grad-b: #2EDBF7;
   --cs-color-text-accent: #AC780B;
-  --cs-color-link: #AC780B;
+  --cs-color-link: #966700;
 }
 [data-cs-element="kim"][data-cs-variant="titanium"] {
   --cs-accent: #FEE5C7;
@@ -249,7 +249,7 @@
   --cs-accent-grad-a: #FEE5C7;
   --cs-accent-grad-b: #2EDBF7;
   --cs-color-text-accent: #947F65;
-  --cs-color-link: #947F65;
+  --cs-color-link: #826D54;
 }
 [data-cs-element="kim"][data-cs-variant="steel"] {
   --cs-accent: #503901;
@@ -274,13 +274,22 @@
   --cs-color-link: var(--cs-accent-bright);
   --cs-color-link-hover: var(--cs-color-text-primary);
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"] [data-cs-element], [data-cs-element][data-theme="system"] {
+  --cs-component-button-primary-bg: var(--cs-accent-strong);
+  --cs-component-button-primary-fg: var(--cs-accent-on);
+  --cs-color-text-accent: var(--cs-accent-bright);
+  --cs-color-link: var(--cs-accent-bright);
+  --cs-color-link-hover: var(--cs-color-text-primary);
+  }
+}
 
 /* ---- 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"); }
+.cs-aurora-wash { background-image: url("../assets/aurora-tho.webp"); background-size: cover; background-position: center; }
+[data-cs-element="hoa"] .cs-aurora-wash { background-image: url("../assets/aurora-hoa.webp"); }
+[data-cs-element="thuy"] .cs-aurora-wash { background-image: url("../assets/aurora-thuy.webp"); }
+[data-cs-element="moc"] .cs-aurora-wash { background-image: url("../assets/aurora-moc.webp"); }
+[data-cs-element="kim"] .cs-aurora-wash { background-image: url("../assets/aurora-kim.webp"); }
 
 /* ---- APCA-derived DARK elemental packs (generated; hue-locked to light) ---- */
 [data-theme="dark"][data-cs-element="tho"][data-cs-variant="sand"] {
@@ -292,6 +301,17 @@
   --cs-accent-tint: #332701;
   --cs-accent-ink: #F6EBCC;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][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-on-strong: #FFFDF8;
+    --cs-accent-tint: #332701;
+    --cs-accent-ink: #F6EBCC;
+  }
+}
 [data-theme="dark"][data-cs-element="tho"] {
   --cs-accent: #F4BA17;
   --cs-accent-bright: #FEC42C;
@@ -301,6 +321,17 @@
   --cs-accent-tint: #352602;
   --cs-accent-ink: #FECD5E;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="tho"] {
+    --cs-accent: #F4BA17;
+    --cs-accent-bright: #FEC42C;
+    --cs-accent-strong: #73560B;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #352602;
+    --cs-accent-ink: #FECD5E;
+  }
+}
 [data-theme="dark"][data-cs-element="tho"][data-cs-variant="clay"] {
   --cs-accent: #CDB07E;
   --cs-accent-bright: #E4CDA8;
@@ -310,6 +341,17 @@
   --cs-accent-tint: #372502;
   --cs-accent-ink: #E7D0AB;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="tho"][data-cs-variant="clay"] {
+    --cs-accent: #CDB07E;
+    --cs-accent-bright: #E4CDA8;
+    --cs-accent-strong: #1F1300;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #372502;
+    --cs-accent-ink: #E7D0AB;
+  }
+}
 [data-theme="dark"][data-cs-element="hoa"][data-cs-variant="plasma"] {
   --cs-accent: #FFE1D8;
   --cs-accent-bright: #FCE6DF;
@@ -319,6 +361,17 @@
   --cs-accent-tint: #38231C;
   --cs-accent-ink: #FCE6DF;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][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-on-strong: #FFFDF8;
+    --cs-accent-tint: #38231C;
+    --cs-accent-ink: #FCE6DF;
+  }
+}
 [data-theme="dark"][data-cs-element="hoa"] {
   --cs-accent: #FCAF91;
   --cs-accent-bright: #FED3C3;
@@ -328,6 +381,17 @@
   --cs-accent-tint: #411E0F;
   --cs-accent-ink: #FED3C3;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="hoa"] {
+    --cs-accent: #FCAF91;
+    --cs-accent-bright: #FED3C3;
+    --cs-accent-strong: #8A4A30;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #411E0F;
+    --cs-accent-ink: #FED3C3;
+  }
+}
 [data-theme="dark"][data-cs-element="hoa"][data-cs-variant="lava"] {
   --cs-accent: #E8A683;
   --cs-accent-bright: #F8C4AA;
@@ -337,6 +401,17 @@
   --cs-accent-tint: #401F0B;
   --cs-accent-ink: #FBC7AD;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="hoa"][data-cs-variant="lava"] {
+    --cs-accent: #E8A683;
+    --cs-accent-bright: #F8C4AA;
+    --cs-accent-strong: #280D00;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #401F0B;
+    --cs-accent-ink: #FBC7AD;
+  }
+}
 [data-theme="dark"][data-cs-element="thuy"][data-cs-variant="mist"] {
   --cs-accent: #C0F5FC;
   --cs-accent-bright: #CDF4F9;
@@ -346,6 +421,17 @@
   --cs-accent-tint: #022F34;
   --cs-accent-ink: #CDF4F9;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][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-on-strong: #FFFDF8;
+    --cs-accent-tint: #022F34;
+    --cs-accent-ink: #CDF4F9;
+  }
+}
 [data-theme="dark"][data-cs-element="thuy"] {
   --cs-accent: #2EDBF7;
   --cs-accent-bright: #99EEFF;
@@ -355,6 +441,17 @@
   --cs-accent-tint: #032F36;
   --cs-accent-ink: #99EEFF;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="thuy"] {
+    --cs-accent: #2EDBF7;
+    --cs-accent-bright: #99EEFF;
+    --cs-accent-strong: #046270;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #032F36;
+    --cs-accent-ink: #99EEFF;
+  }
+}
 [data-theme="dark"][data-cs-element="thuy"][data-cs-variant="ocean"] {
   --cs-accent: #82BCCD;
   --cs-accent-bright: #ABD6E3;
@@ -364,6 +461,17 @@
   --cs-accent-tint: #002F3A;
   --cs-accent-ink: #AED9E6;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="thuy"][data-cs-variant="ocean"] {
+    --cs-accent: #82BCCD;
+    --cs-accent-bright: #ABD6E3;
+    --cs-accent-strong: #011A21;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #002F3A;
+    --cs-accent-ink: #AED9E6;
+  }
+}
 [data-theme="dark"][data-cs-element="moc"][data-cs-variant="bamboo"] {
   --cs-accent: #E1F1C8;
   --cs-accent-bright: #E5F1D2;
@@ -373,6 +481,17 @@
   --cs-accent-tint: #232D0B;
   --cs-accent-ink: #E5F1D2;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][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-on-strong: #FFFDF8;
+    --cs-accent-tint: #232D0B;
+    --cs-accent-ink: #E5F1D2;
+  }
+}
 [data-theme="dark"][data-cs-element="moc"] {
   --cs-accent: #A3D768;
   --cs-accent-bright: #C5ED9C;
@@ -382,6 +501,17 @@
   --cs-accent-tint: #1F2E0B;
   --cs-accent-ink: #C5ED9C;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="moc"] {
+    --cs-accent: #A3D768;
+    --cs-accent-bright: #C5ED9C;
+    --cs-accent-strong: #416501;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #1F2E0B;
+    --cs-accent-ink: #C5ED9C;
+  }
+}
 [data-theme="dark"][data-cs-element="moc"][data-cs-variant="forest"] {
   --cs-accent: #8EC27D;
   --cs-accent-bright: #B0D8A3;
@@ -391,6 +521,17 @@
   --cs-accent-tint: #193011;
   --cs-accent-ink: #B6DFA9;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][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-on-strong: #FFFDF8;
+    --cs-accent-tint: #193011;
+    --cs-accent-ink: #B6DFA9;
+  }
+}
 [data-theme="dark"][data-cs-element="kim"][data-cs-variant="titanium"] {
   --cs-accent: #FEE5C7;
   --cs-accent-bright: #FBE8D2;
@@ -400,6 +541,17 @@
   --cs-accent-tint: #37250B;
   --cs-accent-ink: #FBE8D2;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][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-on-strong: #FFFDF8;
+    --cs-accent-tint: #37250B;
+    --cs-accent-ink: #FBE8D2;
+  }
+}
 [data-theme="dark"][data-cs-element="kim"] {
   --cs-accent: #F3B958;
   --cs-accent-bright: #FDD89F;
@@ -409,6 +561,17 @@
   --cs-accent-tint: #382503;
   --cs-accent-ink: #FDD89F;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="kim"] {
+    --cs-accent: #F3B958;
+    --cs-accent-bright: #FDD89F;
+    --cs-accent-strong: #795303;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #382503;
+    --cs-accent-ink: #FDD89F;
+  }
+}
 [data-theme="dark"][data-cs-element="kim"][data-cs-variant="steel"] {
   --cs-accent: #CCB17E;
   --cs-accent-bright: #DFCBA5;
@@ -418,3 +581,14 @@
   --cs-accent-tint: #362602;
   --cs-accent-ink: #E6D1AB;
 }
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"][data-cs-element="kim"][data-cs-variant="steel"] {
+    --cs-accent: #CCB17E;
+    --cs-accent-bright: #DFCBA5;
+    --cs-accent-strong: #1F1400;
+    --cs-accent-on: #f5ead9;
+    --cs-accent-on-strong: #FFFDF8;
+    --cs-accent-tint: #362602;
+    --cs-accent-ink: #E6D1AB;
+  }
+}

package/tokens/native/CSTokens.kt

@@ -1,6 +1,6 @@
 // CyberSkill Design System — native design tokens.
 // GENERATED from tokens/tokens.dtcg.json — do not hand-edit; regenerate on token change.
-// release v1.1.1 · source sha256 16b39bda3ee5b664…
+// release v1.3.9 · source sha256 6fab1afd9d3ef915…
 // conversions: rem→px at 16 · em→…Em relative doubles · rgba alpha→ARGB byte (round(a*255)) · durations in ms
 // dark element packs: see $extensions.overrides.elementsDark
 // provenance: tokens/provenance.json · parity gate: _audit/token-pipeline-test.html
@@ -65,7 +65,7 @@ object CSTokens {
   val accentInk = Color(0xFF45210E)
   val accentGlow = Color(0x7AF4BA17)
   val accentGradA = Color(0xFFF4BA17)
-  val accentGradB = Color(0xFFFCAF91)
+  val accentGradB = Color(0xFFF3B958)
   val accentOnStrong = Color(0xFF1A1108)
   val depthBg = 0
   val depthSection = 5
@@ -118,6 +118,7 @@ object CSTokens {
   val radiusLg = 14.dp
   val radiusFull = 999.dp
   val breakpointXs = 0.dp
+  val breakpointPhone = 360.dp
   val breakpointSm = 640.dp
   val breakpointMd = 768.dp
   val breakpointLg = 1024.dp

package/tokens/native/CSTokens.swift

@@ -1,6 +1,6 @@
 // CyberSkill Design System — native design tokens.
 // GENERATED from tokens/tokens.dtcg.json — do not hand-edit; regenerate on token change.
-// release v1.1.1 · source sha256 16b39bda3ee5b664…
+// release v1.3.9 · source sha256 6fab1afd9d3ef915…
 // conversions: rem→px at 16 · em→…Em relative doubles · rgba alpha→ARGB byte (round(a*255)) · durations in ms
 // dark element packs: see $extensions.overrides.elementsDark
 // provenance: tokens/provenance.json · parity gate: _audit/token-pipeline-test.html
@@ -67,7 +67,7 @@ public enum CSTokens {
   public static let accentInk = color(0x45210E)
   public static let accentGlow = color(0xF4BA17, alpha: 0.48)
   public static let accentGradA = color(0xF4BA17)
-  public static let accentGradB = color(0xFCAF91)
+  public static let accentGradB = color(0xF3B958)
   public static let accentOnStrong = color(0x1A1108)
   public static let depthBg: Double = 0
   public static let depthSection: Double = 5
@@ -120,6 +120,7 @@ public enum CSTokens {
   public static let radiusLg: CGFloat = 14
   public static let radiusFull: CGFloat = 999
   public static let breakpointXs: CGFloat = 0
+  public static let breakpointPhone: CGFloat = 360
   public static let breakpointSm: CGFloat = 640
   public static let breakpointMd: CGFloat = 768
   public static let breakpointLg: CGFloat = 1024

package/tokens/native/cs_tokens.dart

@@ -1,6 +1,6 @@
 // CyberSkill Design System — native design tokens.
 // GENERATED from tokens/tokens.dtcg.json — do not hand-edit; regenerate on token change.
-// release v1.1.1 · source sha256 16b39bda3ee5b664…
+// release v1.3.9 · source sha256 6fab1afd9d3ef915…
 // conversions: rem→px at 16 · em→…Em relative doubles · rgba alpha→ARGB byte (round(a*255)) · durations in ms
 // dark element packs: see $extensions.overrides.elementsDark
 // provenance: tokens/provenance.json · parity gate: _audit/token-pipeline-test.html
@@ -63,7 +63,7 @@ class CSTokens {
   static const Color accentInk = Color(0xFF45210E);
   static const Color accentGlow = Color(0x7AF4BA17);
   static const Color accentGradA = Color(0xFFF4BA17);
-  static const Color accentGradB = Color(0xFFFCAF91);
+  static const Color accentGradB = Color(0xFFF3B958);
   static const Color accentOnStrong = Color(0xFF1A1108);
   static const double depthBg = 0;
   static const double depthSection = 5;
@@ -116,6 +116,7 @@ class CSTokens {
   static const double radiusLg = 14;
   static const double radiusFull = 999;
   static const double breakpointXs = 0;
+  static const double breakpointPhone = 360;
   static const double breakpointSm = 640;
   static const double breakpointMd = 768;
   static const double breakpointLg = 1024;

package/tokens/provenance.json

@@ -1,10 +1,10 @@
 {
   "system": "CyberSkill Design System",
-  "release": "1.2.0",
+  "release": "1.3.9",
   "source": "tokens/tokens.dtcg.json",
-  "sourceSha256": "16b39bda3ee5b664e468777a5cb3868dd990fa2b8e595866ac8547311acbd9ca",
+  "sourceSha256": "6fab1afd9d3ef915ce0be3ce823a7a4f05eb8f6d79bac983e136f71d57522431",
   "dtcgStamp": {
-    "version": "1.2.0",
+    "version": "1.3.9",
     "generated": "2026-07-23"
   },
   "conversions": {
@@ -16,10 +16,10 @@
     "darkPackSuffix": "<Scope>Dark (APCA-derived)"
   },
   "counts": {
-    "baseTokens": 161,
+    "baseTokens": 162,
     "byType": {
       "color": 38,
-      "dimension": 79,
+      "dimension": 80,
       "number": 27,
       "shadow": 5,
       "duration": 4,
@@ -36,17 +36,17 @@
     {
       "file": "tokens/native/CSTokens.swift",
       "lang": "swift",
-      "sha256": "e30fc4cd3812889f798998962737ad5e73b4412570ced96a73a6fe0b97280437"
+      "sha256": "5b880d914d897f2cc4b511702bc951409bd392488451646423c887e2c6670d9b"
     },
     {
       "file": "tokens/native/CSTokens.kt",
       "lang": "kotlin",
-      "sha256": "b20806d0f8219a6e26eefe552e112985be1b7cffd583c3e83f12cf01daf50ab4"
+      "sha256": "d94ec2bc1ddf3eb715a1dd3c22815aafd68a1e43b3fdb77b1cfe864772b1ab86"
     },
     {
       "file": "tokens/native/cs_tokens.dart",
       "lang": "dart",
-      "sha256": "56ad7d6bdcd60140a442c1193d863eb062ac43a1d980d3e6ca50d9f1f69ea5a2"
+      "sha256": "350766e8147d1a5d32df9feb8cf0e27e3058fae99ce54ffa971c5957a2cf7acd"
     }
   ]
 }

package/tokens/spacing.css

@@ -21,8 +21,9 @@
   --cs-radius-lg: 14px;  /* cards/panels in product surfaces */
   --cs-radius-full: 999px;
 
-  /* Breakpoints (mobile-first) */
+  /* Breakpoints (mobile-first). `phone` is the justified 320-reflow stop (UX-003). */
   --cs-breakpoint-xs: 0px;
+  --cs-breakpoint-phone: 360px;
   --cs-breakpoint-sm: 640px;
   --cs-breakpoint-md: 768px;
   --cs-breakpoint-lg: 1024px;

package/tokens/tokens.dtcg.json

@@ -3,7 +3,7 @@
   "$extensions": {
     "com.cyberskill": {
       "system": "CyberSkill Design System",
-      "version": "1.2.0",
+      "version": "1.3.9",
       "generated": "2026-07-23",
       "source": "tokens/tokens.json",
       "note": "Scope overrides (dark/system theme · 15 element×variant packs) are carried under $extensions.overrides keyed by CSS selector — apply the matching selector on :root/ancestor to activate.",
@@ -77,9 +77,9 @@
             "--cs-accent-ink": "#292414",
             "--cs-accent-glow": "rgba(248, 233, 192, 0.48)",
             "--cs-accent-grad-a": "#F8E9C0",
-            "--cs-accent-grad-b": "#FCAF91",
+            "--cs-accent-grad-b": "#F3B958",
             "--cs-color-text-accent": "#90825E",
-            "--cs-color-link": "#90825E"
+            "--cs-color-link": "#7B6D4A"
           },
           "tho": {
             "--cs-accent": "#F4BA17",
@@ -91,7 +91,7 @@
             "--cs-accent-ink": "#45210E",
             "--cs-accent-glow": "rgba(244, 186, 23, 0.48)",
             "--cs-accent-grad-a": "#F4BA17",
-            "--cs-accent-grad-b": "#FCAF91"
+            "--cs-accent-grad-b": "#F3B958"
           },
           "tho.clay": {
             "--cs-accent": "#513801",
@@ -103,7 +103,7 @@
             "--cs-accent-ink": "#2D220E",
             "--cs-accent-glow": "rgba(81, 56, 1, 0.48)",
             "--cs-accent-grad-a": "#513801",
-            "--cs-accent-grad-b": "#FCAF91",
+            "--cs-accent-grad-b": "#F3B958",
             "--cs-color-text-accent": "#201300",
             "--cs-color-link": "#201300"
           },
@@ -119,7 +119,7 @@
             "--cs-accent-grad-a": "#FFE1D8",
             "--cs-accent-grad-b": "#F4BA17",
             "--cs-color-text-accent": "#967C75",
-            "--cs-color-link": "#967C75"
+            "--cs-color-link": "#846B64"
           },
           "hoa": {
             "--cs-accent": "#FCAF91",
@@ -133,7 +133,7 @@
             "--cs-accent-grad-a": "#FCAF91",
             "--cs-accent-grad-b": "#F4BA17",
             "--cs-color-text-accent": "#B47054",
-            "--cs-color-link": "#B47054"
+            "--cs-color-link": "#A15E43"
           },
           "hoa.lava": {
             "--cs-accent": "#622B06",
@@ -161,7 +161,7 @@
             "--cs-accent-grad-a": "#C0F5FC",
             "--cs-accent-grad-b": "#A3D768",
             "--cs-color-text-accent": "#5A8A90",
-            "--cs-color-link": "#5A8A90"
+            "--cs-color-link": "#48787E"
           },
           "thuy": {
             "--cs-accent": "#2EDBF7",
@@ -175,7 +175,7 @@
             "--cs-accent-grad-a": "#2EDBF7",
             "--cs-accent-grad-b": "#A3D768",
             "--cs-color-text-accent": "#108EA0",
-            "--cs-color-link": "#108EA0"
+            "--cs-color-link": "#027B8B"
           },
           "thuy.ocean": {
             "--cs-accent": "#004554",
@@ -203,7 +203,7 @@
             "--cs-accent-grad-a": "#E1F1C8",
             "--cs-accent-grad-b": "#FCAF91",
             "--cs-color-text-accent": "#7C8965",
-            "--cs-color-link": "#7C8965"
+            "--cs-color-link": "#687451"
           },
           "moc": {
             "--cs-accent": "#A3D768",
@@ -217,7 +217,7 @@
             "--cs-accent-grad-a": "#A3D768",
             "--cs-accent-grad-b": "#FCAF91",
             "--cs-color-text-accent": "#629122",
-            "--cs-color-link": "#629122"
+            "--cs-color-link": "#517B13"
           },
           "moc.forest": {
             "--cs-accent": "#1A4A01",
@@ -245,7 +245,7 @@
             "--cs-accent-grad-a": "#FEE5C7",
             "--cs-accent-grad-b": "#2EDBF7",
             "--cs-color-text-accent": "#947F65",
-            "--cs-color-link": "#947F65"
+            "--cs-color-link": "#826D54"
           },
           "kim": {
             "--cs-accent": "#F3B958",
@@ -259,7 +259,7 @@
             "--cs-accent-grad-a": "#F3B958",
             "--cs-accent-grad-b": "#2EDBF7",
             "--cs-color-text-accent": "#AC780B",
-            "--cs-color-link": "#AC780B"
+            "--cs-color-link": "#966700"
           },
           "kim.steel": {
             "--cs-accent": "#503901",
@@ -641,7 +641,7 @@
       "$type": "color"
     },
     "--cs-accent-grad-b": {
-      "$value": "#FCAF91",
+      "$value": "#F3B958",
       "$type": "color"
     },
     "--cs-accent-on-strong": {
@@ -1012,6 +1012,11 @@
       "$value": "0px",
       "$type": "dimension"
     },
+    "--cs-breakpoint-phone": {
+      "$value": "360px",
+      "$type": "dimension",
+      "$description": "Justified small-phone / 320-reflow stop (UX-003)."
+    },
     "--cs-breakpoint-sm": {
       "$value": "640px",
       "$type": "dimension"