@cyberskill/design 1.0.0

package/tokens/colors.css

@@ -0,0 +1,77 @@
+/* CyberSkill — colour tokens.
+ * Anchors are IMMUTABLE: Umber #45210E (primary brand), Ochre #F4BA17 (accent).
+ * Warm earth palette; every neutral is warmed toward umber, never cold grey.
+ * Light is the default theme; dark/system are opt-in via [data-theme]. */
+:root {
+  color-scheme: light;
+
+  /* ---- Anchor brand (immutable) ---- */
+  --cs-color-brand-umber: #45210E;   /* oklch(0.265 0.073 44.3) */
+  --cs-color-brand-ochre: #F4BA17;   /* oklch(0.811 0.162 83.7) */
+
+  /* ---- Surfaces (warm paper → white → raised) ---- */
+  --cs-color-surface-page: #FFFDF8;   /* default page background */
+  --cs-color-surface-panel: #FFFFFF;  /* cards, panels */
+  --cs-color-surface-raised: #FBF4E9; /* hover / secondary fill */
+
+  /* ---- Text ---- */
+  --cs-color-text-primary: #45210E;  /* = Umber */
+  --cs-color-text-inverse: #FFFFFF;
+  --cs-color-text-accent: #6E3B0E;   /* accessible ochre-adjacent link/accent text */
+  --cs-color-text-muted: #6E5A4C;    /* APCA-safe secondary text on page */
+
+  /* ---- Semantic foregrounds ---- */
+  --cs-color-semantic-success: #166534;
+  --cs-color-semantic-danger: #B42318;
+  --cs-color-semantic-warning: #92400E;
+  --cs-color-semantic-info: #1D4ED8;
+
+  /* ---- Accent alias + border ---- */
+  --cs-color-accent-ochre: #F4BA17;  /* focus rings */
+  --cs-color-border-default: #E7D9C6; /* warm hairline */
+
+  /* ---- Link convention (add here so editor-added links inherit brand) ---- */
+  --cs-color-link: #6E3B0E;
+  --cs-color-link-hover: #45210E;
+}
+
+a { color: var(--cs-color-link); text-underline-offset: 0.15em; }
+a:hover { color: var(--cs-color-link-hover); }
+
+/* ---- Theme layer: warm-dark (hue retained, never cold). Opt-in. ---- */
+[data-theme="dark"] {
+  color-scheme: dark;
+  --cs-color-surface-page: #1a1108;
+  --cs-color-surface-panel: #221710;
+  --cs-color-surface-raised: #2b1e14;
+  --cs-color-text-primary: #f5ead9;
+  --cs-color-text-inverse: #1a1108;
+  --cs-color-text-accent: #f4ba17;
+  --cs-color-text-muted: #c9b7a3;
+  --cs-color-semantic-success: #4ADE80;
+  --cs-color-semantic-danger: #F87171;
+  --cs-color-semantic-warning: #FBBF24;
+  --cs-color-semantic-info: #7CB2FB;
+  --cs-color-border-default: #4a3a2c;
+  --cs-color-link: #f4ba17;
+  --cs-color-link-hover: #f5ead9;
+}
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"] {
+    color-scheme: dark;
+    --cs-color-surface-page: #1a1108;
+    --cs-color-surface-panel: #221710;
+    --cs-color-surface-raised: #2b1e14;
+    --cs-color-text-primary: #f5ead9;
+    --cs-color-text-inverse: #1a1108;
+    --cs-color-text-accent: #f4ba17;
+    --cs-color-text-muted: #c9b7a3;
+    --cs-color-semantic-success: #4ADE80;
+    --cs-color-semantic-danger: #F87171;
+    --cs-color-semantic-warning: #FBBF24;
+    --cs-color-semantic-info: #7CB2FB;
+    --cs-color-border-default: #4a3a2c;
+    --cs-color-link: #f4ba17;
+    --cs-color-link-hover: #f5ead9;
+  }
+}

package/tokens/component-tokens.css

