@cyberskill/design 1.0.0

package/tokens/tokens.dtcg.json

@@ -0,0 +1,1222 @@
+{
+  "$description": "CyberSkill Design System — design tokens in W3C DTCG format (design-tokens.github.io). Importable by Tokens Studio for Figma, Style Dictionary, and other DTCG-aware tools. Token keys are the literal CSS custom-property names for lossless round-trip to styles.css. Generated from tokens/*.css via tokens/tokens.json — regenerate after any token change.",
+  "$extensions": {
+    "com.cyberskill": {
+      "system": "CyberSkill Design System",
+      "version": "1.0.0",
+      "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.",
+      "overrides": {
+        "themes": {
+          "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",
+            "--cs-component-button-primary-bg": "#f4ba17",
+            "--cs-component-button-primary-fg": "#1a1108",
+            "--cs-component-textfield-border-default": "#5a4636",
+            "--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)"
+          },
+          "system": {
+            "--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",
+            "--cs-component-button-primary-bg": "#f4ba17",
+            "--cs-component-button-primary-fg": "#1a1108",
+            "--cs-component-textfield-border-default": "#5a4636",
+            "--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)"
+          }
+        },
+        "elements": {
+          "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"
+          },
+          "tho.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"
+          },
+          "tho.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"
+          },
+          "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"
+          },
+          "hoa.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"
+          },
+          "hoa.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"
+          },
+          "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"
+          },
+          "thuy.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"
+          },
+          "thuy.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"
+          },
+          "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"
+          },
+          "moc.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"
+          },
+          "moc.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": {
+            "--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"
+          },
+          "kim.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"
+          },
+          "kim.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"
+          }
+        },
+        "elementsDark": {
+          "tho": {
+            "--cs-accent-bright": "#FEC42C",
+            "--cs-accent-strong": "#795507",
+            "--cs-accent-on": "#f5ead9",
+            "--cs-accent-tint": "#2F2203",
+            "--cs-accent-ink": "#FEC849"
+          },
+          "tho-clay": {
+            "--cs-accent": "#F3A372",
+            "--cs-accent-bright": "#F4C5A3",
+            "--cs-accent-strong": "#864927",
+            "--cs-accent-on": "#f5ead9",
+            "--cs-accent-tint": "#371C0B",
+            "--cs-accent-ink": "#F7C8A6"
+          },
+          "tho-sand": {
+            "--cs-accent-strong": "#725615",
+            "--cs-accent-on": "#f5ead9",
+            "--cs-accent-tint": "#2F2203",
+            "--cs-accent-ink": "#EFDCB2"
+          },
+          "hoa": {
+            "--cs-accent": "#FB9E7A",
+            "--cs-accent-bright": "#FEC099",
+            "--cs-accent-strong": "#9F3405",
+            "--cs-accent-on": "#f5ead9",
+            "--cs-accent-tint": "#381B10",
+            "--cs-accent-ink": "#FEC5A1"
+          },
+          "hoa-lava": {
+            "--cs-accent": "#FE9982",
+            "--cs-accent-bright": "#FFBF9E",
+            "--cs-accent-on": "#f5ead9",
+            "--cs-accent-tint": "#391A13",
+            "--cs-accent-ink": "#FFC4A5"
+          },
+          "hoa-plasma": {
+            "--cs-accent": "#FD97A3",
+            "--cs-accent-bright": "#FDBECA",
+            "--cs-accent-strong": "#A91A43",
+            "--cs-accent-on": "#f5ead9",
+            "--cs-accent-tint": "#38191D",
+            "--cs-accent-ink": "#FDC3CE"
+          },
+          "thuy": {
+            "--cs-accent": "#7FC0CE",
+            "--cs-accent-bright": "#ACD7E1",
+            "--cs-accent-on": "#f5ead9",
+            "--cs-accent-tint": "#042930",
+            "--cs-accent-ink": "#AFDAE4"
+          },
+          "thuy-ocean": {
+            "--cs-accent": "#87B9DD",
+            "--cs-accent-bright": "#B2D6EA",
+            "--cs-accent-on": "#f5ead9",
+            "--cs-accent-tint": "#08273A",
+            "--cs-accent-ink": "#B2D6EA"
+          },
+          "thuy-mist": {
+            "--cs-accent-strong": "#3F5F65",
+            "--cs-accent-on": "#f5ead9",
+            "--cs-accent-tint": "#0F282C",
+            "--cs-accent-ink": "#C4DADD"
+          },
+          "moc": {
+            "--cs-accent": "#9BBE78",
+            "--cs-accent-bright": "#BFD88D",
+            "--cs-accent-strong": "#44622D",
+            "--cs-accent-on": "#f5ead9",
+            "--cs-accent-tint": "#1C290D",
+            "--cs-accent-ink": "#C2DB90"
+          },
+          "moc-bamboo": {
+            "--cs-accent-strong": "#4C6421",
+            "--cs-accent-on": "#f5ead9",
+            "--cs-accent-tint": "#1F280A",
+            "--cs-accent-ink": "#C7D99E"
+          },
+          "moc-forest": {
+            "--cs-accent": "#9EBE8D",
+            "--cs-accent-bright": "#BDD8A4",
+            "--cs-accent-on": "#f5ead9",
+            "--cs-accent-tint": "#19290F",
+            "--cs-accent-ink": "#C0DBA7"
+          },
+          "kim": {
+            "--cs-accent-strong": "#675A4A",
+            "--cs-accent-on": "#f5ead9",
+            "--cs-accent-tint": "#2D220F",
+            "--cs-accent-ink": "#DBCFB9"
+          },
+          "kim-steel": {
+            "--cs-accent": "#B2B6B6",
+            "--cs-accent-bright": "#CCD0D0",
+            "--cs-accent-strong": "#555B5D",
+            "--cs-accent-on": "#f5ead9",
+            "--cs-accent-tint": "#222525",
+            "--cs-accent-ink": "#CFD3D3"
+          },
+          "kim-titanium": {
+            "--cs-accent": "#BFB3A5",
+            "--cs-accent-on": "#f5ead9",
+            "--cs-accent-tint": "#2B2217",
+            "--cs-accent-ink": "#D9CFC0"
+          }
+        }
+      }
+    }
+  },
+  "color": {
+    "$description": "Core semantic colours (brand, surface, text, semantic, border, link).",
+    "--cs-color-brand-umber": {
+      "$value": "#45210E",
+      "$type": "color"
+    },
+    "--cs-color-brand-ochre": {
+      "$value": "#F4BA17",
+      "$type": "color"
+    },
+    "--cs-color-surface-page": {
+      "$value": "#FFFDF8",
+      "$type": "color"
+    },
+    "--cs-color-surface-panel": {
+      "$value": "#FFFFFF",
+      "$type": "color"
+    },
+    "--cs-color-surface-raised": {
+      "$value": "#FBF4E9",
+      "$type": "color"
+    },
+    "--cs-color-text-primary": {
+      "$value": "#45210E",
+      "$type": "color"
+    },
+    "--cs-color-text-inverse": {
+      "$value": "#FFFFFF",
+      "$type": "color"
+    },
+    "--cs-color-text-accent": {
+      "$value": "#6E3B0E",
+      "$type": "color"
+    },
+    "--cs-color-text-muted": {
+      "$value": "#6E5A4C",
+      "$type": "color"
+    },
+    "--cs-color-semantic-success": {
+      "$value": "#166534",
+      "$type": "color"
+    },
+    "--cs-color-semantic-danger": {
+      "$value": "#B42318",
+      "$type": "color"
+    },
+    "--cs-color-semantic-warning": {
+      "$value": "#92400E",
+      "$type": "color"
+    },
+    "--cs-color-semantic-info": {
+      "$value": "#1D4ED8",
+      "$type": "color"
+    },
+    "--cs-color-accent-ochre": {
+      "$value": "#F4BA17",
+      "$type": "color"
+    },
+    "--cs-color-border-default": {
+      "$value": "#E7D9C6",
+      "$type": "color"
+    },
+    "--cs-color-link": {
+      "$value": "#6E3B0E",
+      "$type": "color"
+    },
+    "--cs-color-link-hover": {
+      "$value": "#45210E",
+      "$type": "color"
+    }
+  },
+  "component": {
+    "$description": "Component-level design decisions (button, textfield sizing & colour).",
+    "--cs-component-button-primary-bg": {
+      "$value": "#45210E",
+      "$type": "color"
+    },
+    "--cs-component-button-primary-fg": {
+      "$value": "#FFFFFF",
+      "$type": "color"
+    },
+    "--cs-component-button-gap": {
+      "$value": "8px",
+      "$type": "dimension"
+    },
+    "--cs-component-button-radius": {
+      "$value": "8px",
+      "$type": "dimension"
+    },
+    "--cs-component-button-xs-paddingY": {
+      "$value": "4px",
+      "$type": "dimension"
+    },
+    "--cs-component-button-xs-paddingX": {
+      "$value": "10px",
+      "$type": "dimension"
+    },
+    "--cs-component-button-xs-minHeight": {
+      "$value": "28px",
+      "$type": "dimension"
+    },
+    "--cs-component-button-xs-minWidth": {
+      "$value": "28px",
+      "$type": "dimension"
+    },
+    "--cs-component-button-xs-minHeight-coarse": {
+      "$value": "36px",
+      "$type": "dimension"
+    },
+    "--cs-component-button-sm-paddingY": {
+      "$value": "8px",
+      "$type": "dimension"
+    },
+    "--cs-component-button-sm-paddingX": {
+      "$value": "14px",
+      "$type": "dimension"
+    },
+    "--cs-component-button-sm-minHeight": {
+      "$value": "36px",
+      "$type": "dimension"
+    },
+    "--cs-component-button-sm-minHeight-coarse": {
+      "$value": "40px",
+      "$type": "dimension"
+    },
+    "--cs-component-button-md-paddingY": {
+      "$value": "12px",
+      "$type": "dimension"
+    },
+    "--cs-component-button-md-paddingX": {
+      "$value": "20px",
+      "$type": "dimension"
+    },
+    "--cs-component-button-md-minHeight": {
+      "$value": "44px",
+      "$type": "dimension"
+    },
+    "--cs-component-button-md-minHeight-coarse": {
+      "$value": "44px",
+      "$type": "dimension"
+    },
+    "--cs-component-button-lg-paddingY": {
+      "$value": "16px",
+      "$type": "dimension"
+    },
+    "--cs-component-button-lg-paddingX": {
+      "$value": "28px",
+      "$type": "dimension"
+    },
+    "--cs-component-button-lg-minHeight": {
+      "$value": "52px",
+      "$type": "dimension"
+    },
+    "--cs-component-textfield-border-default": {
+      "$value": "#BFA58F",
+      "$type": "color"
+    },
+    "--cs-component-textfield-paddingY": {
+      "$value": "10px",
+      "$type": "dimension"
+    },
+    "--cs-component-textfield-paddingX": {
+      "$value": "12px",
+      "$type": "dimension"
+    },
+    "--cs-component-textfield-minHeight": {
+      "$value": "44px",
+      "$type": "dimension"
+    }
+  },
+  "accent": {
+    "$description": "Ngũ Hành elemental accent role tokens — reskinned per element×variant scope.",
+    "--cs-accent": {
+      "$value": "#F4BA17",
+      "$type": "color"
+    },
+    "--cs-accent-strong": {
+      "$value": "#B98200",
+      "$type": "color"
+    },
+    "--cs-accent-bright": {
+      "$value": "#F4BA17",
+      "$type": "color"
+    },
+    "--cs-accent-on": {
+      "$value": "#45210E",
+      "$type": "color"
+    },
+    "--cs-accent-tint": {
+      "$value": "#FBF4E9",
+      "$type": "color"
+    },
+    "--cs-accent-ink": {
+      "$value": "#45210E",
+      "$type": "color"
+    },
+    "--cs-accent-glow": {
+      "$value": "rgba(244, 186, 23, 0.5)",
+      "$type": "color"
+    },
+    "--cs-accent-grad-a": {
+      "$value": "#F4BA17",
+      "$type": "color"
+    },
+    "--cs-accent-grad-b": {
+      "$value": "#C77B4A",
+      "$type": "color"
+    }
+  },
+  "depth": {
+    "$description": "Elevation/stacking depth scale.",
+    "--cs-depth-bg": {
+      "$value": "0",
+      "$type": "number"
+    },
+    "--cs-depth-section": {
+      "$value": "5",
+      "$type": "number"
+    },
+    "--cs-depth-card": {
+      "$value": "10",
+      "$type": "number"
+    },
+    "--cs-depth-nav": {
+      "$value": "50",
+      "$type": "number"
+    },
+    "--cs-depth-modal": {
+      "$value": "100",
+      "$type": "number"
+    },
+    "--cs-depth-toast": {
+      "$value": "200",
+      "$type": "number"
+    }
+  },
+  "glass": {
+    "$description": "Liquid Glass material scalars — blur / saturate / surface opacity per material tier (tokens/elevation.css).",
+    "--cs-glass-whisper-blur": {
+      "$value": "8px",
+      "$type": "dimension"
+    },
+    "--cs-glass-whisper-saturate": {
+      "$value": 1.1,
+      "$type": "number",
+      "$description": "Backdrop saturate() multiplier of the whisper glass material. DTCG has no percentage type, so the closest legitimate $type is number (CSS 110% ÷ 100); the raw CSS form is preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "110%"
+        }
+      }
+    },
+    "--cs-glass-whisper-opacity": {
+      "$value": 0.6,
+      "$type": "number",
+      "$description": "Surface opacity of the whisper glass material. DTCG has no percentage type, so the closest legitimate $type is number (CSS 60% ÷ 100); the raw CSS form is preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "60%"
+        }
+      }
+    },
+    "--cs-glass-light-blur": {
+      "$value": "12px",
+      "$type": "dimension"
+    },
+    "--cs-glass-light-saturate": {
+      "$value": 1.3,
+      "$type": "number",
+      "$description": "Backdrop saturate() multiplier of the light glass material. DTCG has no percentage type, so the closest legitimate $type is number (CSS 130% ÷ 100); the raw CSS form is preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "130%"
+        }
+      }
+    },
+    "--cs-glass-light-opacity": {
+      "$value": 0.7,
+      "$type": "number",
+      "$description": "Surface opacity of the light glass material. DTCG has no percentage type, so the closest legitimate $type is number (CSS 70% ÷ 100); the raw CSS form is preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "70%"
+        }
+      }
+    },
+    "--cs-glass-standard-blur": {
+      "$value": "16px",
+      "$type": "dimension"
+    },
+    "--cs-glass-standard-saturate": {
+      "$value": 1.5,
+      "$type": "number",
+      "$description": "Backdrop saturate() multiplier of the standard glass material. DTCG has no percentage type, so the closest legitimate $type is number (CSS 150% ÷ 100); the raw CSS form is preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "150%"
+        }
+      }
+    },
+    "--cs-glass-standard-opacity": {
+      "$value": 0.8,
+      "$type": "number",
+      "$description": "Surface opacity of the standard glass material. DTCG has no percentage type, so the closest legitimate $type is number (CSS 80% ÷ 100); the raw CSS form is preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "80%"
+        }
+      }
+    },
+    "--cs-glass-heavy-blur": {
+      "$value": "24px",
+      "$type": "dimension"
+    },
+    "--cs-glass-heavy-saturate": {
+      "$value": 1.8,
+      "$type": "number",
+      "$description": "Backdrop saturate() multiplier of the heavy glass material. DTCG has no percentage type, so the closest legitimate $type is number (CSS 180% ÷ 100); the raw CSS form is preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "180%"
+        }
+      }
+    },
+    "--cs-glass-heavy-opacity": {
+      "$value": 0.9,
+      "$type": "number",
+      "$description": "Surface opacity of the heavy glass material. DTCG has no percentage type, so the closest legitimate $type is number (CSS 90% ÷ 100); the raw CSS form is preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "90%"
+        }
+      }
+    }
+  },
+  "shadow": {
+    "$description": "Elevation shadows (light + dark overrides).",
+    "--cs-shadow-xs": {
+      "$value": {
+        "color": "rgba(69, 33, 14, 0.06)",
+        "offsetX": "0px",
+        "offsetY": "1px",
+        "blur": "2px",
+        "spread": "0px"
+      },
+      "$type": "shadow",
+      "$description": "Structured from the CSS box-shadow string in tokens/elevation.css; the raw CSS form (native/agent emission source) is preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "0 1px 2px rgba(69, 33, 14, 0.06)"
+        }
+      }
+    },
+    "--cs-shadow-sm": {
+      "$value": [
+        {
+          "color": "rgba(69, 33, 14, 0.04)",
+          "offsetX": "0px",
+          "offsetY": "1px",
+          "blur": "3px",
+          "spread": "0px"
+        },
+        {
+          "color": "rgba(69, 33, 14, 0.06)",
+          "offsetX": "0px",
+          "offsetY": "8px",
+          "blur": "24px",
+          "spread": "0px"
+        }
+      ],
+      "$type": "shadow",
+      "$description": "Structured from the CSS box-shadow string in tokens/elevation.css; the raw CSS form (native/agent emission source) is preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "0 1px 3px rgba(69, 33, 14, 0.04), 0 8px 24px rgba(69, 33, 14, 0.06)"
+        }
+      }
+    },
+    "--cs-shadow-md": {
+      "$value": {
+        "color": "rgba(31, 19, 11, 0.18)",
+        "offsetX": "0px",
+        "offsetY": "12px",
+        "blur": "30px",
+        "spread": "0px"
+      },
+      "$type": "shadow",
+      "$description": "Structured from the CSS box-shadow string in tokens/elevation.css; the raw CSS form (native/agent emission source) is preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "0 12px 30px rgba(31, 19, 11, 0.18)"
+        }
+      }
+    },
+    "--cs-shadow-lg": {
+      "$value": {
+        "color": "rgba(69, 33, 14, 0.18)",
+        "offsetX": "0px",
+        "offsetY": "20px",
+        "blur": "60px",
+        "spread": "0px"
+      },
+      "$type": "shadow",
+      "$description": "Structured from the CSS box-shadow string in tokens/elevation.css; the raw CSS form (native/agent emission source) is preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "0 20px 60px rgba(69, 33, 14, 0.18)"
+        }
+      }
+    },
+    "--cs-shadow-xl": {
+      "$value": {
+        "color": "rgba(31, 19, 11, 0.26)",
+        "offsetX": "0px",
+        "offsetY": "24px",
+        "blur": "80px",
+        "spread": "0px"
+      },
+      "$type": "shadow",
+      "$description": "Structured from the CSS box-shadow string in tokens/elevation.css; the raw CSS form (native/agent emission source) is preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "0 24px 80px rgba(31, 19, 11, 0.26)"
+        }
+      }
+    }
+  },
+  "duration": {
+    "$description": "Motion durations (tokens/motion.css :root). Real values — the prefers-reduced-motion override collapses them to 0ms at runtime only, never in exports.",
+    "--cs-duration-instant": {
+      "$value": "80ms",
+      "$type": "duration"
+    },
+    "--cs-duration-fast": {
+      "$value": "120ms",
+      "$type": "duration"
+    },
+    "--cs-duration-base": {
+      "$value": "200ms",
+      "$type": "duration"
+    },
+    "--cs-duration-slow": {
+      "$value": "320ms",
+      "$type": "duration"
+    }
+  },
+  "ease": {
+    "--cs-ease-standard": {
+      "$value": [
+        0.2,
+        0,
+        0,
+        1
+      ],
+      "$type": "cubicBezier"
+    },
+    "--cs-ease-entrance": {
+      "$value": [
+        0,
+        0,
+        0,
+        1
+      ],
+      "$type": "cubicBezier"
+    },
+    "--cs-ease-exit": {
+      "$value": [
+        0.4,
+        0,
+        1,
+        1
+      ],
+      "$type": "cubicBezier"
+    },
+    "--cs-ease-emphasized": {
+      "$value": [
+        0.2,
+        0,
+        0,
+        1
+      ],
+      "$type": "cubicBezier"
+    }
+  },
+  "space": {
+    "$description": "Spacing scale.",
+    "--cs-space-0": {
+      "$value": "0px",
+      "$type": "dimension"
+    },
+    "--cs-space-1": {
+      "$value": "4px",
+      "$type": "dimension"
+    },
+    "--cs-space-2": {
+      "$value": "8px",
+      "$type": "dimension"
+    },
+    "--cs-space-3": {
+      "$value": "12px",
+      "$type": "dimension"
+    },
+    "--cs-space-4": {
+      "$value": "16px",
+      "$type": "dimension"
+    },
+    "--cs-space-5": {
+      "$value": "20px",
+      "$type": "dimension"
+    },
+    "--cs-space-6": {
+      "$value": "24px",
+      "$type": "dimension"
+    },
+    "--cs-space-8": {
+      "$value": "32px",
+      "$type": "dimension"
+    },
+    "--cs-space-10": {
+      "$value": "40px",
+      "$type": "dimension"
+    },
+    "--cs-space-12": {
+      "$value": "48px",
+      "$type": "dimension"
+    },
+    "--cs-space-16": {
+      "$value": "64px",
+      "$type": "dimension"
+    },
+    "--cs-space-20": {
+      "$value": "80px",
+      "$type": "dimension"
+    },
+    "--cs-space-24": {
+      "$value": "96px",
+      "$type": "dimension"
+    }
+  },
+  "radius": {
+    "$description": "Corner radius scale.",
+    "--cs-radius-sm": {
+      "$value": "4px",
+      "$type": "dimension"
+    },
+    "--cs-radius-md": {
+      "$value": "8px",
+      "$type": "dimension"
+    },
+    "--cs-radius-lg": {
+      "$value": "14px",
+      "$type": "dimension"
+    },
+    "--cs-radius-full": {
+      "$value": "999px",
+      "$type": "dimension"
+    }
+  },
+  "breakpoint": {
+    "$description": "Responsive breakpoints.",
+    "--cs-breakpoint-xs": {
+      "$value": "0px",
+      "$type": "dimension"
+    },
+    "--cs-breakpoint-sm": {
+      "$value": "640px",
+      "$type": "dimension"
+    },
+    "--cs-breakpoint-md": {
+      "$value": "768px",
+      "$type": "dimension"
+    },
+    "--cs-breakpoint-lg": {
+      "$value": "1024px",
+      "$type": "dimension"
+    },
+    "--cs-breakpoint-xl": {
+      "$value": "1280px",
+      "$type": "dimension"
+    },
+    "--cs-breakpoint-2xl": {
+      "$value": "1536px",
+      "$type": "dimension"
+    }
+  },
+  "container": {
+    "--cs-container-max": {
+      "$value": "1320px",
+      "$type": "dimension"
+    }
+  },
+  "font": {
+    "$description": "Typography — families, sizes, weights, line-heights, tracking.",
+    "--cs-font-family-ui": {
+      "$value": [
+        "Be Vietnam Pro",
+        "ui-sans-serif",
+        "system-ui",
+        "sans-serif"
+      ],
+      "$type": "fontFamily"
+    },
+    "--cs-font-family-mono": {
+      "$value": [
+        "JetBrains Mono",
+        "ui-monospace",
+        "SFMono-Regular",
+        "Menlo",
+        "Consolas",
+        "monospace"
+      ],
+      "$type": "fontFamily"
+    },
+    "--cs-font-weight-regular": {
+      "$value": "400",
+      "$type": "number"
+    },
+    "--cs-font-weight-medium": {
+      "$value": "500",
+      "$type": "number"
+    },
+    "--cs-font-weight-semibold": {
+      "$value": "600",
+      "$type": "number"
+    },
+    "--cs-font-weight-bold": {
+      "$value": "700",
+      "$type": "number"
+    },
+    "--cs-font-weight-extrabold": {
+      "$value": "800",
+      "$type": "number"
+    },
+    "--cs-font-lineHeight-body": {
+      "$value": "1.5",
+      "$type": "number"
+    },
+    "--cs-font-lineHeight-heading": {
+      "$value": "1.35",
+      "$type": "number"
+    },
+    "--cs-font-lineHeight-tight": {
+      "$value": "1.15",
+      "$type": "number"
+    },
+    "--cs-font-size-xs": {
+      "$value": "0.75rem",
+      "$type": "dimension"
+    },
+    "--cs-font-size-sm": {
+      "$value": "0.875rem",
+      "$type": "dimension"
+    },
+    "--cs-font-size-base": {
+      "$value": "1rem",
+      "$type": "dimension"
+    },
+    "--cs-font-size-md": {
+      "$value": "1.125rem",
+      "$type": "dimension"
+    },
+    "--cs-font-size-lg": {
+      "$value": "1.25rem",
+      "$type": "dimension"
+    },
+    "--cs-font-size-xl": {
+      "$value": "1.5rem",
+      "$type": "dimension"
+    },
+    "--cs-font-size-2xl": {
+      "$value": "1.875rem",
+      "$type": "dimension"
+    },
+    "--cs-font-size-3xl": {
+      "$value": "2.25rem",
+      "$type": "dimension"
+    },
+    "--cs-font-size-4xl": {
+      "$value": "3rem",
+      "$type": "dimension"
+    },
+    "--cs-font-size-5xl": {
+      "$value": "3.75rem",
+      "$type": "dimension"
+    }
+  },
+  "text": {
+    "$description": "Semantic type-role aliases into the font size ramp — write intent, not magic numbers (tokens/typography.css).",
+    "--cs-text-display": {
+      "$value": "{font.--cs-font-size-5xl}",
+      "$type": "dimension",
+      "$description": "Semantic type-role alias into the font size ramp; resolves to a dimension. CSS form (var()) preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "var(--cs-font-size-5xl)"
+        }
+      }
+    },
+    "--cs-text-h1": {
+      "$value": "{font.--cs-font-size-3xl}",
+      "$type": "dimension",
+      "$description": "Semantic type-role alias into the font size ramp; resolves to a dimension. CSS form (var()) preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "var(--cs-font-size-3xl)"
+        }
+      }
+    },
+    "--cs-text-h2": {
+      "$value": "{font.--cs-font-size-2xl}",
+      "$type": "dimension",
+      "$description": "Semantic type-role alias into the font size ramp; resolves to a dimension. CSS form (var()) preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "var(--cs-font-size-2xl)"
+        }
+      }
+    },
+    "--cs-text-h3": {
+      "$value": "{font.--cs-font-size-xl}",
+      "$type": "dimension",
+      "$description": "Semantic type-role alias into the font size ramp; resolves to a dimension. CSS form (var()) preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "var(--cs-font-size-xl)"
+        }
+      }
+    },
+    "--cs-text-h4": {
+      "$value": "{font.--cs-font-size-lg}",
+      "$type": "dimension",
+      "$description": "Semantic type-role alias into the font size ramp; resolves to a dimension. CSS form (var()) preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "var(--cs-font-size-lg)"
+        }
+      }
+    },
+    "--cs-text-body-lg": {
+      "$value": "{font.--cs-font-size-md}",
+      "$type": "dimension",
+      "$description": "Semantic type-role alias into the font size ramp; resolves to a dimension. CSS form (var()) preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "var(--cs-font-size-md)"
+        }
+      }
+    },
+    "--cs-text-body": {
+      "$value": "{font.--cs-font-size-base}",
+      "$type": "dimension",
+      "$description": "Semantic type-role alias into the font size ramp; resolves to a dimension. CSS form (var()) preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "var(--cs-font-size-base)"
+        }
+      }
+    },
+    "--cs-text-secondary": {
+      "$value": "{font.--cs-font-size-sm}",
+      "$type": "dimension",
+      "$description": "Semantic type-role alias into the font size ramp; resolves to a dimension. CSS form (var()) preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "var(--cs-font-size-sm)"
+        }
+      }
+    },
+    "--cs-text-caption": {
+      "$value": "{font.--cs-font-size-xs}",
+      "$type": "dimension",
+      "$description": "Semantic type-role alias into the font size ramp; resolves to a dimension. CSS form (var()) preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "var(--cs-font-size-xs)"
+        }
+      }
+    },
+    "--cs-text-eyebrow": {
+      "$value": "{font.--cs-font-size-xs}",
+      "$type": "dimension",
+      "$description": "Semantic type-role alias into the font size ramp; resolves to a dimension. CSS form (var()) preserved in $extensions[\"com.cyberskill\"].css.",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "var(--cs-font-size-xs)"
+        }
+      }
+    }
+  },
+  "letter": {
+    "--cs-letter-spacing-tight": {
+      "$value": "-0.01em",
+      "$type": "dimension"
+    },
+    "--cs-letter-spacing-normal": {
+      "$value": "0",
+      "$type": "number"
+    },
+    "--cs-letter-spacing-caps": {
+      "$value": "0.08em",
+      "$type": "dimension"
+    }
+  },
+  "heading": {
+    "$description": "Heading treatment roles (tokens/typography.css) — aliases into font/letter primitives. CSS var() forms preserved in $extensions[\"com.cyberskill\"].css.",
+    "--cs-heading-family": {
+      "$value": "{font.--cs-font-family-ui}",
+      "$type": "fontFamily",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "var(--cs-font-family-ui)"
+        }
+      }
+    },
+    "--cs-heading-weight-strong": {
+      "$value": "{font.--cs-font-weight-extrabold}",
+      "$type": "number",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "var(--cs-font-weight-extrabold)"
+        }
+      }
+    },
+    "--cs-heading-weight": {
+      "$value": "{font.--cs-font-weight-bold}",
+      "$type": "number",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "var(--cs-font-weight-bold)"
+        }
+      }
+    },
+    "--cs-heading-tracking": {
+      "$value": "{letter.--cs-letter-spacing-tight}",
+      "$type": "dimension",
+      "$extensions": {
+        "com.cyberskill": {
+          "css": "var(--cs-letter-spacing-tight)"
+        }
+      }
+    }
+  },
+  "icon": {
+    "--cs-icon-sm": {
+      "$value": "16px",
+      "$type": "dimension"
+    },
+    "--cs-icon-md": {
+      "$value": "20px",
+      "$type": "dimension"
+    },
+    "--cs-icon-lg": {
+      "$value": "24px",
+      "$type": "dimension"
+    }
+  }
+}