@repobit/dex-system-design 0.10.0 → 0.12.0

package/src/tokens/tokens.css

@@ -0,0 +1,1063 @@
+:root {
+  /* ================================
+       CORE TYPOGRAPHY TOKENS
+       ================================ */
+
+  --typography-fontFamily-sans: "IBM Plex Sans", system-ui, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --typography-fontFamily-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular,
+    Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  --typography-fontSize-xxs: 0.6875rem; /* 11px */
+  --typography-fontSize-xs: 0.75rem; /* 12px */
+  --typography-fontSize-sm: 0.875rem; /* 14px */
+  --typography-fontSize-base: 1rem; /* 16px */
+  --typography-fontSize-lg: 1.125rem; /* 18px */
+  --typography-fontSize-xl: 1.25rem; /* 20px */
+  --typography-fontSize-2xl: 1.5rem; /* 24px */
+  --typography-fontSize-3xl: 2rem; /* 32px */
+  --typography-fontSize-4xl: 2.25rem; /* 36px */
+  --typography-fontSize-5xl: 3rem; /* 48px */
+  --typography-fontSize-6xl: 3.75rem; /* 60px */
+  --typography-fontSize-7xl: 4.5rem; /* 72px */
+  --typography-fontSize-8xl: 6rem; /* 96px */
+  --typography-fontSize-9xl: 8rem; /* 128px */
+
+  --typography-fontWeight-light: 300;
+  --typography-fontWeight-normal: 400;
+  --typography-fontWeight-medium: 500;
+  --typography-fontWeight-semibold: 600;
+  --typography-fontWeight-bold: 700;
+
+  --typography-lineHeight-none: 1;
+  --typography-lineHeight-tight: 1.25;
+  --typography-lineHeight-snug: 1.375;
+  --typography-lineHeight-normal: 1.5;
+  --typography-lineHeight-relaxed: 1.625;
+  --typography-lineHeight-loose: 2;
+
+  --typography-letterSpacing-tighter: -0.05em;
+  --typography-letterSpacing-tight: -0.025em;
+  --typography-letterSpacing-normal: 0em;
+  --typography-letterSpacing-wide: 0.025em;
+  --typography-letterSpacing-wider: 0.05em;
+  --typography-letterSpacing-widest: 0.1em;
+
+  /* =====================
+      COLORS
+  ====================== */
+  --color-blue-50: #f0f7ff;
+  --color-blue-100: #d6e8ff;
+  --color-blue-200: #9ec8ff;
+  --color-blue-300: #6babff;
+  --color-blue-400: #338bff;
+  --color-blue-500: #006dff;
+  --color-blue-600: #0059d6;
+  --color-blue-700: #0045ad;
+  --color-blue-800: #003385;
+  --color-blue-900: #00225c;
+  --color-blue-950: #001947;
+
+  --color-red-50: #fff0f0;
+  --color-red-100: #ffd6d6;
+  --color-red-200: #ff9e9e;
+  --color-red-300: #ff6b6b;
+  --color-red-400: #ff3333;
+  --color-red-500: #ff0000;
+  --color-red-600: #d60000;
+  --color-red-700: #ad0000;
+  --color-red-800: #850000;
+  --color-red-900: #5c0000;
+  --color-red-950: #470000;
+
+  --color-green-50: #edfdf1;
+  --color-green-100: #d1fadc;
+  --color-green-200: #9af4b4;
+  --color-green-300: #63ee8d;
+  --color-green-400: #2ce767;
+  --color-green-500: #15c14f;
+  --color-green-600: #12a641;
+  --color-green-700: #0e8532;
+  --color-green-800: #0b6a26;
+  --color-green-900: #084a1a;
+  --color-green-950: #063c14;
+
+  --color-yellow-50: #fffbf0;
+  --color-yellow-100: #fff5d6;
+  --color-yellow-200: #ffe89e;
+  --color-yellow-300: #ffdc6b;
+  --color-yellow-400: #ffcf33;
+  --color-yellow-500: #ffc400;
+  --color-yellow-600: #d6a000;
+  --color-yellow-700: #ad7f00;
+  --color-yellow-800: #855f00;
+  --color-yellow-900: #5c4000;
+  --color-yellow-950: #473100;
+
+  --color-neutral-0: #ffffff;
+  --color-neutral-25: #fafafa;
+  --color-neutral-50: #f1f2f3;
+  --color-neutral-100: #e1e3e5;
+  --color-neutral-200: #c5c9ce;
+  --color-neutral-300: #a6adb4;
+  --color-neutral-400: #88909b;
+  --color-neutral-500: #6c7580;
+  --color-neutral-600: #565e66;
+  --color-neutral-700: #41474d;
+  --color-neutral-800: #2c3035;
+  --color-neutral-900: #151719;
+  --color-neutral-950: #0c0d0e;
+  --color-neutral-1000: #000000;
+
+  /* ================================
+       CORE BORDER TOKENS
+       ================================ */
+
+  --border-width-0: 0;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --border-width-3: 3px;
+  --border-width-4: 4px;
+  --border-width-8: 8px;
+
+  --radius-none: 0;
+  --radius-sm: 0.25rem; /* 4px */
+  --radius-md: 0.375rem; /* 6px */
+  --radius-lg: 0.5rem; /* 8px */
+  --radius-xl: 0.75rem; /* 12px */
+  --radius-2xl: 1rem; /* 16px */
+  --radius-3xl: 1.5rem; /* 24px */
+  --radius-full: 9999px;
+  /* ================================
+       CORE DIMENSION TOKENS
+       ================================ */
+
+  --dimension-2px: 2px;
+  --dimension-4px: 4px;
+  --dimension-8px: 8px;
+  --dimension-12px: 12px;
+  --dimension-16px: 16px;
+  --dimension-20px: 20px;
+  --dimension-24px: 24px;
+  --dimension-32px: 32px;
+  --dimension-34px: 34px;
+  --dimension-40px: 40px;
+  --dimension-45px: 45px;
+  --dimension-48px: 48px;
+  --dimension-55px: 55px;
+  --dimension-64px: 64px;
+
+  /* ================================
+       CORE TRANSITION TOKENS
+       ================================ */
+
+  --transition-duration-fast: 150ms;
+  --transition-duration-normal: 200ms;
+  --transition-duration-slow: 300ms;
+  --transition-duration-slower: 500ms;
+
+  --transition-easing-linear: linear;
+  --transition-easing-smooth: ease-in-out;
+  --transition-easing-ease-in: ease-in;
+  --transition-easing-ease-out: ease-out;
+  --transition-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+  /* ================================
+       CORE SHADOW TOKENS
+       ================================ */
+
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
+    0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+
+  /* Focus Shadows - Box Shadow Version */
+  --shadow-focus-outline-blue: 0 0 0 3px rgba(6, 109, 255, 0.15);
+  --shadow-focus-outline-red: 0 0 0 3px rgba(239, 68, 68, 0.15);
+  --shadow-focus-outline-green: 0 0 0 3px rgba(34, 197, 94, 0.15);
+
+  /* Focus Outlines - Two-Color System for Universal Visibility */
+  --focus-outline-primary: 0 0 0 2px var(--color-neutral-0),
+    0 0 0 4px var(--color-blue-500);
+  --focus-outline-secondary: 0 0 0 2px var(--color-neutral-0),
+    0 0 0 4px var(--color-neutral-600);
+  --focus-outline-error: 0 0 0 2px var(--color-neutral-0),
+    0 0 0 4px var(--color-red-500);
+  --focus-outline-success: 0 0 0 2px var(--color-neutral-0),
+    0 0 0 4px var(--color-green-500);
+
+  /* Traditional Outline Values for Fallback */
+  --focus-outline-traditional: 2px solid var(--color-blue-500);
+  --focus-outline-offset: 2px;
+
+  /* ================================
+       COMPONENT TOKENS - TYPOGRAPHY
+       ================================ */
+
+  /* Heading Tokens */
+  --typography-heading-h1-fontSize: var(--typography-fontSize-5xl);
+  --typography-heading-h1-fontWeight: var(--typography-fontWeight-bold);
+  --typography-heading-h1-lineHeight: var(--typography-lineHeight-snug);
+  --typography-heading-h1-letterSpacing: var(--typography-letterSpacing-normal);
+  --typography-heading-h1-fontFamily: var(--typography-fontFamily-sans);
+
+  --typography-heading-h2-fontSize: var(--typography-fontSize-4xl);
+  --typography-heading-h2-fontWeight: var(--typography-fontWeight-bold);
+  --typography-heading-h2-lineHeight: var(--typography-lineHeight-snug);
+  --typography-heading-h2-letterSpacing: var(--typography-letterSpacing-normal);
+  --typography-heading-h2-fontFamily: var(--typography-fontFamily-sans);
+
+  --typography-heading-h3-fontSize: var(--typography-fontSize-3xl);
+  --typography-heading-h3-fontWeight: var(--typography-fontWeight-semibold);
+  --typography-heading-h3-lineHeight: var(--typography-lineHeight-snug);
+  --typography-heading-h3-letterSpacing: var(--typography-letterSpacing-normal);
+  --typography-heading-h3-fontFamily: var(--typography-fontFamily-sans);
+
+  --typography-heading-h4-fontSize: var(--typography-fontSize-2xl);
+  --typography-heading-h4-fontWeight: var(--typography-fontWeight-semibold);
+  --typography-heading-h4-lineHeight: var(--typography-lineHeight-snug);
+  --typography-heading-h4-letterSpacing: var(--typography-letterSpacing-normal);
+  --typography-heading-h4-fontFamily: var(--typography-fontFamily-sans);
+
+  --typography-heading-h5-fontSize: var(--typography-fontSize-xl);
+  --typography-heading-h5-fontWeight: var(--typography-fontWeight-medium);
+  --typography-heading-h5-lineHeight: var(--typography-lineHeight-normal);
+  --typography-heading-h5-letterSpacing: var(--typography-letterSpacing-normal);
+  --typography-heading-h5-fontFamily: var(--typography-fontFamily-sans);
+
+  --typography-heading-h6-fontSize: var(--typography-fontSize-lg);
+  --typography-heading-h6-fontWeight: var(--typography-fontWeight-medium);
+  --typography-heading-h6-lineHeight: var(--typography-lineHeight-normal);
+  --typography-heading-h6-letterSpacing: var(--typography-letterSpacing-normal);
+  --typography-heading-h6-fontFamily: var(--typography-fontFamily-sans);
+
+  /* Body Text Tokens */
+  --typography-body-large-fontSize: var(--typography-fontSize-lg);
+  --typography-body-large-fontWeight: var(--typography-fontWeight-normal);
+  --typography-body-large-lineHeight: var(--typography-lineHeight-relaxed);
+  --typography-body-large-letterSpacing: var(--typography-letterSpacing-normal);
+  --typography-body-large-fontFamily: var(--typography-fontFamily-sans);
+
+  --typography-body-regular-fontSize: var(--typography-fontSize-base);
+  --typography-body-regular-fontWeight: var(--typography-fontWeight-normal);
+  --typography-body-regular-lineHeight: var(--typography-lineHeight-normal);
+  --typography-body-regular-letterSpacing: var(
+    --typography-letterSpacing-normal
+  );
+  --typography-body-regular-fontFamily: var(--typography-fontFamily-sans);
+
+  --typography-body-small-fontSize: var(--typography-fontSize-sm);
+  --typography-body-small-fontWeight: var(--typography-fontWeight-normal);
+  --typography-body-small-lineHeight: var(--typography-lineHeight-normal);
+  --typography-body-small-letterSpacing: var(--typography-letterSpacing-normal);
+  --typography-body-small-fontFamily: var(--typography-fontFamily-sans);
+
+  --typography-body-lead-fontSize: var(--typography-fontSize-xl);
+  --typography-body-lead-fontWeight: var(--typography-fontWeight-normal);
+  --typography-body-lead-lineHeight: var(--typography-lineHeight-relaxed);
+  --typography-body-lead-letterSpacing: var(--typography-letterSpacing-normal);
+  --typography-body-lead-fontFamily: var(--typography-fontFamily-sans);
+
+  /* Label Tokens */
+  --typography-label-default-fontSize: var(--typography-fontSize-sm);
+  --typography-label-default-fontWeight: var(--typography-fontWeight-medium);
+  --typography-label-default-lineHeight: var(--typography-lineHeight-normal);
+  --typography-label-default-letterSpacing: var(
+    --typography-letterSpacing-normal
+  );
+  --typography-label-default-fontFamily: var(--typography-fontFamily-sans);
+
+  --typography-label-small-fontSize: var(--typography-fontSize-xs);
+  --typography-label-small-fontWeight: var(--typography-fontWeight-medium);
+  --typography-label-small-lineHeight: var(--typography-lineHeight-normal);
+  --typography-label-small-letterSpacing: var(--typography-letterSpacing-wide);
+  --typography-label-small-fontFamily: var(--typography-fontFamily-sans);
+
+    --typography-label-extra-small-fontSize: var(--typography-fontSize-xxs);
+
+  --typography-label-large-fontSize: var(--typography-fontSize-base);
+  --typography-label-large-fontWeight: var(--typography-fontWeight-medium);
+  --typography-label-large-lineHeight: var(--typography-lineHeight-normal);
+  --typography-label-large-letterSpacing: var(
+    --typography-letterSpacing-normal
+  );
+  --typography-label-large-fontFamily: var(--typography-fontFamily-sans);
+
+  --typography-label-xl-fontSize: var(--typography-fontSize-lg);
+  --typography-label-xl-fontWeight: var(--typography-fontWeight-medium);
+  --typography-label-xl-lineHeight: var(--typography-lineHeight-normal);
+  --typography-label-xl-letterSpacing: var(--typography-letterSpacing-normal);
+  --typography-label-xl-fontFamily: var(--typography-fontFamily-sans);
+
+  /* Caption Tokens */
+  --typography-caption-default-fontSize: var(--typography-fontSize-xs);
+  --typography-caption-default-fontWeight: var(--typography-fontWeight-normal);
+  --typography-caption-default-lineHeight: var(--typography-lineHeight-normal);
+  --typography-caption-default-letterSpacing: var(
+    --typography-letterSpacing-normal
+  );
+  --typography-caption-default-fontFamily: var(--typography-fontFamily-sans);
+
+  --typography-caption-small-fontSize: var(--typography-fontSize-xs);
+  --typography-caption-small-fontWeight: var(--typography-fontWeight-normal);
+  --typography-caption-small-lineHeight: var(--typography-lineHeight-normal);
+  --typography-caption-small-letterSpacing: var(
+    --typography-letterSpacing-wide
+  );
+  --typography-caption-small-fontFamily: var(--typography-fontFamily-sans);
+
+  /* Link Tokens */
+  --typography-link-default-fontSize: inherit;
+  --typography-link-default-fontWeight: var(--typography-fontWeight-normal);
+  --typography-link-default-lineHeight: inherit;
+  --typography-link-default-letterSpacing: inherit;
+  --typography-link-default-fontFamily: inherit;
+  --typography-link-default-textDecoration-default: underline;
+  --typography-link-default-textDecoration-hover: none;
+
+  --typography-link-standalone-fontSize: var(--typography-fontSize-base);
+  --typography-link-standalone-fontWeight: var(--typography-fontWeight-medium);
+  --typography-link-standalone-lineHeight: var(--typography-lineHeight-normal);
+  --typography-link-standalone-letterSpacing: var(
+    --typography-letterSpacing-normal
+  );
+  --typography-link-standalone-fontFamily: var(--typography-fontFamily-sans);
+  --typography-link-standalone-textDecoration-default: underline;
+  --typography-link-standalone-textDecoration-hover: none;
+
+  /* Code Tokens */
+  --typography-code-inline-fontSize: 0.875em;
+  --typography-code-inline-fontWeight: var(--typography-fontWeight-normal);
+  --typography-code-inline-lineHeight: inherit;
+  --typography-code-inline-letterSpacing: var(
+    --typography-letterSpacing-normal
+  );
+  --typography-code-inline-fontFamily: var(--typography-fontFamily-mono);
+
+  --typography-code-block-fontSize: var(--typography-fontSize-sm);
+  --typography-code-block-fontWeight: var(--typography-fontWeight-normal);
+  --typography-code-block-lineHeight: var(--typography-lineHeight-relaxed);
+  --typography-code-block-letterSpacing: var(--typography-letterSpacing-normal);
+  --typography-code-block-fontFamily: var(--typography-fontFamily-mono);
+
+  /* Display Typography Tokens */
+  --typography-display-3xl-fontSize: var(--typography-fontSize-9xl);
+  --typography-display-3xl-fontWeight: var(--typography-fontWeight-bold);
+  --typography-display-3xl-lineHeight: var(--typography-lineHeight-tight);
+  --typography-display-3xl-letterSpacing: var(--typography-letterSpacing-tight);
+  --typography-display-3xl-fontFamily: var(--typography-fontFamily-sans);
+
+  --typography-display-2xl-fontSize: var(--typography-fontSize-8xl);
+  --typography-display-2xl-fontWeight: var(--typography-fontWeight-bold);
+  --typography-display-2xl-lineHeight: var(--typography-lineHeight-tight);
+  --typography-display-2xl-letterSpacing: var(--typography-letterSpacing-tight);
+  --typography-display-2xl-fontFamily: var(--typography-fontFamily-sans);
+
+  --typography-display-xl-fontSize: var(--typography-fontSize-7xl);
+  --typography-display-xl-fontWeight: var(--typography-fontWeight-bold);
+  --typography-display-xl-lineHeight: var(--typography-lineHeight-tight);
+  --typography-display-xl-letterSpacing: var(--typography-letterSpacing-tight);
+  --typography-display-xl-fontFamily: var(--typography-fontFamily-sans);
+
+  --typography-display-lg-fontSize: var(--typography-fontSize-6xl);
+  --typography-display-lg-fontWeight: var(--typography-fontWeight-bold);
+  --typography-display-lg-lineHeight: var(--typography-lineHeight-tight);
+  --typography-display-lg-letterSpacing: var(--typography-letterSpacing-tight);
+  --typography-display-lg-fontFamily: var(--typography-fontFamily-sans);
+
+  --typography-display-md-fontSize: var(--typography-fontSize-5xl);
+  --typography-display-md-fontWeight: var(--typography-fontWeight-bold);
+  --typography-display-md-lineHeight: var(--typography-lineHeight-tight);
+  --typography-display-md-letterSpacing: var(--typography-letterSpacing-tight);
+  --typography-display-md-fontFamily: var(--typography-fontFamily-sans);
+
+  --typography-display-sm-fontSize: var(--typography-fontSize-4xl);
+  --typography-display-sm-fontWeight: var(--typography-fontWeight-bold);
+  --typography-display-sm-lineHeight: var(--typography-lineHeight-tight);
+  --typography-display-sm-letterSpacing: var(--typography-letterSpacing-tight);
+  --typography-display-sm-fontFamily: var(--typography-fontFamily-sans);
+
+  /* ================================
+       COMPONENT TOKENS - FORM
+       ================================ */
+
+  /* Form Label Tokens */
+  --form-label-default-fontSize: var(--typography-fontSize-sm);
+  --form-label-default-fontWeight: var(--typography-fontWeight-medium);
+  --form-label-default-lineHeight: var(--typography-lineHeight-normal);
+  --form-label-default-letterSpacing: var(--typography-letterSpacing-normal);
+  --form-label-default-fontFamily: var(--typography-fontFamily-sans);
+  --form-label-default-color: var(--color-neutral-900);
+  --form-label-default-marginBottom: var(--spacing-1);
+
+  --form-label-large-fontSize: var(--typography-fontSize-lg);
+  --form-label-large-fontWeight: var(--typography-fontWeight-medium);
+  --form-label-large-lineHeight: var(--typography-lineHeight-normal);
+  --form-label-large-letterSpacing: var(--typography-letterSpacing-normal);
+  --form-label-large-fontFamily: var(--typography-fontFamily-sans);
+  --form-label-large-color: var(--color-neutral-900);
+  --form-label-large-marginBottom: var(--spacing-2);
+
+  --form-label-small-fontSize: var(--typography-fontSize-xs);
+  --form-label-small-fontWeight: var(--typography-fontWeight-medium);
+  --form-label-small-lineHeight: var(--typography-lineHeight-normal);
+  --form-label-small-letterSpacing: var(--typography-letterSpacing-wide);
+  --form-label-small-fontFamily: var(--typography-fontFamily-sans);
+  --form-label-small-color: var(--color-neutral-900);
+  --form-label-small-marginBottom: var(--spacing-1);
+
+  --form-label-required-color: var(--color-red-500);
+  --form-label-required-marginLeft: var(--spacing-1);
+
+  /* Form Input Tokens */
+  --form-input-small-height: var(--dimension-34px);
+  --form-input-small-fontSize: var(--typography-fontSize-sm);
+  --form-input-small-padding: var(--spacing-2) var(--spacing-3);
+  --form-input-small-borderRadius: var(--radius-sm);
+
+  --form-input-medium-height: var(--dimension-45px);
+  --form-input-medium-fontSize: var(--typography-fontSize-base);
+  --form-input-medium-padding: var(--spacing-3) var(--spacing-4);
+  --form-input-medium-borderRadius: var(--radius-md);
+
+  --form-input-large-height: var(--dimension-55px);
+  --form-input-large-fontSize: var(--typography-fontSize-lg);
+  --form-input-large-padding: var(--spacing-4) var(--spacing-5);
+  --form-input-large-borderRadius: var(--radius-lg);
+
+  --form-input-default-backgroundColor: var(--color-neutral-0);
+  --form-input-default-borderColor: var(--color-neutral-300);
+  --form-input-default-borderWidth: var(--border-width-1);
+  --form-input-default-color: var(--color-neutral-900);
+  --form-input-default-fontFamily: var(--typography-fontFamily-sans);
+  --form-input-default-lineHeight: var(--typography-lineHeight-normal);
+
+  --form-input-focus-borderColor: var(--color-blue-500);
+  --form-input-focus-boxShadow: var(--shadow-focus-outline-blue);
+
+  --form-input-error-backgroundColor: var(--color-red-50);
+  --form-input-error-borderColor: var(--color-red-500);
+  --form-input-error-placeholderColor: var(--color-red-400);
+
+  --form-input-success-backgroundColor: var(--color-green-50);
+  --form-input-success-borderColor: var(--color-green-500);
+  --form-input-success-placeholderColor: var(--color-green-400);
+
+  --form-input-disabled-backgroundColor: var(--color-neutral-100);
+  --form-input-disabled-borderColor: var(--color-neutral-300);
+  --form-input-disabled-color: var(--color-neutral-500);
+  --form-input-disabled-placeholderColor: var(--color-neutral-400);
+
+  /* Form Help Text Tokens */
+  --form-help-text-default-fontSize: var(--typography-fontSize-xs);
+  --form-help-text-default-fontWeight: var(--typography-fontWeight-normal);
+  --form-help-text-default-lineHeight: var(--typography-lineHeight-normal);
+  --form-help-text-default-letterSpacing: var(
+    --typography-letterSpacing-normal
+  );
+  --form-help-text-default-fontFamily: var(--typography-fontFamily-sans);
+  --form-help-text-default-color: var(--color-neutral-600);
+  --form-help-text-default-marginTop: var(--spacing-1);
+
+  --form-help-text-error-color: var(--color-red-600);
+  --form-help-text-success-color: var(--color-green-600);
+
+  /* Form Layout Tokens */
+  --form-fieldSpacing: var(--spacing-6);
+  --form-sectionSpacing: var(--spacing-8);
+  --form-labelSpacing: var(--spacing-1);
+  --form-helpTextSpacing: var(--spacing-1);
+
+  /* ================================
+       COMPONENT TOKENS - BUTTON
+       ================================ */
+
+  /* Button Size Tokens */
+  --button-small-height: var(--dimension-34px);
+  --button-small-fontSize: var(--typography-fontSize-sm);
+  --button-small-padding: var(--spacing-2) var(--spacing-3);
+  --button-small-borderRadius: var(--radius-sm);
+
+  --button-medium-height: var(--dimension-45px);
+  --button-medium-fontSize: var(--typography-fontSize-base);
+  --button-medium-padding: var(--spacing-3) var(--spacing-4);
+  --button-medium-borderRadius: var(--radius-md);
+
+  --button-large-height: var(--dimension-55px);
+  --button-large-fontSize: var(--typography-fontSize-lg);
+  --button-large-padding: var(--spacing-4) var(--spacing-5);
+  --button-large-borderRadius: var(--radius-lg);
+
+  /* Button Default State */
+  --button-default-backgroundColor: var(--color-neutral-0);
+  --button-default-borderColor: var(--color-neutral-300);
+  --button-default-borderWidth: var(--border-width-1);
+  --button-default-color: var(--color-neutral-900);
+  --button-default-fontFamily: var(--typography-fontFamily-sans);
+  --button-default-fontWeight: var(--typography-fontWeight-medium);
+  --button-default-lineHeight: var(--typography-lineHeight-normal);
+
+  /* Button Shared Tokens */
+  --button-shared-fontFamily: var(--typography-fontFamily-sans);
+  --button-shared-fontWeight: var(--typography-fontWeight-medium);
+  --button-shared-lineHeight: var(--typography-lineHeight-tight);
+  --button-shared-letterSpacing: var(--typography-letterSpacing-normal);
+  --button-shared-borderWidth: var(--border-width-1);
+  --button-shared-transition-properties: background-color, border-color, color,
+    box-shadow;
+  --button-shared-transition-duration: var(--transition-duration-normal);
+  --button-shared-transition-easing: var(--transition-easing-smooth);
+  --button-shared-focus-outline: var(--focus-outline-traditional);
+  --button-shared-focus-outlineOffset: var(--focus-outline-offset);
+  --button-shared-focus-boxShadow: var(--focus-outline-primary);
+  --button-shared-disabled-opacity: 0.6;
+  --button-shared-disabled-cursor: not-allowed;
+
+  /* Button Size Tokens */
+  --button-size-small-padding-vertical: var(--spacing-2);
+  --button-size-small-padding-horizontal: var(--spacing-4);
+  --button-size-small-fontSize: var(--typography-fontSize-sm);
+  --button-size-small-height: var(--dimension-34px);
+  --button-size-small-borderRadius: var(--radius-sm);
+  --button-size-small-gap: var(--spacing-1);
+
+  --button-size-medium-padding-vertical: var(--spacing-3);
+  --button-size-medium-padding-horizontal: var(--spacing-5);
+  --button-size-medium-fontSize: var(--typography-fontSize-base);
+  --button-size-medium-height: var(--dimension-45px);
+  --button-size-medium-borderRadius: var(--radius-md);
+  --button-size-medium-gap: var(--spacing-2);
+
+  --button-size-large-padding-vertical: var(--spacing-4);
+  --button-size-large-padding-horizontal: var(--spacing-6);
+  --button-size-large-fontSize: var(--typography-fontSize-lg);
+  --button-size-large-height: var(--dimension-55px);
+  --button-size-large-borderRadius: var(--radius-lg);
+  --button-size-large-gap: var(--spacing-2);
+
+  /* Button Primary State */
+  --button-primary-background-default: var(--color-blue-500);
+  --button-primary-text-default: var(--color-neutral-0);
+  --button-primary-border-default: var(--color-blue-500);
+  --button-primary-background-hover: var(--color-blue-600);
+  --button-primary-border-hover: var(--color-blue-600);
+  --button-primary-background-active: var(--color-blue-700);
+  --button-primary-border-active: var(--color-blue-700);
+  --button-primary-border-focus: var(--color-blue-500);
+  --button-primary-background-disabled: var(--color-neutral-300);
+  --button-primary-text-disabled: var(--color-neutral-500);
+  --button-primary-border-disabled: var(--color-neutral-300);
+
+  /* Button Secondary State */
+  --button-secondary-background-default: var(--color-neutral-950);
+  --button-secondary-text-default: var(--color-neutral-0);
+  --button-secondary-border-default: var(--color-neutral-950);
+  --button-secondary-background-hover: var(--color-neutral-900);
+  --button-secondary-text-hover: var(--color-neutral-0);
+  --button-secondary-border-hover: var(--color-neutral-900);
+  --button-secondary-background-active: var(--color-neutral-800);
+  --button-secondary-text-active: var(--color-neutral-0);
+  --button-secondary-border-active: var(--color-neutral-800);
+  --button-secondary-border-focus: var(--color-neutral-950);
+  --button-secondary-background-disabled: var(--color-neutral-300);
+  --button-secondary-text-disabled: var(--color-neutral-500);
+  --button-secondary-border-disabled: var(--color-neutral-300);
+
+  /* Button Tertiary Primary State */
+  --button-tertiaryPrimary-background-default: transparent;
+  --button-tertiaryPrimary-text-default: var(--color-blue-500);
+  --button-tertiaryPrimary-border-default: var(--color-blue-500);
+  --button-tertiaryPrimary-borderWidth: var(--border-width-2);
+  --button-tertiaryPrimary-background-hover: var(--color-blue-50);
+  --button-tertiaryPrimary-text-hover: var(--color-blue-500);
+  --button-tertiaryPrimary-border-hover: var(--color-blue-500);
+  --button-tertiaryPrimary-background-active: var(--color-blue-500);
+  --button-tertiaryPrimary-text-active: var(--color-neutral-0);
+  --button-tertiaryPrimary-border-active: var(--color-blue-500);
+  --button-tertiaryPrimary-border-focus: var(--color-blue-500);
+  --button-tertiaryPrimary-background-disabled: transparent;
+  --button-tertiaryPrimary-text-disabled: var(--color-neutral-400);
+  --button-tertiaryPrimary-border-disabled: var(--color-neutral-300);
+
+  /* Button Tertiary Secondary State */
+  --button-tertiarySecondary-background-default: transparent;
+  --button-tertiarySecondary-text-default: var(--color-neutral-900);
+  --button-tertiarySecondary-border-default: var(--color-neutral-900);
+  --button-tertiarySecondary-borderWidth: var(--border-width-2);
+  --button-tertiarySecondary-background-hover: var(--color-neutral-100);
+  --button-tertiarySecondary-text-hover: var(--color-neutral-900);
+  --button-tertiarySecondary-border-hover: var(--color-neutral-900);
+  --button-tertiarySecondary-background-active: var(--color-neutral-900);
+  --button-tertiarySecondary-text-active: var(--color-neutral-0);
+  --button-tertiarySecondary-border-active: var(--color-neutral-900);
+  --button-tertiarySecondary-border-focus: var(--color-neutral-900);
+  --button-tertiarySecondary-background-disabled: transparent;
+  --button-tertiarySecondary-text-disabled: var(--color-neutral-400);
+  --button-tertiarySecondary-border-disabled: var(--color-neutral-300);
+
+  /* Button CTA State */
+  --button-cta-background-default: var(--color-red-500);
+  --button-cta-text-default: var(--color-neutral-0);
+  --button-cta-border-default: var(--color-red-500);
+  --button-cta-background-hover: var(--color-red-600);
+  --button-cta-border-hover: var(--color-red-600);
+  --button-cta-background-active: var(--color-red-700);
+  --button-cta-border-active: var(--color-red-700);
+  --button-cta-border-focus: var(--color-red-500);
+  --button-cta-background-disabled: var(--color-neutral-300);
+  --button-cta-text-disabled: var(--color-neutral-500);
+  --button-cta-border-disabled: var(--color-neutral-300);
+
+  /* Button Empty State */
+  --button-empty-background-default: var(--color-neutral-200);
+  --button-empty-text-default: transparent;
+  --button-empty-border-default: var(--color-neutral-200);
+
+  /* Button Disabled State */
+  --button-disabled-backgroundColor: var(--color-neutral-100);
+  --button-disabled-borderColor: var(--color-neutral-300);
+  --button-disabled-color: var(--color-neutral-500);
+
+  /* Button Focus State */
+  --button-focus-boxShadow: var(--shadow-focus-outline-blue);
+
+  /* ================================
+       COMPONENT TOKENS - ANNOTATION
+       ================================ */
+
+  /* Footnote Tokens */
+  --footnote-reference-fontSize: 0.75em;
+  --footnote-reference-fontWeight: var(--typography-fontWeight-normal);
+  --footnote-reference-lineHeight: 1;
+  --footnote-reference-verticalAlign: super;
+  --footnote-reference-color: inherit;
+  --footnote-reference-marginLeft: 0.1em;
+  --footnote-reference-marginRight: 0.2em;
+
+  /* Citation Tokens */
+  --citation-reference-fontSize: inherit;
+  --citation-reference-fontWeight: var(--typography-fontWeight-normal);
+  --citation-reference-lineHeight: inherit;
+  --citation-reference-color: var(--color-blue-600);
+  --citation-reference-textDecoration: underline;
+  --citation-reference-hover-color: var(--color-blue-700);
+  --citation-reference-hover-textDecoration: none;
+
+  /* Mathematical Notation Tokens */
+  --math-superscript-fontSize: 0.75em;
+  --math-superscript-fontWeight: var(--typography-fontWeight-normal);
+  --math-superscript-lineHeight: 1;
+  --math-superscript-verticalAlign: super;
+  --math-superscript-marginLeft: 0.05em;
+
+  --math-subscript-fontSize: 0.75em;
+  --math-subscript-fontWeight: var(--typography-fontWeight-normal);
+  --math-subscript-lineHeight: 1;
+  --math-subscript-verticalAlign: sub;
+  --math-subscript-marginLeft: 0.05em;
+
+  /* ================================
+       COMPONENT TOKENS - ICON
+       ================================ */
+
+  /* Icon Size Tokens */
+  --icon-xs-size: var(--dimension-12px);
+  --icon-sm-size: var(--dimension-16px);
+  --icon-md-size: var(--dimension-20px);
+  --icon-lg-size: var(--dimension-24px);
+  --icon-xl-size: var(--dimension-32px);
+  --icon-2xl-size: var(--dimension-48px);
+  --icon-3xl-size: var(--dimension-64px);
+
+  /* Icon Context Tokens */
+  --icon-button-small-size: var(--dimension-16px);
+  --icon-button-medium-size: var(--dimension-20px);
+  --icon-button-large-size: var(--dimension-24px);
+
+  --icon-form-small-size: var(--dimension-16px);
+  --icon-form-medium-size: var(--dimension-20px);
+  --icon-form-large-size: var(--dimension-24px);
+
+  /* Icon State Tokens */
+  --icon-default-color: var(--color-neutral-600);
+  --icon-hover-color: var(--color-neutral-700);
+  --icon-active-color: var(--color-neutral-800);
+  --icon-disabled-color: var(--color-neutral-400);
+
+  --icon-primary-color: var(--color-blue-500);
+  --icon-primary-hover-color: var(--color-blue-600);
+  --icon-primary-active-color: var(--color-blue-700);
+
+  --icon-success-color: var(--color-green-500);
+  --icon-warning-color: var(--color-yellow-500);
+  --icon-error-color: var(--color-red-500);
+
+  /* ================================
+       CORE SPACING TOKENS
+       ================================ */
+
+  --spacing-0: 0;
+  --spacing-1: 0.0625rem; /* 1px */
+  --spacing-2: 0.125rem; /* 2px */
+  --spacing-4: 0.25rem; /* 4px */
+  --spacing-6: 0.375rem; /* 6px */
+  --spacing-8: 0.5rem; /* 8px */
+  --spacing-10: 0.625rem; /* 10px */
+  --spacing-12: 0.75rem; /* 12px */
+  --spacing-14: 0.875rem; /* 14px */
+  --spacing-16: 1rem; /* 16px */
+  --spacing-18: 1.125rem; /* 18px */
+  --spacing-20: 1.25rem; /* 20px */
+  --spacing-22: 1.375rem; /* 22px */
+  --spacing-24: 1.5rem; /* 24px */
+  --spacing-28: 1.75rem; /* 28px */
+  --spacing-32: 2rem; /* 32px */
+  --spacing-36: 2.25rem; /* 36px */
+  --spacing-40: 2.5rem; /* 40px */
+  --spacing-44: 2.75rem; /* 44px */
+  --spacing-48: 3rem; /* 48px */
+  --spacing-52: 3.25rem; /* 52px */
+  --spacing-56: 3.5rem; /* 56px */
+  --spacing-64: 4rem; /* 64px */
+  --spacing-80: 5rem; /* 80px */
+  --spacing-96: 6rem; /* 96px */
+  --spacing-112: 7rem; /* 112px */
+  --spacing-128: 8rem; /* 128px */
+
+  /* =====================
+     OLD VALUES -------------------------------------------------------------------------------
+  ====================== */
+
+  /* Display default */
+  --display-xxsmall: 44px; /* 58.652px = 3.666rem */
+  --display-xsmall: 48px; /* 63.984px = 3.999rem */
+  --display-small: 52px; /* 69.316px = 4.332rem */
+  --display-medium: 56px; /* 74.648px = 4.666rem */
+  --display-large: 60px; /* 79.98px = 5rem */
+  --display-xlarge: 64px; /* 85.312px = 5.333rem */
+
+  /* Display mobile */
+  --display-xxsmall-mobile: 34px; /* 45.322px = 2.833rem */
+  --display-xsmall-mobile: 36px; /* 47.988px = 2.999rem */
+  --display-small-mobile: 38px; /* 50.654px = 3.167rem */
+  --display-medium-mobile: 40px; /* 53.32px = 3.333rem */
+  --display-large-mobile: 44px; /* 58.652px = 3.666rem */
+  --display-xlarge-mobile: 48px; /* 63.984px = 3.999rem */
+
+  /* Heading default */
+  --heading-xxsmall: 18px; /* 23.994px = 1.5rem */
+  --heading-xsmall: 20px; /* 26.66px = 1.667rem */
+  --typography-heading-h4-fontSize: 24px; /* 31.992px = 2rem */
+  --heading-medium: 28px; /* 37.324px = 2.333rem */
+  --typography-fontSize-3xl: 32px; /* 42.656px = 2.667rem */
+  --heading-xlarge: 36px; /* 47.988px = 2.999rem */
+  --heading-xxlarge: 40px; /* 53.32px = 3.333rem */
+
+  /* Body default */
+  --body-small: 13px; /* 17.329px = 1.083rem */
+  --typography-body-small-fontSize: 14px; /* 18.662px = 1.167rem */
+  --typography-body-regular-fontSize: 16px; /* 21.328px = 1.333rem */
+  --body-xlarge: 18px; /* 23.994px = 1.5rem */
+
+  /* Caption default */
+  --typography-label-extra-small-fontSize: 11px; /* 14.663px = 0.917rem */
+  --typography-label-small-fontSize: 12px; /* 15.996px = 1rem */
+
+  /* Display Default */
+  --display-xlarge-line-height: 1.1; /* For 60px */
+  --display-medium-line-height: 1.15; /* For 52px */
+
+  /* Display Mobile */
+  --display-xlarge-mobile-line-height: 1.15; /* For 44px */
+  --display-medium-mobile-line-height: 1.2; /* For 38px */
+
+  /* Heading */
+  --heading-xlarge-line-height: 1.2; /* For 36px */
+  --typography-heading-h4-fontSize-line-height: 1.3; /* For 24px */
+
+  /* Body */
+  --typography-body-regular-fontSize-line-height: 1.5; /* For 16px */
+
+  /* Caption */
+  --typography-label-small-fontSize-line-height: 1.35; /* For 12px */
+
+  /* --spacing-0: 0;
+  --spacing-1: 1px;
+  --spacing-2: 2px;
+  --spacing-4: 4px;
+  --spacing-6: 6px;
+  --spacing-8: 8px;
+  --spacing-10: 10px;
+  --spacing-12: 12px;
+  --spacing-14: 14px;
+  --spacing-16: 16px;
+  --spacing-18: 18px;
+  --spacing-20: 20px;
+  --spacing-22: 22px;
+  --spacing-24: 24px;
+  --spacing-32: 32px;
+  --spacing-36: 36px;
+  --spacing-40: 40px;
+  --spacing-44: 44px;
+  --spacing-52: 52px;
+  --spacing-64: 64px;
+  --spacing-full: 99999999999999999999;
+   */
+
+  /* Spacing Tokens
+  -----------------------------------------------*/
+  /* Base spacing tokens - Based on 4px grid */
+  --space-none: 0;
+  --space-4xs: 0.125rem; /* 2px */
+  --space-3xs: 0.25rem; /* 4px */
+  --space-2xs: 0.5rem; /* 8px */
+  --space-xs: 0.75rem; /* 12px */
+  --space-sm: 1rem; /* 16px */
+  --space-md: 1.5rem; /* 24px */
+  --space-lg: 2rem; /* 32px */
+  --space-xl: 2.5rem; /* 40px */
+  --space-2xl: 3rem; /* 48px */
+  --space-3xl: 4rem; /* 64px */
+  --space-4xl: 6rem; /* 96px */
+  --space-5xl: 8rem; /* 128px */
+
+  /* Semantic Padding Tokens */
+  --padding-button: var(--space-xs) var(--space-md);
+  --padding-input: var(--space-xs);
+  --padding-card: var(--space-md);
+  --padding-card-sm: var(--space-sm);
+  --padding-card-lg: var(--space-lg);
+
+  --padding-section: var(--space-3xl) 0;
+  --padding-section-sm: var(--space-2xl) 0;
+  --padding-section-lg: var(--space-4xl) 0;
+
+  /* Container and Layout Tokens */
+  --container-padding: var(--space-md);
+  --container-padding-sm: var(--space-sm);
+  --container-padding-lg: var(--space-lg);
+
+  /* Inset (Padding All Sides) Tokens */
+  --inset-xs: var(--space-xs);
+  --inset-sm: var(--space-sm);
+  --inset-md: var(--space-md);
+  --inset-lg: var(--space-lg);
+
+  /* Stack (Vertical Spacing) Tokens */
+  --stack-xs: var(--space-xs);
+  --stack-sm: var(--space-sm);
+  --stack-md: var(--space-md);
+  --stack-lg: var(--space-lg);
+  --stack-xl: var(--space-xl);
+
+  /* Inline (Horizontal Spacing) Tokens */
+  --inline-xs: var(--space-xs);
+  --inline-sm: var(--space-sm);
+  --inline-md: var(--space-md);
+  --inline-lg: var(--space-lg);
+
+  /* Accessibility Spacing Tokens
+  -----------------------------------------------*/
+  /* Touch Target Sizes - WCAG 2.1 Success Criterion 2.5.5 (AAA) and 2.5.8 (AA) */
+  --touch-target-size: 44px; /* Minimum touch target size (44px × 44px) */
+  --touch-target-spacing: 8px; /* Minimum space between touch targets */
+
+  /* Readable Line Lengths - For optimal readability */
+  --content-width-readable: 70ch; /* Approximately 70 characters per line */
+  --content-width-max: 1200px; /* Maximum overall content width */
+
+  /** GRID TOKENS
+  */
+  /* Grid container max widths */
+  --grid-container-max-xs: 100%; /* mobile full width */
+  --grid-container-max-sm: 540px;
+  --grid-container-max-md: 720px;
+  --grid-container-max-lg: 960px;
+  --grid-container-max-xl: 1140px;
+  --grid-container-max-xxl: 1320px;
+
+  /* Column count (usually 12) */
+  --grid-columns: 12;
+
+  /* Gutter spacing between columns */
+  --grid-gutter-xs: 16px;
+  --grid-gutter-sm: 24px;
+  --grid-gutter-md: 32px;
+  --grid-gutter-lg: 40px;
+
+  /* Container padding (horizontal spacing) */
+  --grid-padding-xs: 16px;
+  --grid-padding-sm: 24px;
+  --grid-padding-md: 32px;
+  --grid-padding-lg: 40px;
+
+  /* Breakpoints */
+  --breakpoint-xs: 0px;
+  --breakpoint-sm: 576px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 992px;
+  --breakpoint-xl: 1200px;
+  --breakpoint-xxl: 1400px;
+  /* =====================
+      FONT-FACE DEFINITIONS
+  ====================== */
+
+  @font-face {
+    font-family: "IBM Plex Mono";
+    font-style: normal;
+    font-weight: 700;
+    src: url("/assets/fonts/IBMPlexMono-Bold.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "IBM Plex Mono";
+    font-style: normal;
+    font-weight: 700;
+    src: url("/assets/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "IBM Plex Mono";
+    font-style: italic;
+    font-weight: 300;
+    src: url("/assets/fonts/IBMPlexMono-Italic.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "IBM Plex Mono";
+    font-style: normal;
+    font-weight: 300;
+    src: url("/assets/fonts/IBMPlexMono-Light.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "IBM Plex Mono";
+    font-style: italic;
+    font-weight: 300;
+    src: url("/assets/fonts/IBMPlexMono-LightItalic.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "IBM Plex Mono";
+    font-style: italic;
+    font-weight: 500;
+    src: url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "IBM Plex Mono";
+    font-style: italic;
+    font-weight: 500;
+    src: url("/assets/fonts/IBMPlexMono-MediumItalic.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "IBM Plex Mono";
+    font-style: italic;
+    font-weight: 400;
+    src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "IBM Plex Mono";
+    font-style: italic;
+    font-weight: 600;
+    src: url("/assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "IBM Plex Mono";
+    font-style: italic;
+    font-weight: 600;
+    src: url("/assets/fonts/IBMPlexMono-SemiBoldItalic.woff2") format("woff2");
+  }
+
+  /*
+IBM PLEX SANS
+*/
+
+  @font-face {
+    font-family: "IBMPlexSans";
+    font-style: normal;
+    font-weight: 700;
+    src: url("/assets/fonts/IBMPlexSans-Bold.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "IBMPlexSans";
+    font-style: normal;
+    font-weight: 700;
+    src: url("/assets/fonts/IBMPlexSans-BoldItalic.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "IBMPlexSans";
+    font-style: italic;
+    font-weight: 300;
+    src: url("/assets/fonts/IBMPlexSans-Italic.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "IBMPlexSans";
+    font-style: normal;
+    font-weight: 300;
+    src: url("/assets/fonts/IBMPlexSans-Light.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "IBMPlexSans";
+    font-style: italic;
+    font-weight: 300;
+    src: url("/assets/fonts/IBMPlexSans-LightItalic.woff2") format("woff2");
+  }
+
+  @font-face {
+    font-family: "IBMPlexSans";
+    font-style: italic;
+    font-weight: 500;
+    src: url("/assets/fonts/IBMPlexSans-Medium.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "IBMPlexSans";
+    font-style: italic;
+    font-weight: 500;
+    src: url("/assets/fonts/IBMPlexSans-MediumItalic.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "IBMPlexSans";
+    font-style: italic;
+    font-weight: 400;
+    src: url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "IBMPlexSans";
+    font-style: italic;
+    font-weight: 600;
+    src: url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "IBMPlexSans";
+    font-style: italic;
+    font-weight: 600;
+    src: url("/assets/fonts/IBMPlexSans-SemiBoldItalic.woff2") format("woff2");
+  }
+
+  /* =====================
+      FONT TOKENS
+  ====================== */
+  /* IBM Plex Mono */
+  --font-family-mono: "IBM Plex Mono", monospace;
+  --font-weight-mono-light: 300;
+  --font-weight-mono-regular: 400;
+  --font-weight-mono-medium: 500;
+  --font-weight-mono-semibold: 600;
+  --font-weight-mono-bold: 700;
+
+  --font-style-mono-normal: normal;
+  --font-style-mono-italic: italic;
+
+  /* IBMPlexSans */
+  --typography-fontFamily-sans: "IBM Plex Sans", sans-serif;
+  --font-weight-sans-light: 300;
+  --typography-body-large-fontWeight: 400;
+  --font-weight-sans-medium: 500;
+  --typography-fontWeight-semibold: 600;
+  --typography-fontWeight-bold: 700;
+
+  --font-style-sans-normal: normal;
+  --font-style-sans-italic: italic;
+}