@@ -0,0 +1,46 @@
+/* CyberSkill — component-level tokens (Button, TextField). File: component-tokens.css.
+ * Exact values from @cyberskill/tokens. Buttons carry a full size ramp with a
+ * 44px comfortable default touch target; TextField matches. */
+:root {
+  /* Button */
+  --cs-component-button-primary-bg: #45210E;
+  --cs-component-button-primary-fg: #FFFFFF;
+  --cs-component-button-gap: 8px;
+  --cs-component-button-radius: 8px;
+  --cs-component-button-xs-paddingY: 4px;
+  --cs-component-button-xs-paddingX: 10px;
+  --cs-component-button-xs-minHeight: 28px;
+  --cs-component-button-xs-minWidth: 28px;
+  --cs-component-button-xs-minHeight-coarse: 36px;
+  --cs-component-button-sm-paddingY: 8px;
+  --cs-component-button-sm-paddingX: 14px;
+  --cs-component-button-sm-minHeight: 36px;
+  --cs-component-button-sm-minHeight-coarse: 40px;
+  --cs-component-button-md-paddingY: 12px;
+  --cs-component-button-md-paddingX: 20px;
+  --cs-component-button-md-minHeight: 44px;
+  --cs-component-button-md-minHeight-coarse: 44px;
+  --cs-component-button-lg-paddingY: 16px;
+  --cs-component-button-lg-paddingX: 28px;
+  --cs-component-button-lg-minHeight: 52px;
+
+  /* TextField */
+  --cs-component-textfield-border-default: #BFA58F;
+  --cs-component-textfield-paddingY: 10px;
+  --cs-component-textfield-paddingX: 12px;
+  --cs-component-textfield-minHeight: 44px;
+}
+
+/* Dark theme: CTA becomes Ochre-on-dark; field border warms up. */
+[data-theme="dark"] {
+  --cs-component-button-primary-bg: #f4ba17;
+  --cs-component-button-primary-fg: #1a1108;
+  --cs-component-textfield-border-default: #5a4636;
+}
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"] {
+    --cs-component-button-primary-bg: #f4ba17;
+    --cs-component-button-primary-fg: #1a1108;
+    --cs-component-textfield-border-default: #5a4636;
+  }
+}

package/tokens/elements.css

