@repobit/dex-system-design 0.12.0 → 0.15.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.15.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.14.0...@repobit/dex-system-design@0.15.0) (2025-09-11)
+
+
+### Features
+
+* **DEX-1001:** add tokens.js and fonts.css ([6430c2d](https://github.com/bitdefender/dex-core/commit/6430c2db459b3d64ef933ab96ad041c10ea32acb))
+* **DEX-1001:** update tokens.css - previous was outdated ([6a8139a](https://github.com/bitdefender/dex-core/commit/6a8139ac40db3d411780566aa1307a8c9e9b46b4))
+
+
+
+## [0.14.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.12.0...@repobit/dex-system-design@0.14.0) (2025-09-09)
+
+
+### Features
+
+* **DEX-999:** added footer components in storybook ([848ae39](https://github.com/bitdefender/dex-core/commit/848ae392aff5f59ab800b6bf54de45adbaffc70a))
+
+
+### Bug Fixes
+
+* **DEX-1000:** update Storybook for custom-form ([1b0d539](https://github.com/bitdefender/dex-core/commit/1b0d5393230d89a7f4afc59efc11f1ed0d1d80a5))
+* **DEX-999:** added missing files ([566952b](https://github.com/bitdefender/dex-core/commit/566952b98df5d95307cdb9df8296f685c545fd9e))
+* **DEX-999:** modified files for PR review ([f6e4cec](https://github.com/bitdefender/dex-core/commit/f6e4cec3b1f6043c988b35f5a86a9d22c3509225))
+* **DEX-999:** wrong import for input-clipboard ([893c5d1](https://github.com/bitdefender/dex-core/commit/893c5d1210cd41a70be1d3a7b742a1dbe2f66045))
+
+
+
 ## [0.12.0](https://github.com/bitdefender/dex-core/compare/@repobit/dex-system-design@0.11.0...@repobit/dex-system-design@0.12.0) (2025-09-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repobit/dex-system-design",
-  "version": "0.12.0",
+  "version": "0.15.0",
   "description": "Design system based on Web Components.",
   "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
   "homepage": "https://github.com/bitdefender/dex-core#readme",
@@ -68,5 +68,5 @@
   "volta": {
     "node": "22.14.0"
   },
-  "gitHead": "60551ca051b44ffc8d4b34a6b948e2d9db0c6e0d"
+  "gitHead": "6fb6a153ad3a68ec8a5729e97b469b607dce4ed3"
 }

package/src/components/Input/custom-form.stories.js

@@ -1,9 +1,9 @@
 import { html } from 'lit';
 
-// Importăm componentele, ca să se înregistreze
-import '../../components/dropdown/dropdown.js';
-import '../../components/input/input-clipboard.js';
-import '../../components/input/input.js';
+import '../dropdown/dropdown.js';
+import './input-clipboard.js';
+import './Input.js';
+
 
 export default {
   title: 'Components/Form Inputs and Dropdown'

package/src/stories/demo.stories.js

@@ -8,6 +8,7 @@ import '/src/components/divider/divider-horizontal.js';
 import '/src/components/divider/divider-vertical.js';
 import '/src/components/FAQ/faq.js';
 import '/src/components/header/header.js';
+import '/src/components/highlight/highlight-s.js';
 import '/src/components/highlight/highlight.js';
 import '/src/components/input/input.js';
 import '/src/components/light-carousel/light-carousel.js';
@@ -20,11 +21,9 @@ import '/src/components/termsOfUse/terms.js';
 export default {
   title     : 'Design System/Demo full page',
   parameters: {
-    // eventuale parametri Storybook (ex: backgrounds, viewport etc)
   },
   decorators: [
     (Story) => {
-      // injectează token-urile CSS global în Storybook (dacă nu sunt deja)
       return `
         <link rel="stylesheet" href="/src/tokens/tokens.css" />
         <link rel="stylesheet" href="/src/tokens/layout.css" />
@@ -48,7 +47,7 @@ export const FullPage = () => `
     <div class="bd-header-right">
       <img
         class="bd-header-image"
-        src="/assets/bd-header-us.jpg"
+        src="images/bd-header-us.jpg"
         alt="Security illustration"
       />
     </div>
@@ -62,16 +61,16 @@ export const FullPage = () => `
 
   <p>Let’s Secure Your Digital Life</p>
 
-  <bd-highlight-text highlight-text="next generation of digital security">
+  <bd-highlight-text-s highlight-text="next generation of digital security">
     Introducing the next generation of digital security: your personalized shield for a worry-free online experience.
-  </bd-highlight-text>
+  </bd-highlight-text-s>
 
   <bd-light-carousel-section
     title="Our AI-powered platform that detects and fights scams. In real time."
   >
     <bd-light-carousel-item
       title="Scam Copilot Chatbot"
-      icon="/assets/light-carousel-img1.png"
+      icon="src/assets/icons/light-carousel-img1.png"
       badge="NEW"
     >
       <p>
@@ -81,7 +80,7 @@ export const FullPage = () => `
 
     <bd-light-carousel-item
       title="Scam Wave Alerts"
-      icon="/assets/light-carousel-img1.png"
+      icon="src/assets/icons/light-carousel-img1.png"
       badge="NEW"
     >
       <p>
@@ -91,7 +90,7 @@ export const FullPage = () => `
 
     <bd-light-carousel-item
       title="Online Scam Protection"
-      icon="/assets/light-carousel-img1.png"
+      icon="src/assets/icons/light-carousel-img1.png"
       badge="NEW"
     >
       <p>Focused on browsing activities, it specializes in detecting the newest scam patterns and tactics.</p>
@@ -99,7 +98,7 @@ export const FullPage = () => `
 
     <bd-light-carousel-item
       title="Remote Access Protection"
-      icon="/assets/light-carousel-img1.png"
+      icon="src/assets/icons/light-carousel-img1.png"
       badge="NEW"
     >
       <p>Detects patterns of behavior typical of scammers seeking to access your data remotely.</p>
@@ -107,7 +106,7 @@ export const FullPage = () => `
 
     <bd-light-carousel-item
       title="SMS Protection"
-      icon="/assets/light-carousel-img1.png"
+      icon="src/assets/icons/light-carousel-img1.png"
       badge="IMPROVED"
     >
       <p>Detects scams and harmful links in SMS messages3 using advanced AI for fast, real-time protection.</p>
@@ -115,28 +114,28 @@ export const FullPage = () => `
 
     <bd-light-carousel-item
       title="Email Protection"
-      icon="/assets/light-carousel-img1.png"
+      icon="src/assets/icons/light-carousel-img1.png"
     >
       <p>Detects scams and harmful links in SMS messages3 using advanced AI for fast, real-time protection.</p>
     </bd-light-carousel-item>
 
     <bd-light-carousel-item
       title="Scam Notification Protection"
-      icon="/assets/light-carousel-img1.png"
+      icon="src/assets/icons/light-carousel-img1.png"
     >
       <p>Scans and detects scam attempts directly in push notifications4 before you even tap or interact.</p>
     </bd-light-carousel-item>
 
     <bd-light-carousel-item
       title="Chat Protection"
-      icon="/assets/light-carousel-img1.png"
+      icon="src/assets/icons/light-carousel-img1.png"
     >
       <p>Identifies scam messages in WhatsApp, Messenger, Telegram and Discord chats4 before they reach your attention.</p>
     </bd-light-carousel-item>
 
     <bd-light-carousel-item
       title="Calendar Invites Protection"
-      icon="/assets/light-carousel-img1.png"
+      icon="src/assets/icons/light-carousel-img1.png"
     >
       <p>Finds and blocks scam calendar events5 before they can trick you with fake links or misleading invites.</p>
     </bd-light-carousel-item>
@@ -174,7 +173,7 @@ export const FullPage = () => `
       title="Scam Copilot Bot"
       subTitle="Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim"
       modalText="Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim"
-      icon="/assets/light-carousel-img1.png"
+      icon="src/assets/icons/light-carousel-img1.png"
     >
       <h3>Scam Copilot Bot</h3>
       <p>Specialized AI chatbot that helps you identify suspicious online interactions so you don’t become a victim.</p>
@@ -187,7 +186,7 @@ export const FullPage = () => `
       title="Scam Wave Alerts"
       subTitle="Proactively informs you about scam outbreaks in your region"
       modalText="Proactively informs you about scam outbreaks in your region"
-      icon="/assets/light-carousel-img1.png"
+      icon="src/assets/icons/light-carousel-img1.png"
     >
       <h3>Scam Wave Alerts</h3>
       <p>Proactively informs you about scam outbreaks in your region.</p>
@@ -197,7 +196,7 @@ export const FullPage = () => `
       title="AI-Powered Scam Check"
       subTitle="AI-driven tool that instantly evaluates the legitimacy of any link, message, or online interaction"
       modalText="AI-driven tool that instantly evaluates the legitimacy of any link, message, or online interaction"
-      icon="/assets/light-carousel-img1.png"
+      icon="src/assets/icons/light-carousel-img1.png"
     >
       <h3>AI-Powered Scam Check</h3>
       <p>AI-driven tool that instantly evaluates the legitimacy of any link, message, or online interaction.</p>
@@ -207,7 +206,7 @@ export const FullPage = () => `
       title="Educational Resources"
       subTitle="Access a wealth of information and best practices to stay informed and vigilant against scams"
       modalText="Access a wealth of information and best practices to stay informed and vigilant against scams"
-      icon="/assets/light-carousel-img1.png"
+      icon="src/assets/icons/light-carousel-img1.png"
     >
       <h3>Educational Resources</h3>
       <p>Access a wealth of information and best practices to stay informed and vigilant against scams.</p>
@@ -217,7 +216,7 @@ export const FullPage = () => `
       title="Phishing Simulator"
       subTitle="Simulates phishing attacks to help you recognize and respond appropriately to real threats"
       modalText="Simulates phishing attacks to help you recognize and respond appropriately to real threats"
-      icon="/assets/light-carousel-img1.png"
+      icon="src/assets/icons/light-carousel-img1.png"
     >
       <h3>Phishing Simulator</h3>
       <p>Simulates phishing attacks to help you recognize and respond appropriately to real threats.</p>
@@ -227,7 +226,7 @@ export const FullPage = () => `
       title="Real-Time Scam Updates"
       subTitle="Stay ahead with up-to-the-minute alerts on the latest scams targeting your region or industry"
       modalText="Stay ahead with up-to-the-minute alerts on the latest scams targeting your region or industry"
-      icon="/assets/light-carousel-img1.png"
+      icon="src/assets/icons/light-carousel-img1.png"
     >
       <h3>Real-Time Scam Updates</h3>
       <p>Stay ahead with up-to-the-minute alerts on the latest scams targeting your region or industry.</p>
@@ -237,7 +236,7 @@ export const FullPage = () => `
       title="Community Reporting Hub"
       subTitle="A platform where users can report scams and share experiences to help protect others"
       modalText="A platform where users can report scams and share experiences to help protect others"
-      icon="/assets/light-carousel-img1.png"
+      icon="src/assets/icons/light-carousel-img1.png"
     >
       <h3>Community Reporting Hub</h3>
       <p>A platform where users can report scams and share experiences to help protect others.</p>
@@ -247,7 +246,7 @@ export const FullPage = () => `
       title="Fraud Prevention Workshops"
       subTitle="Interactive workshops that educate users on identifying and avoiding scams"
       modalText="Interactive workshops that educate users on identifying and avoiding scams"
-      icon="/assets/light-carousel-img1.png"
+      icon="src/assets/icons/light-carousel-img1.png"
     >
       <h3>Fraud Prevention Workshops</h3>
       <p>Interactive workshops that educate users on identifying and avoiding scams.</p>

package/src/tokens/colors.js

@@ -83,34 +83,34 @@ export const colors = `
     /* Heading default */
     --heading-xxsmall: 18pt;
     --heading-xsmall: 20pt;
-    --typography-heading-h4-fontSize: 24pt;
+    --heading-small: 24pt;
     --heading-medium: 28pt;
-    --typography-fontSize-3xl: 32pt;
+    --heading-large: 32pt;
     --heading-xlarge: 36pt;
     --heading-xxlarge: 40pt;
 
     /* Heading mobile */
     --heading-xxsmall-mobile: 18pt;
     --heading-xsmall-mobile: 20pt;
-    --typography-heading-h4-fontSize-mobile: 24pt;
+    --heading-small-mobile: 24pt;
     --heading-medium-mobile: 26pt;
-    --typography-fontSize-3xl-mobile: 28pt;
+    --heading-large-mobile: 28pt;
     --heading-xlarge-mobile: 30pt;
     --heading-xxlarge-mobile: 32pt;
 
     /* Body default */
     --body-small: 13pt;
-    --typography-body-small-fontSize: 14pt;
-    --typography-body-regular-fontSize: 16pt;
+    --body-medium: 14pt;
+    --body-large: 16pt;
     --body-xlarge: 18pt;
 
     /* Caption default */
-    --typography-label-extra-small-fontSize: 11pt;
-    --typography-label-small-fontSize: 12pt;
+    --caption-small: 11pt;
+    --caption-large: 12pt;
 
     /* Caption mobile */
-    --typography-label-extra-small-fontSize-mobile: 11pt;
-    --typography-label-small-fontSize-mobile: 12pt;
+    --caption-small-mobile: 11pt;
+    --caption-large-mobile: 12pt;
   }
 `;
 

package/src/tokens/fonts.stories.js

@@ -10,7 +10,7 @@ export const FontFace = () => html`
       margin-bottom: 24px;
     }
     h3 {
-      font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans', Arial, sans-serif);
+      font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
       font-weight: 600;
       font-size: 1.2rem;
       margin-bottom: 12px;
@@ -20,22 +20,22 @@ export const FontFace = () => html`
       font-size: 1.1rem;
     }
     .sans-normal {
-      font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans', Arial, sans-serif);
+      font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
       font-weight: 400;
       font-style: normal;
     }
     .sans-semibold {
-      font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans', Arial, sans-serif);
+      font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
       font-weight: 600;
       font-style: normal;
     }
     .sans-bold {
-      font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans', Arial, sans-serif);
+      font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
       font-weight: 700;
       font-style: normal;
     }
     .sans-italic {
-      font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans', Arial, sans-serif);
+      font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
       font-weight: 400;
       font-style: italic;
     }

package/src/tokens/layout.css

@@ -25,15 +25,15 @@
 .bd-container {
     max-width: 1200px;
     margin: 0 auto;
-    padding: var(--spacing-16);
+    padding: var(--size-16);
     display: flex;
     flex-direction: column; 
-    gap: var(--spacing-8); 
+    gap: var(--size-8); 
   }
   
   .bd-container-fluid {
     width: 100%;
-    padding: var(--spacing-16);
+    padding: var(--size-16);
   }
 
   .pricing-container {

package/src/tokens/spacing.stories.js

@@ -40,7 +40,7 @@ export const AllSpacings = (args) => html`
       background-color: var(--color-neutral-200, #eee);
       margin-bottom: 16px;
       border-radius: 4px;
-      font-family: var(--typography-fontFamily-sans, sans-serif);
+      font-family: var(--font-family-sans, sans-serif);
       font-weight: 600;
       border: 1px dashed #ccc;
     }

package/src/tokens/tokens.js

@@ -2,7 +2,6 @@ import { css } from 'lit';
 
 export const tokens = css`
     :host {
-
         /* =====================
             COLORS
         ====================== */

package/src/tokens/tokens.stories.js

@@ -18,7 +18,7 @@ export const Colors = () => html`
       margin-bottom: 32px;
     }
     .color-group-title {
-      font-family: var(--typography-fontFamily-sans);
+      font-family: var(--font-family-sans);
       font-weight: 600;
       font-size: var(--heading-medium);
       margin-bottom: 16px;
@@ -32,7 +32,7 @@ export const Colors = () => html`
       width: 80px;
       height: 80px;
       margin: 6px;
-      border-radius: var(--radius-lg);
+      border-radius: 8px;
       box-shadow: 0 0 4px rgba(0,0,0,0.1);
       color: white;
       font-family: var(--font-family-mono);
@@ -44,7 +44,7 @@ export const Colors = () => html`
       margin-top: 6px;
       color: var(--color-neutral-900);
       font-weight: 600;
-      font-family: var(--typography-fontFamily-sans);
+      font-family: var(--font-family-sans);
       font-size: 10px;
       white-space: nowrap;
     }

package/src/tokens/typography.css.js

@@ -2,8 +2,12 @@ import { css } from "lit";
 
 export default css`
   
+/*<!-- typography -->*/
 
 
+
+/* <!-- display -->/
+/*  <!-- desktop -->*/
   .text-display-xlarge {
     font-family: 'Arial',sans-serif;
     font-size: 4em;

package/src/tokens/typography.stories.js

@@ -6,7 +6,7 @@ export default {
 
 const typographyTokens = {
   families: {
-    'Sans': 'var(--typography-fontFamily-sans, "IBM Plex Sans", Arial, sans-serif)',
+    'Sans': 'var(--font-family-sans, "IBM Plex Sans", Arial, sans-serif)',
     'Mono': 'var(--font-family-mono, "IBM Plex Mono", monospace)',
   },
   sizes: {
@@ -26,7 +26,7 @@ const typographyTokens = {
 export const Typography = () => html`
   <style>
     h3 {
-      font-family: var(--typography-fontFamily-sans);
+      font-family: var(--font-family-sans);
       font-weight: 600;
       font-size: var(--heading-medium);
       margin-bottom: 16px;

package/src/tokens/new-tokens.css

@@ -1,698 +0,0 @@
-/* Design System Tokens - CSS Custom Properties */
-/* Generated from design token files */
-
-: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-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: 1.875rem;    /* 30px */
-    --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;
-    
-    /* ================================
-       CORE COLOR TOKENS
-       ================================ */
-    
-    /* Neutral Colors */
-    --color-neutral-0: #ffffff;
-    --color-neutral-25: #fafafa;
-    --color-neutral-50: #f5f5f5;
-    --color-neutral-100: #e5e5e5;
-    --color-neutral-200: #d4d4d4;
-    --color-neutral-300: #a3a3a3;
-    --color-neutral-400: #737373;
-    --color-neutral-500: #6c7580;
-    --color-neutral-600: #525252;
-    --color-neutral-700: #404040;
-    --color-neutral-800: #262626;
-    --color-neutral-900: #171717;
-    
-    /* Blue Colors */
-    --color-blue-50: #eff6ff;
-    --color-blue-100: #dbeafe;
-    --color-blue-200: #bfdbfe;
-    --color-blue-300: #93c5fd;
-    --color-blue-400: #60a5fa;
-    --color-blue-500: #006dff;
-    --color-blue-600: #0059d6;
-    --color-blue-700: #1d4ed8;
-    --color-blue-800: #1e40af;
-    --color-blue-900: #1e3a8a;
-    
-    /* Red Colors */
-    --color-red-50: #fef2f2;
-    --color-red-100: #fee2e2;
-    --color-red-200: #fecaca;
-    --color-red-300: #fca5a5;
-    --color-red-400: #f87171;
-    --color-red-500: #ef4444;
-    --color-red-600: #dc2626;
-    --color-red-700: #b91c1c;
-    --color-red-800: #991b1b;
-    --color-red-900: #7f1d1d;
-    
-    /* Green Colors */
-    --color-green-50: #f0fdf4;
-    --color-green-100: #dcfce7;
-    --color-green-200: #bbf7d0;
-    --color-green-300: #86efac;
-    --color-green-400: #4ade80;
-    --color-green-500: #22c55e;
-    --color-green-600: #16a34a;
-    --color-green-700: #15803d;
-    --color-green-800: #166534;
-    --color-green-900: #14532d;
-    
-    /* Yellow Colors */
-    --color-yellow-50: #fefce8;
-    --color-yellow-100: #fef3c7;
-    --color-yellow-200: #fde68a;
-    --color-yellow-300: #fcd34d;
-    --color-yellow-400: #fbbf24;
-    --color-yellow-500: #f59e0b;
-    --color-yellow-600: #d97706;
-    --color-yellow-700: #b45309;
-    --color-yellow-800: #92400e;
-    --color-yellow-900: #78350f;
-    
-    /* ================================
-       CORE SPACING TOKENS
-       ================================ */
-    
-    --spacing-0: 0;
-    --spacing-4: 0.25rem;      /* 4px */
-    --spacing-8: 0.5rem;       /* 8px */
-    --spacing-12: 0.75rem;      /* 12px */
-    --spacing-16: 1rem;         /* 16px */
-    --spacing-20: 1.25rem;      /* 20px */
-    --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-56: 3.5rem;      /* 56px */
-    --spacing-64: 4rem;        /* 64px */
-    --spacing-80: 5rem;        /* 80px */
-    --spacing-96: 6rem;        /* 96px */
-    --spacing-112: 7rem;        /* 112px */
-    --spacing-128: 8rem;        /* 128px */
-    
-    /* ================================
-       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-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);
-}