@usefidel/design-system 0.2.0

package/README.md

@@ -0,0 +1,14 @@
+# @usefidel/design-system
+
+The single source of truth for Fidel's brand design tokens.
+
+- `tokens/tokens.json` — DTCG (`$value`/`$type`). **The only source of truth.** Change a color here, nowhere else.
+- `tokens/CLASSIFICATION.md` — how every migrated value was classified (canonical / legacy-alias / surface-transform / delete-replace).
+- `dist/*.css` — generated per-surface CSS. Do not edit by hand.
+- `dist/theme.css` — **generated Tailwind v4 `@theme` parser-compatibility output.** It exists so Fidel's own `theme-intake` parser (which reads Tailwind, not raw DTCG) can ingest our brand. It is a compatibility layer, NOT a second source of truth. Native DTCG parsing is a separate follow-up.
+- `dist/fidel.manifest.json` — version boundary: `{ brandKey, tokenSource, generatedCssOutputs, storybookUrl, packageVersion, resolvedSha }`.
+
+Surfaces (webapp / extension / landing / admin) are **outputs** of the one Fidel brand, not separate brands. Per-surface density is a declared Style Dictionary platform dimension.
+
+## Build
+`npm ci && npm run build` regenerates all of `dist/`.

package/dist/admin.css

@@ -0,0 +1,113 @@
+/* GENERATED by @usefidel/design-system — do not edit. Surface: admin. */
+:root {
+  --color-bg: #ffffff;
+  --color-surface: #fff7ed;
+  --color-surface-hover: #ffedd5;
+  --color-surface-raised: #ffffff;
+  --color-text: #171717;
+  --color-text-secondary: #525252;
+  --color-text-muted: #a3a3a3;
+  --color-border: #e5e5e5;
+  --color-border-light: #f5f5f5;
+  --color-border-strong: #d4d4d4;
+  --color-border-focus: #ea580c;
+  --color-accent: #ea580c;
+  --color-accent-hover: #c2410c;
+  --color-accent-subtle: #ffedd5;
+  --color-accent-muted: #fb923c;
+  --color-accent-text: #c2410c;
+  --color-primary: #171717;
+  --color-primary-hover: #262626;
+  --color-primary-text: #ffffff;
+  --color-critical: #ef4444;
+  --color-high: #f59e0b;
+  --color-high-bg: #fffbeb;
+  --color-high-text: #92400e;
+  --color-medium: #94a3b8;
+  --color-medium-bg: #f8fafc;
+  --color-medium-text: #64748b;
+  --color-low: #10b981;
+  --color-success: #059669;
+  --color-success-bg: #f0fdf4;
+  --color-success-text: #15803d;
+  --color-warning: #ca8a04;
+  --color-warning-bg: #fffbeb;
+  --color-warning-text: #92400e;
+  --color-warning-border: #fde68a;
+  --color-error: #b91c1c;
+  --color-error-bg: #fef2f2;
+  --color-error-text: #991b1b;
+  --color-error-border: #fecaca;
+  --color-expected-bg: #f0fdf4;
+  --color-expected-text: #15803d;
+  --color-actual-bg: #fef2f2;
+  --color-actual-text: #dc2626;
+  --color-focus: #ea580c;
+  --color-info: #1d4ed8;
+  --font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
+  --font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-pill: 9999px;
+  --radius-full: 9999px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-8: 32px;
+  --spacing-10: 40px;
+  --spacing-12: 48px;
+  --spacing-16: 64px;
+  --font-size-body: 14px;
+  --font-size-display-2xl: 70px;
+  --font-size-display-xl: 60px;
+  --font-size-display-lg: 48px;
+  --font-size-display-md: 36px;
+  --font-size-display-sm: 30px;
+  --font-size-display-xs: 24px;
+  --font-size-text-xl: 20px;
+  --font-size-text-lg: 18px;
+  --font-size-text-md: 16px;
+  --font-size-text-sm: 14px;
+  --font-size-text-xs: 12px;
+  --font-size-label-sm: 14px;
+  --font-size-label-xs: 12px;
+  --line-height-body: 1.6;
+  --line-height-display-2xl: 78px;
+  --line-height-display-xl: 68px;
+  --line-height-display-lg: 56px;
+  --line-height-display-md: 44px;
+  --line-height-display-sm: 38px;
+  --line-height-display-xs: 32px;
+  --line-height-text-xl: 28px;
+  --line-height-text-lg: 26px;
+  --line-height-text-md: 24px;
+  --line-height-text-sm: 22px;
+  --line-height-text-xs: 18px;
+  --line-height-label-sm: 22px;
+  --line-height-label-xs: 18px;
+  --duration-instant: 80ms;
+  --duration-quick: 150ms;
+  --duration-moderate: 280ms;
+  --duration-slow: 450ms;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03), 0 2px 4px rgba(0, 0, 0, 0.04);
+  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);
+  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.1);
+  --shadow-pill: 0 1px 2px rgba(15, 23, 42, 0.08);
+  --shadow-cta: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06);
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+}