@@ -0,0 +1,300 @@
+/* CyberSkill — Ngũ Hành elemental identity (the L1 product layer).
+ * 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.
+ *
+ * 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. */
+:root {
+  --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;
+}
+
+/* ---- 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). */
+[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);
+  --cs-color-surface-raised: color-mix(in oklab, var(--cs-accent) 15%, #FBF4E9);
+  --cs-color-border-default: color-mix(in oklab, var(--cs-accent) 40%, #E7D9C6);
+}
+[data-theme="dark"] [data-cs-element], [data-cs-element][data-theme="dark"] {
+  --cs-color-surface-panel: color-mix(in oklab, var(--cs-accent) 10%, #221710);
+  --cs-color-surface-page: color-mix(in oklab, var(--cs-accent) 8%, #1a1108);
+  --cs-color-surface-raised: color-mix(in oklab, var(--cs-accent) 14%, #2b1e14);
+  --cs-color-border-default: color-mix(in oklab, var(--cs-accent) 40%, #4a3a2c);
+}
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"] [data-cs-element], [data-cs-element][data-theme="system"] {
+    --cs-color-surface-panel: color-mix(in oklab, var(--cs-accent) 10%, #221710);
+    --cs-color-surface-page: color-mix(in oklab, var(--cs-accent) 8%, #1a1108);
+    --cs-color-surface-raised: color-mix(in oklab, var(--cs-accent) 14%, #2b1e14);
+    --cs-color-border-default: color-mix(in oklab, var(--cs-accent) 40%, #4a3a2c);
+  }
+}
+
+/* ---- Thổ · Earth — the mother brand (explicit; equals the defaults) ---- */
+[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;
+}
+[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;
+}
+
+/* ---- Hỏa · Fire — energy. Variants: ember (default) · lava · plasma ---- */
+[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;
+}
+[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;
+}
+
+/* ---- Thủy · Water — flow. Variants: river (default) · ocean · mist ---- */
+[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;
+}
+[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;
+}
+
+/* ---- Mộc · Wood — growth. Variants: leaf (default) · bamboo · forest ---- */
+[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;
+}
+[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;
+}
+[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;
+}
+
+/* ---- Kim · Metal — precision. Variants: champagne (default) · steel · titanium ---- */
+[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;
+}
+[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;
+}
+
+/* ---- 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. ---- */
+[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);
+  --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 (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> ---- */
+.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). ---- */
+[data-theme="dark"][data-cs-element="tho"] {
+  --cs-accent-bright: #FEC42C;
+  --cs-accent-strong: #795507;
+  --cs-accent-on: #f5ead9;
+  --cs-accent-tint: #2F2203;
+  --cs-accent-ink: #FEC849;
+}
+[data-theme="dark"][data-cs-element="tho"][data-cs-variant="clay"] {
+  --cs-accent: #F3A372;
+  --cs-accent-bright: #F4C5A3;
+  --cs-accent-strong: #864927;
+  --cs-accent-on: #f5ead9;
+  --cs-accent-tint: #371C0B;
+  --cs-accent-ink: #F7C8A6;
+}
+[data-theme="dark"][data-cs-element="tho"][data-cs-variant="sand"] {
+  --cs-accent-strong: #725615;
+  --cs-accent-on: #f5ead9;
+  --cs-accent-tint: #2F2203;
+  --cs-accent-ink: #EFDCB2;
+}
+[data-theme="dark"][data-cs-element="hoa"] {
+  --cs-accent: #FB9E7A;
+  --cs-accent-bright: #FEC099;
+  --cs-accent-strong: #9F3405;
+  --cs-accent-on: #f5ead9;
+  --cs-accent-tint: #381B10;
+  --cs-accent-ink: #FEC5A1;
+}
+[data-theme="dark"][data-cs-element="hoa"][data-cs-variant="lava"] {
+  --cs-accent: #FE9982;
+  --cs-accent-bright: #FFBF9E;
+  --cs-accent-on: #f5ead9;
+  --cs-accent-tint: #391A13;
+  --cs-accent-ink: #FFC4A5;
+}
+[data-theme="dark"][data-cs-element="hoa"][data-cs-variant="plasma"] {
+  --cs-accent: #FD97A3;
+  --cs-accent-bright: #FDBECA;
+  --cs-accent-strong: #A91A43;
+  --cs-accent-on: #f5ead9;
+  --cs-accent-tint: #38191D;
+  --cs-accent-ink: #FDC3CE;
+}
+[data-theme="dark"][data-cs-element="thuy"] {
+  --cs-accent: #7FC0CE;
+  --cs-accent-bright: #ACD7E1;
+  --cs-accent-on: #f5ead9;
+  --cs-accent-tint: #042930;
+  --cs-accent-ink: #AFDAE4;
+}
+[data-theme="dark"][data-cs-element="thuy"][data-cs-variant="ocean"] {
+  --cs-accent: #87B9DD;
+  --cs-accent-bright: #B2D6EA;
+  --cs-accent-on: #f5ead9;
+  --cs-accent-tint: #08273A;
+  --cs-accent-ink: #B2D6EA;
+}
+[data-theme="dark"][data-cs-element="thuy"][data-cs-variant="mist"] {
+  --cs-accent-strong: #3F5F65;
+  --cs-accent-on: #f5ead9;
+  --cs-accent-tint: #0F282C;
+  --cs-accent-ink: #C4DADD;
+}
+[data-theme="dark"][data-cs-element="moc"] {
+  --cs-accent: #9BBE78;
+  --cs-accent-bright: #BFD88D;
+  --cs-accent-strong: #44622D;
+  --cs-accent-on: #f5ead9;
+  --cs-accent-tint: #1C290D;
+  --cs-accent-ink: #C2DB90;
+}
+[data-theme="dark"][data-cs-element="moc"][data-cs-variant="bamboo"] {
+  --cs-accent-strong: #4C6421;
+  --cs-accent-on: #f5ead9;
+  --cs-accent-tint: #1F280A;
+  --cs-accent-ink: #C7D99E;
+}
+[data-theme="dark"][data-cs-element="moc"][data-cs-variant="forest"] {
+  --cs-accent: #9EBE8D;
+  --cs-accent-bright: #BDD8A4;
+  --cs-accent-on: #f5ead9;
+  --cs-accent-tint: #19290F;
+  --cs-accent-ink: #C0DBA7;
+}
+[data-theme="dark"][data-cs-element="kim"] {
+  --cs-accent-strong: #675A4A;
+  --cs-accent-on: #f5ead9;
+  --cs-accent-tint: #2D220F;
+  --cs-accent-ink: #DBCFB9;
+}
+[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-on: #f5ead9;
+  --cs-accent-tint: #2B2217;
+  --cs-accent-ink: #D9CFC0;
+}

package/tokens/elevation.css

@@ -0,0 +1,46 @@
+/* CyberSkill — elevation: depth (z), Liquid Glass material scalars, shadows.
+ * Liquid Glass (DESIGN.md Part 21) is the default surface treatment — five
+ * materials (Whisper / Light / Standard / Heavy / Solid). Scalars live here;
+ * the material composition + classes live in base/glass.css.
+ * Shadow values are warm (umber-tinted), taken from the shipped surfaces. */
+:root {
+  /* ---- Depth (z-index) ---- */
+  --cs-depth-bg: 0;        /* @kind other */ /* page background / hero washes */
+  --cs-depth-section: 5;   /* @kind other */ /* major sections (matte, no glass) */
+  --cs-depth-card: 10;     /* @kind other */ /* cards/panels (Standard Glass) */
+  --cs-depth-nav: 50;      /* @kind other */ /* sticky nav (Light Glass) */
+  --cs-depth-modal: 100;   /* @kind other */ /* modals, command palette (Heavy Glass) */
+  --cs-depth-toast: 200;   /* @kind other */ /* toasts, popovers, dropdowns (Heavy Glass) */
+
+  /* ---- Glass material scalars (blur / saturate / surface opacity) ---- */
+  --cs-glass-whisper-blur: 8px;   --cs-glass-whisper-saturate: 110%; --cs-glass-whisper-opacity: 60%;
+  --cs-glass-light-blur: 12px;    --cs-glass-light-saturate: 130%;   --cs-glass-light-opacity: 70%;
+  --cs-glass-standard-blur: 16px; --cs-glass-standard-saturate: 150%; --cs-glass-standard-opacity: 80%;
+  --cs-glass-heavy-blur: 24px;    --cs-glass-heavy-saturate: 180%;   --cs-glass-heavy-opacity: 90%;
+
+  /* ---- Shadow scale (warm; umber-tinted) ---- */
+  --cs-shadow-xs: 0 1px 2px rgba(69, 33, 14, 0.06);
+  --cs-shadow-sm: 0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06); /* standard glass card */
+  --cs-shadow-md: 0 12px 30px rgba(31, 19, 11, 0.18);   /* popover / AI panel */
+  --cs-shadow-lg: 0 20px 60px rgba(69, 33, 14, 0.18);   /* heavy glass */
+  --cs-shadow-xl: 0 24px 80px rgba(31, 19, 11, 0.26);   /* dialog */
+}
+
+/* Dark theme: warm-umber shadows vanish on dark surfaces, so switch to deeper
+ * near-black shadows that actually read as elevation. Opt-in with the light ones. */
+[data-theme="dark"] {
+  --cs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
+  --cs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42);
+  --cs-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50);
+  --cs-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
+  --cs-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62);
+}
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"] {
+    --cs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
+    --cs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.34), 0 8px 24px rgba(0, 0, 0, 0.42);
+    --cs-shadow-md: 0 12px 30px rgba(0, 0, 0, 0.50);
+    --cs-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
+    --cs-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62);
+  }
+}

