@cyberskill/design 1.0.0

package/tokens/tokens.json

@@ -0,0 +1,434 @@
+{
+  "$meta": {
+    "system": "CyberSkill Design System",
+    "version": "1.0.0",
+    "generated": "2026-07-23",
+    "note": "Generated from tokens/*.css. Root grouped by category; theme/element scopes carry overrides only. Regenerate after any token change (see docs/conventions.md)."
+  },
+  "root": {
+    "color": {
+      "--cs-color-brand-umber": "#45210E",
+      "--cs-color-brand-ochre": "#F4BA17",
+      "--cs-color-surface-page": "#FFFDF8",
+      "--cs-color-surface-panel": "#FFFFFF",
+      "--cs-color-surface-raised": "#FBF4E9",
+      "--cs-color-text-primary": "#45210E",
+      "--cs-color-text-inverse": "#FFFFFF",
+      "--cs-color-text-accent": "#6E3B0E",
+      "--cs-color-text-muted": "#6E5A4C",
+      "--cs-color-semantic-success": "#166534",
+      "--cs-color-semantic-danger": "#B42318",
+      "--cs-color-semantic-warning": "#92400E",
+      "--cs-color-semantic-info": "#1D4ED8",
+      "--cs-color-accent-ochre": "#F4BA17",
+      "--cs-color-border-default": "#E7D9C6",
+      "--cs-color-link": "#6E3B0E",
+      "--cs-color-link-hover": "#45210E"
+    },
+    "component": {
+      "--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",
+      "--cs-component-textfield-border-default": "#BFA58F",
+      "--cs-component-textfield-paddingY": "10px",
+      "--cs-component-textfield-paddingX": "12px",
+      "--cs-component-textfield-minHeight": "44px"
+    },
+    "accent": {
+      "--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"
+    },
+    "depth": {
+      "--cs-depth-bg": "0",
+      "--cs-depth-section": "5",
+      "--cs-depth-card": "10",
+      "--cs-depth-nav": "50",
+      "--cs-depth-modal": "100",
+      "--cs-depth-toast": "200"
+    },
+    "glass": {
+      "--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": {
+      "--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)",
+      "--cs-shadow-md": "0 12px 30px rgba(31, 19, 11, 0.18)",
+      "--cs-shadow-lg": "0 20px 60px rgba(69, 33, 14, 0.18)",
+      "--cs-shadow-xl": "0 24px 80px rgba(31, 19, 11, 0.26)"
+    },
+    "duration": {
+      "--cs-duration-instant": "80ms",
+      "--cs-duration-fast": "120ms",
+      "--cs-duration-base": "200ms",
+      "--cs-duration-slow": "320ms"
+    },
+    "ease": {
+      "--cs-ease-standard": "cubic-bezier(0.2, 0, 0, 1)",
+      "--cs-ease-entrance": "cubic-bezier(0, 0, 0, 1)",
+      "--cs-ease-exit": "cubic-bezier(0.4, 0, 1, 1)",
+      "--cs-ease-emphasized": "cubic-bezier(0.2, 0, 0, 1)"
+    },
+    "space": {
+      "--cs-space-0": "0px",
+      "--cs-space-1": "4px",
+      "--cs-space-2": "8px",
+      "--cs-space-3": "12px",
+      "--cs-space-4": "16px",
+      "--cs-space-5": "20px",
+      "--cs-space-6": "24px",
+      "--cs-space-8": "32px",
+      "--cs-space-10": "40px",
+      "--cs-space-12": "48px",
+      "--cs-space-16": "64px",
+      "--cs-space-20": "80px",
+      "--cs-space-24": "96px"
+    },
+    "radius": {
+      "--cs-radius-sm": "4px",
+      "--cs-radius-md": "8px",
+      "--cs-radius-lg": "14px",
+      "--cs-radius-full": "999px"
+    },
+    "breakpoint": {
+      "--cs-breakpoint-xs": "0px",
+      "--cs-breakpoint-sm": "640px",
+      "--cs-breakpoint-md": "768px",
+      "--cs-breakpoint-lg": "1024px",
+      "--cs-breakpoint-xl": "1280px",
+      "--cs-breakpoint-2xl": "1536px"
+    },
+    "container": {
+      "--cs-container-max": "1320px"
+    },
+    "font": {
+      "--cs-font-family-ui": "'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif",
+      "--cs-font-family-mono": "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+      "--cs-font-weight-regular": "400",
+      "--cs-font-weight-medium": "500",
+      "--cs-font-weight-semibold": "600",
+      "--cs-font-weight-bold": "700",
+      "--cs-font-weight-extrabold": "800",
+      "--cs-font-lineHeight-body": "1.5",
+      "--cs-font-lineHeight-heading": "1.35",
+      "--cs-font-lineHeight-tight": "1.15",
+      "--cs-font-size-xs": "0.75rem",
+      "--cs-font-size-sm": "0.875rem",
+      "--cs-font-size-base": "1rem",
+      "--cs-font-size-md": "1.125rem",
+      "--cs-font-size-lg": "1.25rem",
+      "--cs-font-size-xl": "1.5rem",
+      "--cs-font-size-2xl": "1.875rem",
+      "--cs-font-size-3xl": "2.25rem",
+      "--cs-font-size-4xl": "3rem",
+      "--cs-font-size-5xl": "3.75rem"
+    },
+    "text": {
+      "--cs-text-display": "var(--cs-font-size-5xl)",
+      "--cs-text-h1": "var(--cs-font-size-3xl)",
+      "--cs-text-h2": "var(--cs-font-size-2xl)",
+      "--cs-text-h3": "var(--cs-font-size-xl)",
+      "--cs-text-h4": "var(--cs-font-size-lg)",
+      "--cs-text-body-lg": "var(--cs-font-size-md)",
+      "--cs-text-body": "var(--cs-font-size-base)",
+      "--cs-text-secondary": "var(--cs-font-size-sm)",
+      "--cs-text-caption": "var(--cs-font-size-xs)",
+      "--cs-text-eyebrow": "var(--cs-font-size-xs)"
+    },
+    "letter": {
+      "--cs-letter-spacing-tight": "-0.01em",
+      "--cs-letter-spacing-normal": "0",
+      "--cs-letter-spacing-caps": "0.08em"
+    },
+    "heading": {
+      "--cs-heading-family": "var(--cs-font-family-ui)",
+      "--cs-heading-weight-strong": "var(--cs-font-weight-extrabold)",
+      "--cs-heading-weight": "var(--cs-font-weight-bold)",
+      "--cs-heading-tracking": "var(--cs-letter-spacing-tight)"
+    },
+    "icon": {
+      "--cs-icon-sm": "16px",
+      "--cs-icon-md": "20px",
+      "--cs-icon-lg": "24px"
+    }
+  },
+  "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"
+    }
+  }
+}