package/dist/extension.css

@@ -0,0 +1,113 @@
+/* GENERATED by @usefidel/design-system — do not edit. Surface: extension. */
+:root {
+  --color-bg: #ffffff;
+  --color-surface: #f7f8fa;
+  --color-surface-hover: #f1f4f7;
+  --color-surface-raised: #ffffff;
+  --color-text: #0f172a;
+  --color-text-secondary: #475569;
+  --color-text-muted: #a3a3a3;
+  --color-border: #e2e5ea;
+  --color-border-light: #ebeff3;
+  --color-border-strong: #d1d5db;
+  --color-border-focus: #ea580c;
+  --color-accent: #ea580c;
+  --color-accent-hover: #c2410c;
+  --color-accent-subtle: #ffedd5;
+  --color-accent-muted: #fb923c;
+  --color-accent-text: #c2410c;
+  --color-primary: #0f172a;
+  --color-primary-hover: #1e293b;
+  --color-primary-text: #ffffff;
+  --color-critical: #ef4444;
+  --color-high: #f59e0b;
+  --color-high-bg: #fffbeb;
+  --color-high-text: #92400e;
+  --color-medium: #94a3b8;
+  --color-medium-bg: #f8fafc;
+  --color-medium-text: #64748b;
+  --color-low: #10b981;
+  --color-success: #059669;
+  --color-success-bg: #f0fdf4;
+  --color-success-text: #15803d;
+  --color-warning: #ca8a04;
+  --color-warning-bg: #fffbeb;
+  --color-warning-text: #92400e;
+  --color-warning-border: #fde68a;
+  --color-error: #b91c1c;
+  --color-error-bg: #fef2f2;
+  --color-error-text: #991b1b;
+  --color-error-border: #fecaca;
+  --color-expected-bg: #f0fdf4;
+  --color-expected-text: #15803d;
+  --color-actual-bg: #fef2f2;
+  --color-actual-text: #dc2626;
+  --color-focus: #ea580c;
+  --color-info: #1d4ed8;
+  --font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
+  --font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-pill: 20px;
+  --radius-full: 9999px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-8: 32px;
+  --spacing-10: 40px;
+  --spacing-12: 48px;
+  --spacing-16: 64px;
+  --font-size-body: 13px;
+  --font-size-display-2xl: 70px;
+  --font-size-display-xl: 60px;
+  --font-size-display-lg: 48px;
+  --font-size-display-md: 36px;
+  --font-size-display-sm: 30px;
+  --font-size-display-xs: 24px;
+  --font-size-text-xl: 20px;
+  --font-size-text-lg: 18px;
+  --font-size-text-md: 16px;
+  --font-size-text-sm: 14px;
+  --font-size-text-xs: 12px;
+  --font-size-label-sm: 14px;
+  --font-size-label-xs: 12px;
+  --line-height-body: 1.5;
+  --line-height-display-2xl: 78px;
+  --line-height-display-xl: 68px;
+  --line-height-display-lg: 56px;
+  --line-height-display-md: 44px;
+  --line-height-display-sm: 38px;
+  --line-height-display-xs: 32px;
+  --line-height-text-xl: 28px;
+  --line-height-text-lg: 26px;
+  --line-height-text-md: 24px;
+  --line-height-text-sm: 22px;
+  --line-height-text-xs: 18px;
+  --line-height-label-sm: 22px;
+  --line-height-label-xs: 18px;
+  --duration-instant: 80ms;
+  --duration-quick: 150ms;
+  --duration-moderate: 280ms;
+  --duration-slow: 450ms;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03), 0 2px 4px rgba(0, 0, 0, 0.04);
+  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);
+  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.1);
+  --shadow-pill: 0 1px 2px rgba(15, 23, 42, 0.08);
+  --shadow-cta: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06);
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+}