package/tokens/fonts.css

@@ -0,0 +1,51 @@
+/* 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.
+ * Files fetched from Google Fonts and committed locally; no CDN dependency. */
+
+/* Be Vietnam Pro */
+@font-face{font-family:'Be Vietnam Pro';font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/bevietnampro-400i-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:'Be Vietnam Pro';font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/bevietnampro-400i-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:'Be Vietnam Pro';font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/bevietnampro-400i-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;}
+@font-face{font-family:'Be Vietnam Pro';font-style:italic;font-weight:600;font-display:swap;src:url("../fonts/bevietnampro-600i-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:'Be Vietnam Pro';font-style:italic;font-weight:600;font-display:swap;src:url("../fonts/bevietnampro-600i-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:'Be Vietnam Pro';font-style:italic;font-weight:600;font-display:swap;src:url("../fonts/bevietnampro-600i-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;}
+@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/bevietnampro-300-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:'Be Vietnam Pro';font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/bevietnampro-300-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:'Be Vietnam Pro';font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/bevietnampro-300-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;}
+@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/bevietnampro-400-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:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/bevietnampro-400-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:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/bevietnampro-400-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;}
+@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/bevietnampro-500-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:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/bevietnampro-500-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:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/bevietnampro-500-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;}
+@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/bevietnampro-600-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:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/bevietnampro-600-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:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/bevietnampro-600-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;}
+@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/bevietnampro-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:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/bevietnampro-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:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/bevietnampro-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;}
+@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/bevietnampro-800-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:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/bevietnampro-800-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:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/bevietnampro-800-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;}
+
+/* JetBrains Mono */
+@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrainsmono-400-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
+@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrainsmono-400-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
+@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrainsmono-400-greek.woff2") format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
+@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/jetbrainsmono-400-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:400;font-display:swap;src:url("../fonts/jetbrainsmono-400-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:400;font-display:swap;src:url("../fonts/jetbrainsmono-400-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;}
+@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrainsmono-500-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
+@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrainsmono-500-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
+@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrainsmono-500-greek.woff2") format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
+@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/jetbrainsmono-500-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:500;font-display:swap;src:url("../fonts/jetbrainsmono-500-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:500;font-display:swap;src:url("../fonts/jetbrainsmono-500-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;}
+@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jetbrainsmono-700-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
+@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jetbrainsmono-700-cyrillic.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
+@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/jetbrainsmono-700-greek.woff2") format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
+@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;}