package/tokens/typography.css

@@ -0,0 +1,67 @@
+/* CyberSkill — typography tokens.
+ * Family + line-height come straight from @cyberskill/tokens. The size ramp,
+ * weights, and icon sizes are a documented convention layered on top (the token
+ * source ships families + line-heights only); the scale mirrors real in-product
+ * usage (status hub: 11–24px chrome; hero display larger). Vietnamese-safe
+ * line-heights (body 1.5 / heading 1.35) leave room for stacked diacritics. */
+:root {
+  /* Families */
+  --cs-font-family-ui: 'Be Vietnam Pro', ui-sans-serif, system-ui, sans-serif;
+  --cs-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+  /* Weights */
+  --cs-font-weight-regular: 400;
+  --cs-font-weight-medium: 500;
+  --cs-font-weight-semibold: 600;
+  --cs-font-weight-bold: 700;
+  --cs-font-weight-extrabold: 800;
+
+  /* Line-heights (Vietnamese-safe) */
+  --cs-font-lineHeight-body: 1.5;
+  --cs-font-lineHeight-heading: 1.35;
+  --cs-font-lineHeight-tight: 1.15;
+
+  /* Size ramp (rem-based, 16px root) */
+  --cs-font-size-xs: 0.75rem;    /* 12 — captions, chips */
+  --cs-font-size-sm: 0.875rem;   /* 14 — secondary UI */
+  --cs-font-size-base: 1rem;     /* 16 — body */
+  --cs-font-size-md: 1.125rem;   /* 18 — lead body */
+  --cs-font-size-lg: 1.25rem;    /* 20 — H4 / dialog title */
+  --cs-font-size-xl: 1.5rem;     /* 24 — H3 */
+  --cs-font-size-2xl: 1.875rem;  /* 30 — H2 */
+  --cs-font-size-3xl: 2.25rem;   /* 36 — H1 */
+  --cs-font-size-4xl: 3rem;      /* 48 — display */
+  --cs-font-size-5xl: 3.75rem;   /* 60 — hero display */
+
+  /* Semantic role aliases — write intent, not magic numbers.
+   * Pair each size with the matching line-height + weight (see base/typography.css
+   * for the .cs-display/.cs-h1/… utilities that bundle all three). */
+  --cs-text-display: var(--cs-font-size-5xl);   /* hero display */
+  --cs-text-h1: var(--cs-font-size-3xl);
+  --cs-text-h2: var(--cs-font-size-2xl);
+  --cs-text-h3: var(--cs-font-size-xl);
+  --cs-text-h4: var(--cs-font-size-lg);
+  --cs-text-body-lg: var(--cs-font-size-md);    /* lead paragraphs */
+  --cs-text-body: var(--cs-font-size-base);
+  --cs-text-secondary: var(--cs-font-size-sm);
+  --cs-text-caption: var(--cs-font-size-xs);
+  --cs-text-eyebrow: var(--cs-font-size-xs);    /* uppercase, tracked */
+
+  /* Tracking */
+  --cs-letter-spacing-tight: -0.01em;
+  --cs-letter-spacing-normal: 0;
+  --cs-letter-spacing-caps: 0.08em; /* uppercase eyebrows / table headers */
+
+  /* Heading treatment (Expression-overridable — the TYPE half of the treatment axis,
+   * v3 Batch 0). Expressions retune these so headings read Swiss / editorial / luxe /
+   * brutalist, not just via radius+shadow. Base = today's values (extrabold, tight). */
+  --cs-heading-family: var(--cs-font-family-ui);
+  --cs-heading-weight-strong: var(--cs-font-weight-extrabold); /* display · h1 */
+  --cs-heading-weight: var(--cs-font-weight-bold);             /* h2 · h3 */
+  --cs-heading-tracking: var(--cs-letter-spacing-tight);
+
+  /* Icon sizes (line-icon set) */
+  --cs-icon-sm: 16px;
+  --cs-icon-md: 20px;
+  --cs-icon-lg: 24px;
+}