package/dist/fidel.manifest.json

@@ -0,0 +1,15 @@
+{
+  "brandKey": "default",
+  "tokenSource": "tokens/tokens.json",
+  "generatedCssOutputs": [
+    "admin.css",
+    "extension.css",
+    "index.css",
+    "landing.css",
+    "theme.css",
+    "webapp.css"
+  ],
+  "storybookUrl": null,
+  "packageVersion": "0.2.0",
+  "resolvedSha": "c78cdac9bf6848d4e37053d17dd1bf15ded0aa40"
+}

package/dist/index.cjs

@@ -0,0 +1,54 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Button/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Button({
+  variant = "primary",
+  size = "medium",
+  leftIcon,
+  rightIcon,
+  type = "button",
+  className,
+  children,
+  ...rest
+}) {
+  const classes = [
+    "fds-button",
+    `fds-button--${variant}`,
+    `fds-button--${size}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type, className: classes, ...rest, children: [
+    leftIcon != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "fds-button__icon", "aria-hidden": "true", children: leftIcon }),
+    children != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "fds-button__label", children }),
+    rightIcon != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "fds-button__icon", "aria-hidden": "true", children: rightIcon })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});

package/dist/index.css

@@ -0,0 +1,125 @@
+/* src/components/Button/button.css */
+.fds-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2, 8px);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm, 6px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-weight: var(--font-weight-medium, 500);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+  transition:
+    background-color var(--duration-quick, 150ms) var(--ease-out, ease),
+    border-color var(--duration-quick, 150ms) var(--ease-out, ease),
+    color var(--duration-quick, 150ms) var(--ease-out, ease);
+}
+.fds-button:focus-visible {
+  outline: 2px solid var(--color-accent, #ea580c);
+  outline-offset: 2px;
+}
+.fds-button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+}
+.fds-button__icon > svg,
+.fds-button__icon > img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.fds-button__label {
+  display: inline-block;
+}
+.fds-button--x-small {
+  padding: 6px 12px;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0;
+}
+.fds-button--small {
+  padding: 8px 16px;
+  font-size: 14px;
+  line-height: 22px;
+  letter-spacing: 0;
+}
+.fds-button--medium {
+  padding: 10px 20px;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: -0.18px;
+}
+.fds-button--big {
+  padding: 12px 24px;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: -0.18px;
+}
+.fds-button--primary {
+  background-color: var(--color-accent, #ea580c);
+  color: #ffffff;
+}
+.fds-button--primary:hover:not(:disabled) {
+  background-color: var(--color-accent-hover, #c2410c);
+}
+.fds-button--primary:active:not(:disabled) {
+  background-color: #9a3412;
+}
+.fds-button--primary:disabled {
+  background-color: var(--color-surface, #fff7ed);
+  color: var(--color-text-secondary, #525252);
+  cursor: not-allowed;
+}
+.fds-button--outlined {
+  background-color: #ffffff;
+  border-color: var(--color-border-strong, #d4d4d4);
+  color: #404040;
+}
+.fds-button--outlined:hover:not(:disabled) {
+  background-color: #fafafa;
+}
+.fds-button--outlined:active:not(:disabled) {
+  background-color: #f5f5f5;
+}
+.fds-button--outlined:disabled {
+  background-color: #ffffff;
+  border-color: #e5e5e5;
+  color: #a3a3a3;
+  cursor: not-allowed;
+}
+.fds-button--text {
+  background-color: transparent;
+  color: #404040;
+}
+.fds-button--text:hover:not(:disabled) {
+  background-color: #fafafa;
+}
+.fds-button--text:active:not(:disabled) {
+  background-color: #f5f5f5;
+}
+.fds-button--text:disabled {
+  color: #a3a3a3;
+  cursor: not-allowed;
+}
+.fds-button--neutral {
+  background-color: #fafafa;
+  color: #404040;
+}
+.fds-button--neutral:hover:not(:disabled) {
+  background-color: #f5f5f5;
+}
+.fds-button--neutral:active:not(:disabled) {
+  background-color: #e5e5e5;
+}
+.fds-button--neutral:disabled {
+  background-color: #fafafa;
+  color: #a3a3a3;
+  cursor: not-allowed;
+}

package/dist/index.d.cts

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+type ButtonVariant = 'primary' | 'outlined' | 'text' | 'neutral';
+type ButtonSize = 'x-small' | 'small' | 'medium' | 'big';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual style. @default 'primary' */
+    variant?: ButtonVariant;
+    /** Size step. @default 'medium' */
+    size?: ButtonSize;
+    /** Optional leading icon (rendered in a 20px slot). */
+    leftIcon?: ReactNode;
+    /** Optional trailing icon (rendered in a 20px slot). */
+    rightIcon?: ReactNode;
+}
+/**
+ * Fidel design-system Button. Renders a native `<button>`; hover/active/disabled
+ * are handled in CSS, so all standard button attributes (onClick, type, aria-*,
+ * disabled, …) pass straight through.
+ */
+declare function Button({ variant, size, leftIcon, rightIcon, type, className, children, ...rest }: ButtonProps): react.JSX.Element;
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+type ButtonVariant = 'primary' | 'outlined' | 'text' | 'neutral';
+type ButtonSize = 'x-small' | 'small' | 'medium' | 'big';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual style. @default 'primary' */
+    variant?: ButtonVariant;
+    /** Size step. @default 'medium' */
+    size?: ButtonSize;
+    /** Optional leading icon (rendered in a 20px slot). */
+    leftIcon?: ReactNode;
+    /** Optional trailing icon (rendered in a 20px slot). */
+    rightIcon?: ReactNode;
+}
+/**
+ * Fidel design-system Button. Renders a native `<button>`; hover/active/disabled
+ * are handled in CSS, so all standard button attributes (onClick, type, aria-*,
+ * disabled, …) pass straight through.
+ */
+declare function Button({ variant, size, leftIcon, rightIcon, type, className, children, ...rest }: ButtonProps): react.JSX.Element;
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/index.js

@@ -0,0 +1,27 @@
+// src/components/Button/Button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Button({
+  variant = "primary",
+  size = "medium",
+  leftIcon,
+  rightIcon,
+  type = "button",
+  className,
+  children,
+  ...rest
+}) {
+  const classes = [
+    "fds-button",
+    `fds-button--${variant}`,
+    `fds-button--${size}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("button", { type, className: classes, ...rest, children: [
+    leftIcon != null && /* @__PURE__ */ jsx("span", { className: "fds-button__icon", "aria-hidden": "true", children: leftIcon }),
+    children != null && /* @__PURE__ */ jsx("span", { className: "fds-button__label", children }),
+    rightIcon != null && /* @__PURE__ */ jsx("span", { className: "fds-button__icon", "aria-hidden": "true", children: rightIcon })
+  ] });
+}
+export {
+  Button
+};

package/dist/landing.css

@@ -0,0 +1,113 @@
+/* GENERATED by @usefidel/design-system — do not edit. Surface: landing. */
+:root {
+  --color-bg: #ffffff;
+  --color-surface: #fff7ed;
+  --color-surface-hover: #ffedd5;
+  --color-surface-raised: #ffffff;
+  --color-text: #171717;
+  --color-text-secondary: #525252;
+  --color-text-muted: #a3a3a3;
+  --color-border: #e5e5e5;
+  --color-border-light: #f5f5f5;
+  --color-border-strong: #d4d4d4;
+  --color-border-focus: #ea580c;
+  --color-accent: #ea580c;
+  --color-accent-hover: #c2410c;
+  --color-accent-subtle: #ffedd5;
+  --color-accent-muted: #fb923c;
+  --color-accent-text: #c2410c;
+  --color-primary: #171717;
+  --color-primary-hover: #262626;
+  --color-primary-text: #ffffff;
+  --color-critical: #ef4444;
+  --color-high: #f59e0b;
+  --color-high-bg: #fffbeb;
+  --color-high-text: #92400e;
+  --color-medium: #94a3b8;
+  --color-medium-bg: #f8fafc;
+  --color-medium-text: #64748b;
+  --color-low: #10b981;
+  --color-success: #059669;
+  --color-success-bg: #f0fdf4;
+  --color-success-text: #15803d;
+  --color-warning: #ca8a04;
+  --color-warning-bg: #fffbeb;
+  --color-warning-text: #92400e;
+  --color-warning-border: #fde68a;
+  --color-error: #b91c1c;
+  --color-error-bg: #fef2f2;
+  --color-error-text: #991b1b;
+  --color-error-border: #fecaca;
+  --color-expected-bg: #f0fdf4;
+  --color-expected-text: #15803d;
+  --color-actual-bg: #fef2f2;
+  --color-actual-text: #dc2626;
+  --color-focus: #ea580c;
+  --color-info: #1d4ed8;
+  --font-display: 'Rethink Sans', system-ui, -apple-system, sans-serif;
+  --font-body: 'Rethink Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-pill: 9999px;
+  --radius-full: 9999px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-8: 32px;
+  --spacing-10: 40px;
+  --spacing-12: 48px;
+  --spacing-16: 64px;
+  --font-size-body: 14px;
+  --font-size-display-2xl: 70px;
+  --font-size-display-xl: 60px;
+  --font-size-display-lg: 48px;
+  --font-size-display-md: 36px;
+  --font-size-display-sm: 30px;
+  --font-size-display-xs: 24px;
+  --font-size-text-xl: 20px;
+  --font-size-text-lg: 18px;
+  --font-size-text-md: 16px;
+  --font-size-text-sm: 14px;
+  --font-size-text-xs: 12px;
+  --font-size-label-sm: 14px;
+  --font-size-label-xs: 12px;
+  --line-height-body: 1.6;
+  --line-height-display-2xl: 78px;
+  --line-height-display-xl: 68px;
+  --line-height-display-lg: 56px;
+  --line-height-display-md: 44px;
+  --line-height-display-sm: 38px;
+  --line-height-display-xs: 32px;
+  --line-height-text-xl: 28px;
+  --line-height-text-lg: 26px;
+  --line-height-text-md: 24px;
+  --line-height-text-sm: 22px;
+  --line-height-text-xs: 18px;
+  --line-height-label-sm: 22px;
+  --line-height-label-xs: 18px;
+  --duration-instant: 80ms;
+  --duration-quick: 150ms;
+  --duration-moderate: 280ms;
+  --duration-slow: 450ms;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03), 0 2px 4px rgba(0, 0, 0, 0.04);
+  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);
+  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.1);
+  --shadow-pill: 0 1px 2px rgba(15, 23, 42, 0.08);
+  --shadow-cta: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06);
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+}