package/tokens/motion.css

@@ -0,0 +1,25 @@
+/* CyberSkill — motion tokens (convention).
+ * The system favours calm, purposeful motion and always honours
+ * prefers-reduced-motion. Durations are short; easing is a soft
+ * decelerate. These are conventions layered on the doctrine, not raw
+ * source tokens — keep motion subtle (fades, small translate/scale). */
+:root {
+  --cs-duration-instant: 80ms; /* @kind other */
+  --cs-duration-fast: 120ms; /* @kind other */
+  --cs-duration-base: 200ms; /* @kind other */
+  --cs-duration-slow: 320ms; /* @kind other */
+
+  --cs-ease-standard: cubic-bezier(0.2, 0, 0, 1);    /* @kind other */ /* decelerate — most transitions */
+  --cs-ease-entrance: cubic-bezier(0, 0, 0, 1);      /* @kind other */ /* enter */
+  --cs-ease-exit: cubic-bezier(0.4, 0, 1, 1);        /* @kind other */ /* exit */
+  --cs-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);  /* @kind other */
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --cs-duration-instant: 0ms; /* @kind other */
+    --cs-duration-fast: 0ms; /* @kind other */
+    --cs-duration-base: 0ms; /* @kind other */
+    --cs-duration-slow: 0ms; /* @kind other */
+  }
+}