@autonomys/design-tokens 1.4.18

package/dist/index.css

@@ -0,0 +1,2164 @@
+/**
+ * Auto Design Tokens - Root CSS Variables
+ * GENERATED FILE - DO NOT EDIT DIRECTLY
+ */
+
+:root {
+  /* Color Variables */
+  --color-primary: #000000;
+  --color-primaryHover: #101010;
+  --color-accent: #0A8DD0;
+  --color-lighterAccent: #90C2E7;
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-backgroundLight: #EBEFFC;
+  --color-backgroundDark: #3654A6;
+  --color-backgroundDarker: #27355D;
+  --color-backgroundDarkest: #050D26;
+  --color-lightDanger: #ffcdd2;
+  --color-grayButton: #9EA49F;
+  --color-lightGray: #4E4F54;
+  --color-whiteOpaque: #ffffffb3;
+  --color-darkWhite: #252525;
+  --color-darkWhiteHover: #353535;
+  --color-darkBlack: #ffffff;
+  --color-darkBlackHover: #808080;
+  --color-darkPrimary: #3654A6;
+  --color-darkPrimaryHover: #4664B6;
+  --color-darkAccent: #0A8DD0;
+  --color-darkAccentHover: #109DD0;
+  --color-white: #FFFFFF;
+  --color-black: #000000;
+  --color-gray-50: #F9FAFB;
+  --color-gray-100: #F3F4F6;
+  --color-gray-200: #E5E7EB;
+  --color-gray-300: #D1D5DB;
+  --color-gray-400: #9CA3AF;
+  --color-gray-500: #6B7280;
+  --color-gray-600: #4B5563;
+  --color-gray-700: #374151;
+  --color-gray-800: #1F2937;
+  --color-gray-900: #111827;
+  --color-success: #10B981;
+  --color-error: #EF4444;
+  --color-warning: #F59E0B;
+  --color-info: #3B82F6;
+
+  /* Semantic Colors (Light Theme) */
+  --color-textPrimary: #000000;
+  --color-textSecondary: #4B5563;
+  --color-textTertiary: #9CA3AF;
+  --color-textDisabled: #D1D5DB;
+  --color-textInverse: #FFFFFF;
+  --color-textError: #EF4444;
+  --color-textSuccess: #10B981;
+  --color-textWarning: #F59E0B;
+  --color-textInfo: #3B82F6;
+  --color-textAccent: #0A8DD0;
+  --color-backgroundPrimary: #FFFFFF;
+  --color-backgroundSecondary: #F9FAFB;
+  --color-backgroundTertiary: #F3F4F6;
+  --color-backgroundError: #ffcdd2;
+  --color-backgroundSuccess: #ECFDF5;
+  --color-backgroundWarning: #FFFBEB;
+  --color-backgroundInfo: #EFF6FF;
+  --color-backgroundAccent: #E0F2FE;
+  --color-borderPrimary: #E5E7EB;
+  --color-borderSecondary: #D1D5DB;
+  --color-borderFocus: #0A8DD0;
+  --color-borderError: #EF4444;
+  --color-buttonPrimary: #000000;
+  --color-buttonPrimaryHover: #101010;
+  --color-buttonSecondary: #E5E7EB;
+  --color-buttonSecondaryHover: #D1D5DB;
+  --color-buttonAccent: #0A8DD0;
+  --color-buttonAccentHover: #90C2E7;
+  --color-buttonDanger: #EF4444;
+  --color-buttonDangerHover: #B91C1C;
+  --color-buttonDisabled: #D1D5DB;
+
+  /* Explorer Colors */
+  --explorer-color-grayDark: #2A2C38;
+  --explorer-color-grayDarker: #27355D;
+  --explorer-color-grayLight: #EBEFFC;
+  --explorer-color-gradientFrom: #032372;
+  --explorer-color-gradientVia: #1949D2;
+  --explorer-color-gradientTo: #5373C4;
+  --explorer-color-gradientToSecondary: #0C1C43;
+  --explorer-color-white: #FFFFFF;
+  --explorer-color-whiteTransparent: #ffffff1a;
+  --explorer-color-whiteOpaque: #ffffffb3;
+  --explorer-color-pastelPurple: #C2B0EE;
+  --explorer-color-pastelBlue: #ABCFEF;
+  --explorer-color-pastelPink: #E6ADDC;
+  --explorer-color-pastelGreen: #91D3A0;
+  --explorer-color-greenBright: #37D058;
+  --explorer-color-primaryAccent: #1949D2;
+  --explorer-color-blueAccent: #1E254E;
+  --explorer-color-blueDarkAccent: #2A345E;
+  --explorer-color-blueLight: #EBEFFC;
+  --explorer-color-blueShade: #3654A6;
+  --explorer-color-blueUndertone: #27355D;
+  --explorer-color-backgroundLight: #EBEFFC;
+  --explorer-color-backgroundDark: #3654A6;
+  --explorer-color-backgroundDarker: #27355D;
+  --explorer-color-backgroundDarkest: #050D26;
+  --explorer-color-boxLight: #FFFFFF;
+  --explorer-color-boxDark: #2A2C38;
+  --explorer-color-buttonLightFrom: #032372;
+  --explorer-color-buttonLightTo: #5373C4;
+  --explorer-color-buttonDarkFrom: #1949D2;
+  --explorer-color-buttonDarkTo: #0C1C43;
+  --explorer-color-headerLight: #FFFFFF;
+  --explorer-color-headerDark: #2A2C38;
+  --explorer-color-footerLight: #032372;
+  --explorer-color-footerDark: #08183E;
+
+  /* Explorer Gradients */
+  --explorer-gradient-background-dark: linear-gradient(180deg, #050D26 0%, #27355D 100%);
+  --explorer-gradient-background-light: linear-gradient(180deg, #EBEFFC 0%, #3654A6 100%);
+  --explorer-gradient-button-light: linear-gradient(90deg, #032372 0%, #5373C4 100%);
+  --explorer-gradient-button-dark: linear-gradient(90deg, #1949D2 0%, #0C1C43 100%);
+  --explorer-gradient-button-hover-light: linear-gradient(90deg, #032372 0%, #5373C4 90%);
+  --explorer-gradient-button-hover-dark: linear-gradient(90deg, #1949D2 0%, #0C1C43 90%);
+  --explorer-gradient-card-primary: linear-gradient(135deg, #032372 0%, #1949D2 50%, #5373C4 100%);
+  --explorer-gradient-card-secondary: linear-gradient(135deg, #032372 0%, #1949D2 50%, #0C1C43 100%);
+  --explorer-gradient-headerOverlay-light: linear-gradient(180deg, rgba(235, 239, 252, 0.9) 0%, rgba(235, 239, 252, 0.8) 100%);
+  --explorer-gradient-headerOverlay-dark: linear-gradient(180deg, rgba(5, 13, 38, 0.9) 0%, rgba(39, 53, 93, 0.8) 100%);
+  --explorer-gradient-accent-blue: linear-gradient(90deg, #1E254E 0%, #2A345E 100%);
+  --explorer-gradient-accent-purple: linear-gradient(90deg, #C2B0EE 0%, #E6ADDC 100%);
+  --explorer-gradient-accent-green: linear-gradient(90deg, #91D3A0 30%, #ABCFEF 100%);
+
+  /* Typography */
+  --font-family-sans: var(--font-geist-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-family-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --font-family-display: var(--font-roboto-serif), serif;
+  --font-family-body: var(--font-libre-franklin), sans-serif;
+
+  /* Font Sizes */
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.875rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-5xl: 3rem;
+  --font-size-title1: 3.313rem;
+  --font-size-title2: 2.938rem;
+  --font-size-title3: 2.5rem;
+  --font-size-bodyLg: 2rem;
+  --font-size-bodyMd: 1.688rem;
+  --font-size-bodySm: 1.313rem;
+  --font-size-buttonLg: 1.188rem;
+  --font-size-buttonMd: 1rem;
+  --font-size-preTitle: 1.188rem;
+  --font-size-detail: 1.188rem;
+
+  /* Font Weights */
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+
+  /* Line Heights */
+  --line-height-none: 1;
+  --line-height-tight: 1.25;
+  --line-height-snug: 1.375;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+  --line-height-loose: 2;
+
+  /* Letter Spacing */
+  --letter-spacing-tighter: -0.05em;
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.025em;
+  --letter-spacing-wider: 0.05em;
+  --letter-spacing-widest: 0.1em;
+
+  /* Spacing */
+  --spacing-0: 0;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-8: 2rem;
+  --spacing-10: 2.5rem;
+  --spacing-12: 3rem;
+  --spacing-16: 4rem;
+  --spacing-20: 5rem;
+  --spacing-24: 6rem;
+  --spacing-32: 8rem;
+  --spacing-40: 10rem;
+  --spacing-48: 12rem;
+  --spacing-56: 14rem;
+  --spacing-64: 16rem;
+
+  /* Border Radius */
+  --radius-none: 0;
+  --radius-sm: 0.125rem;
+  --radius-default: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-DEFAULT: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  --shadow-none: none;
+  --shadow-darkSm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-darkDefault: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --shadow-darkMd: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+  --shadow-darkLg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+  --shadow-darkXl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+  --shadow-dark2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
+
+  /* Component Shadows */
+  --shadow-button: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-card: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-dropdown: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-header: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-tooltip: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-buttonDark: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+  --shadow-cardDark: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+  --shadow-modalDark: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+  --shadow-dropdownDark: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+  --shadow-headerDark: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+  --shadow-tooltipDark: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+}
+
+/**
+ * Auto Design Tokens - Dark Theme
+ */
+
+.auto-theme-dark {
+  --color-textPrimary: #ffffff;
+  --color-textSecondary: #808080;
+  --color-backgroundPrimary: #252525;
+  --color-backgroundSecondary: #353535;
+  --color-buttonPrimary: #3654A6;
+  --color-buttonPrimaryHover: #4664B6;
+  --color-buttonAccent: #0A8DD0;
+  --color-buttonAccentHover: #109DD0;
+}
+
+/**
+ * Auto Design Tokens - Typography Classes
+ */
+
+/* Heading Styles */
+.auto-heading-1 {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+.auto-heading-2 {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+.auto-heading-3 {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-tight);
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+.auto-heading-4 {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-tight);
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+/* Body Text Styles */
+.auto-body-large {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-relaxed);
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+.auto-body-default {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-buttonMd);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-relaxed);
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+.auto-body-small {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-relaxed);
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+.auto-body-x-small {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-relaxed);
+  letter-spacing: var(--letter-spacing-normal);
+}
+
+/* Font Size Utilities */
+.auto-text-xs {
+  font-size: var(--font-size-xs);
+}
+
+.auto-text-sm {
+  font-size: var(--font-size-sm);
+}
+
+.auto-text-base {
+  font-size: var(--font-size-base);
+}
+
+.auto-text-lg {
+  font-size: var(--font-size-lg);
+}
+
+.auto-text-xl {
+  font-size: var(--font-size-xl);
+}
+
+.auto-text-2xl {
+  font-size: var(--font-size-2xl);
+}
+
+.auto-text-3xl {
+  font-size: var(--font-size-3xl);
+}
+
+.auto-text-4xl {
+  font-size: var(--font-size-4xl);
+}
+
+.auto-text-5xl {
+  font-size: var(--font-size-5xl);
+}
+
+.auto-text-title1 {
+  font-size: var(--font-size-title1);
+}
+
+.auto-text-title2 {
+  font-size: var(--font-size-title2);
+}
+
+.auto-text-title3 {
+  font-size: var(--font-size-title3);
+}
+
+.auto-text-bodyLg {
+  font-size: var(--font-size-bodyLg);
+}
+
+.auto-text-bodyMd {
+  font-size: var(--font-size-bodyMd);
+}
+
+.auto-text-bodySm {
+  font-size: var(--font-size-bodySm);
+}
+
+.auto-text-buttonLg {
+  font-size: var(--font-size-buttonLg);
+}
+
+.auto-text-buttonMd {
+  font-size: var(--font-size-buttonMd);
+}
+
+.auto-text-preTitle {
+  font-size: var(--font-size-preTitle);
+}
+
+.auto-text-detail {
+  font-size: var(--font-size-detail);
+}
+
+/* Font Weight Utilities */
+.auto-font-extralight {
+  font-weight: var(--font-weight-extralight);
+}
+
+.auto-font-light {
+  font-weight: var(--font-weight-light);
+}
+
+.auto-font-normal {
+  font-weight: var(--font-weight-normal);
+}
+
+.auto-font-medium {
+  font-weight: var(--font-weight-medium);
+}
+
+.auto-font-semibold {
+  font-weight: var(--font-weight-semibold);
+}
+
+.auto-font-bold {
+  font-weight: var(--font-weight-bold);
+}
+
+.auto-font-extrabold {
+  font-weight: var(--font-weight-extrabold);
+}
+
+/* Line Height Utilities */
+.auto-leading-none {
+  line-height: var(--line-height-none);
+}
+
+.auto-leading-tight {
+  line-height: var(--line-height-tight);
+}
+
+.auto-leading-snug {
+  line-height: var(--line-height-snug);
+}
+
+.auto-leading-normal {
+  line-height: var(--line-height-normal);
+}
+
+.auto-leading-relaxed {
+  line-height: var(--line-height-relaxed);
+}
+
+.auto-leading-loose {
+  line-height: var(--line-height-loose);
+}
+
+/* Text Color Utilities */
+.auto-text-primary {
+  color: var(--color-textPrimary);
+}
+
+.auto-text-secondary {
+  color: var(--color-textSecondary);
+}
+
+.auto-text-tertiary {
+  color: var(--color-textTertiary);
+}
+
+.auto-text-disabled {
+  color: var(--color-textDisabled);
+}
+
+.auto-text-inverse {
+  color: var(--color-textInverse);
+}
+
+.auto-text-error {
+  color: var(--color-textError);
+}
+
+.auto-text-success {
+  color: var(--color-textSuccess);
+}
+
+.auto-text-warning {
+  color: var(--color-textWarning);
+}
+
+.auto-text-info {
+  color: var(--color-textInfo);
+}
+
+.auto-text-accent {
+  color: var(--color-textAccent);
+}
+
+
+/**
+ * Auto Design Tokens - Spacing Classes
+ */
+
+/* Margin Utilities */
+.auto-m-0 {
+  margin: var(--spacing-0);
+}
+
+.auto-mt-0 {
+  margin-top: var(--spacing-0);
+}
+
+.auto-mr-0 {
+  margin-right: var(--spacing-0);
+}
+
+.auto-mb-0 {
+  margin-bottom: var(--spacing-0);
+}
+
+.auto-ml-0 {
+  margin-left: var(--spacing-0);
+}
+
+.auto-mx-0 {
+  margin-left: var(--spacing-0);
+  margin-right: var(--spacing-0);
+}
+
+.auto-my-0 {
+  margin-top: var(--spacing-0);
+  margin-bottom: var(--spacing-0);
+}
+
+.auto-m-1 {
+  margin: var(--spacing-1);
+}
+
+.auto-mt-1 {
+  margin-top: var(--spacing-1);
+}
+
+.auto-mr-1 {
+  margin-right: var(--spacing-1);
+}
+
+.auto-mb-1 {
+  margin-bottom: var(--spacing-1);
+}
+
+.auto-ml-1 {
+  margin-left: var(--spacing-1);
+}
+
+.auto-mx-1 {
+  margin-left: var(--spacing-1);
+  margin-right: var(--spacing-1);
+}
+
+.auto-my-1 {
+  margin-top: var(--spacing-1);
+  margin-bottom: var(--spacing-1);
+}
+
+.auto-m-2 {
+  margin: var(--spacing-2);
+}
+
+.auto-mt-2 {
+  margin-top: var(--spacing-2);
+}
+
+.auto-mr-2 {
+  margin-right: var(--spacing-2);
+}
+
+.auto-mb-2 {
+  margin-bottom: var(--spacing-2);
+}
+
+.auto-ml-2 {
+  margin-left: var(--spacing-2);
+}
+
+.auto-mx-2 {
+  margin-left: var(--spacing-2);
+  margin-right: var(--spacing-2);
+}
+
+.auto-my-2 {
+  margin-top: var(--spacing-2);
+  margin-bottom: var(--spacing-2);
+}
+
+.auto-m-3 {
+  margin: var(--spacing-3);
+}
+
+.auto-mt-3 {
+  margin-top: var(--spacing-3);
+}
+
+.auto-mr-3 {
+  margin-right: var(--spacing-3);
+}
+
+.auto-mb-3 {
+  margin-bottom: var(--spacing-3);
+}
+
+.auto-ml-3 {
+  margin-left: var(--spacing-3);
+}
+
+.auto-mx-3 {
+  margin-left: var(--spacing-3);
+  margin-right: var(--spacing-3);
+}
+
+.auto-my-3 {
+  margin-top: var(--spacing-3);
+  margin-bottom: var(--spacing-3);
+}
+
+.auto-m-4 {
+  margin: var(--spacing-4);
+}
+
+.auto-mt-4 {
+  margin-top: var(--spacing-4);
+}
+
+.auto-mr-4 {
+  margin-right: var(--spacing-4);
+}
+
+.auto-mb-4 {
+  margin-bottom: var(--spacing-4);
+}
+
+.auto-ml-4 {
+  margin-left: var(--spacing-4);
+}
+
+.auto-mx-4 {
+  margin-left: var(--spacing-4);
+  margin-right: var(--spacing-4);
+}
+
+.auto-my-4 {
+  margin-top: var(--spacing-4);
+  margin-bottom: var(--spacing-4);
+}
+
+.auto-m-5 {
+  margin: var(--spacing-5);
+}
+
+.auto-mt-5 {
+  margin-top: var(--spacing-5);
+}
+
+.auto-mr-5 {
+  margin-right: var(--spacing-5);
+}
+
+.auto-mb-5 {
+  margin-bottom: var(--spacing-5);
+}
+
+.auto-ml-5 {
+  margin-left: var(--spacing-5);
+}
+
+.auto-mx-5 {
+  margin-left: var(--spacing-5);
+  margin-right: var(--spacing-5);
+}
+
+.auto-my-5 {
+  margin-top: var(--spacing-5);
+  margin-bottom: var(--spacing-5);
+}
+
+.auto-m-6 {
+  margin: var(--spacing-6);
+}
+
+.auto-mt-6 {
+  margin-top: var(--spacing-6);
+}
+
+.auto-mr-6 {
+  margin-right: var(--spacing-6);
+}
+
+.auto-mb-6 {
+  margin-bottom: var(--spacing-6);
+}
+
+.auto-ml-6 {
+  margin-left: var(--spacing-6);
+}
+
+.auto-mx-6 {
+  margin-left: var(--spacing-6);
+  margin-right: var(--spacing-6);
+}
+
+.auto-my-6 {
+  margin-top: var(--spacing-6);
+  margin-bottom: var(--spacing-6);
+}
+
+.auto-m-8 {
+  margin: var(--spacing-8);
+}
+
+.auto-mt-8 {
+  margin-top: var(--spacing-8);
+}
+
+.auto-mr-8 {
+  margin-right: var(--spacing-8);
+}
+
+.auto-mb-8 {
+  margin-bottom: var(--spacing-8);
+}
+
+.auto-ml-8 {
+  margin-left: var(--spacing-8);
+}
+
+.auto-mx-8 {
+  margin-left: var(--spacing-8);
+  margin-right: var(--spacing-8);
+}
+
+.auto-my-8 {
+  margin-top: var(--spacing-8);
+  margin-bottom: var(--spacing-8);
+}
+
+.auto-m-10 {
+  margin: var(--spacing-10);
+}
+
+.auto-mt-10 {
+  margin-top: var(--spacing-10);
+}
+
+.auto-mr-10 {
+  margin-right: var(--spacing-10);
+}
+
+.auto-mb-10 {
+  margin-bottom: var(--spacing-10);
+}
+
+.auto-ml-10 {
+  margin-left: var(--spacing-10);
+}
+
+.auto-mx-10 {
+  margin-left: var(--spacing-10);
+  margin-right: var(--spacing-10);
+}
+
+.auto-my-10 {
+  margin-top: var(--spacing-10);
+  margin-bottom: var(--spacing-10);
+}
+
+.auto-m-12 {
+  margin: var(--spacing-12);
+}
+
+.auto-mt-12 {
+  margin-top: var(--spacing-12);
+}
+
+.auto-mr-12 {
+  margin-right: var(--spacing-12);
+}
+
+.auto-mb-12 {
+  margin-bottom: var(--spacing-12);
+}
+
+.auto-ml-12 {
+  margin-left: var(--spacing-12);
+}
+
+.auto-mx-12 {
+  margin-left: var(--spacing-12);
+  margin-right: var(--spacing-12);
+}
+
+.auto-my-12 {
+  margin-top: var(--spacing-12);
+  margin-bottom: var(--spacing-12);
+}
+
+.auto-m-16 {
+  margin: var(--spacing-16);
+}
+
+.auto-mt-16 {
+  margin-top: var(--spacing-16);
+}
+
+.auto-mr-16 {
+  margin-right: var(--spacing-16);
+}
+
+.auto-mb-16 {
+  margin-bottom: var(--spacing-16);
+}
+
+.auto-ml-16 {
+  margin-left: var(--spacing-16);
+}
+
+.auto-mx-16 {
+  margin-left: var(--spacing-16);
+  margin-right: var(--spacing-16);
+}
+
+.auto-my-16 {
+  margin-top: var(--spacing-16);
+  margin-bottom: var(--spacing-16);
+}
+
+.auto-m-20 {
+  margin: var(--spacing-20);
+}
+
+.auto-mt-20 {
+  margin-top: var(--spacing-20);
+}
+
+.auto-mr-20 {
+  margin-right: var(--spacing-20);
+}
+
+.auto-mb-20 {
+  margin-bottom: var(--spacing-20);
+}
+
+.auto-ml-20 {
+  margin-left: var(--spacing-20);
+}
+
+.auto-mx-20 {
+  margin-left: var(--spacing-20);
+  margin-right: var(--spacing-20);
+}
+
+.auto-my-20 {
+  margin-top: var(--spacing-20);
+  margin-bottom: var(--spacing-20);
+}
+
+.auto-m-24 {
+  margin: var(--spacing-24);
+}
+
+.auto-mt-24 {
+  margin-top: var(--spacing-24);
+}
+
+.auto-mr-24 {
+  margin-right: var(--spacing-24);
+}
+
+.auto-mb-24 {
+  margin-bottom: var(--spacing-24);
+}
+
+.auto-ml-24 {
+  margin-left: var(--spacing-24);
+}
+
+.auto-mx-24 {
+  margin-left: var(--spacing-24);
+  margin-right: var(--spacing-24);
+}
+
+.auto-my-24 {
+  margin-top: var(--spacing-24);
+  margin-bottom: var(--spacing-24);
+}
+
+.auto-m-32 {
+  margin: var(--spacing-32);
+}
+
+.auto-mt-32 {
+  margin-top: var(--spacing-32);
+}
+
+.auto-mr-32 {
+  margin-right: var(--spacing-32);
+}
+
+.auto-mb-32 {
+  margin-bottom: var(--spacing-32);
+}
+
+.auto-ml-32 {
+  margin-left: var(--spacing-32);
+}
+
+.auto-mx-32 {
+  margin-left: var(--spacing-32);
+  margin-right: var(--spacing-32);
+}
+
+.auto-my-32 {
+  margin-top: var(--spacing-32);
+  margin-bottom: var(--spacing-32);
+}
+
+.auto-m-40 {
+  margin: var(--spacing-40);
+}
+
+.auto-mt-40 {
+  margin-top: var(--spacing-40);
+}
+
+.auto-mr-40 {
+  margin-right: var(--spacing-40);
+}
+
+.auto-mb-40 {
+  margin-bottom: var(--spacing-40);
+}
+
+.auto-ml-40 {
+  margin-left: var(--spacing-40);
+}
+
+.auto-mx-40 {
+  margin-left: var(--spacing-40);
+  margin-right: var(--spacing-40);
+}
+
+.auto-my-40 {
+  margin-top: var(--spacing-40);
+  margin-bottom: var(--spacing-40);
+}
+
+.auto-m-48 {
+  margin: var(--spacing-48);
+}
+
+.auto-mt-48 {
+  margin-top: var(--spacing-48);
+}
+
+.auto-mr-48 {
+  margin-right: var(--spacing-48);
+}
+
+.auto-mb-48 {
+  margin-bottom: var(--spacing-48);
+}
+
+.auto-ml-48 {
+  margin-left: var(--spacing-48);
+}
+
+.auto-mx-48 {
+  margin-left: var(--spacing-48);
+  margin-right: var(--spacing-48);
+}
+
+.auto-my-48 {
+  margin-top: var(--spacing-48);
+  margin-bottom: var(--spacing-48);
+}
+
+.auto-m-56 {
+  margin: var(--spacing-56);
+}
+
+.auto-mt-56 {
+  margin-top: var(--spacing-56);
+}
+
+.auto-mr-56 {
+  margin-right: var(--spacing-56);
+}
+
+.auto-mb-56 {
+  margin-bottom: var(--spacing-56);
+}
+
+.auto-ml-56 {
+  margin-left: var(--spacing-56);
+}
+
+.auto-mx-56 {
+  margin-left: var(--spacing-56);
+  margin-right: var(--spacing-56);
+}
+
+.auto-my-56 {
+  margin-top: var(--spacing-56);
+  margin-bottom: var(--spacing-56);
+}
+
+.auto-m-64 {
+  margin: var(--spacing-64);
+}
+
+.auto-mt-64 {
+  margin-top: var(--spacing-64);
+}
+
+.auto-mr-64 {
+  margin-right: var(--spacing-64);
+}
+
+.auto-mb-64 {
+  margin-bottom: var(--spacing-64);
+}
+
+.auto-ml-64 {
+  margin-left: var(--spacing-64);
+}
+
+.auto-mx-64 {
+  margin-left: var(--spacing-64);
+  margin-right: var(--spacing-64);
+}
+
+.auto-my-64 {
+  margin-top: var(--spacing-64);
+  margin-bottom: var(--spacing-64);
+}
+
+.auto-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* Padding Utilities */
+.auto-p-0 {
+  padding: var(--spacing-0);
+}
+
+.auto-pt-0 {
+  padding-top: var(--spacing-0);
+}
+
+.auto-pr-0 {
+  padding-right: var(--spacing-0);
+}
+
+.auto-pb-0 {
+  padding-bottom: var(--spacing-0);
+}
+
+.auto-pl-0 {
+  padding-left: var(--spacing-0);
+}
+
+.auto-px-0 {
+  padding-left: var(--spacing-0);
+  padding-right: var(--spacing-0);
+}
+
+.auto-py-0 {
+  padding-top: var(--spacing-0);
+  padding-bottom: var(--spacing-0);
+}
+
+.auto-p-1 {
+  padding: var(--spacing-1);
+}
+
+.auto-pt-1 {
+  padding-top: var(--spacing-1);
+}
+
+.auto-pr-1 {
+  padding-right: var(--spacing-1);
+}
+
+.auto-pb-1 {
+  padding-bottom: var(--spacing-1);
+}
+
+.auto-pl-1 {
+  padding-left: var(--spacing-1);
+}
+
+.auto-px-1 {
+  padding-left: var(--spacing-1);
+  padding-right: var(--spacing-1);
+}
+
+.auto-py-1 {
+  padding-top: var(--spacing-1);
+  padding-bottom: var(--spacing-1);
+}
+
+.auto-p-2 {
+  padding: var(--spacing-2);
+}
+
+.auto-pt-2 {
+  padding-top: var(--spacing-2);
+}
+
+.auto-pr-2 {
+  padding-right: var(--spacing-2);
+}
+
+.auto-pb-2 {
+  padding-bottom: var(--spacing-2);
+}
+
+.auto-pl-2 {
+  padding-left: var(--spacing-2);
+}
+
+.auto-px-2 {
+  padding-left: var(--spacing-2);
+  padding-right: var(--spacing-2);
+}
+
+.auto-py-2 {
+  padding-top: var(--spacing-2);
+  padding-bottom: var(--spacing-2);
+}
+
+.auto-p-3 {
+  padding: var(--spacing-3);
+}
+
+.auto-pt-3 {
+  padding-top: var(--spacing-3);
+}
+
+.auto-pr-3 {
+  padding-right: var(--spacing-3);
+}
+
+.auto-pb-3 {
+  padding-bottom: var(--spacing-3);
+}
+
+.auto-pl-3 {
+  padding-left: var(--spacing-3);
+}
+
+.auto-px-3 {
+  padding-left: var(--spacing-3);
+  padding-right: var(--spacing-3);
+}
+
+.auto-py-3 {
+  padding-top: var(--spacing-3);
+  padding-bottom: var(--spacing-3);
+}
+
+.auto-p-4 {
+  padding: var(--spacing-4);
+}
+
+.auto-pt-4 {
+  padding-top: var(--spacing-4);
+}
+
+.auto-pr-4 {
+  padding-right: var(--spacing-4);
+}
+
+.auto-pb-4 {
+  padding-bottom: var(--spacing-4);
+}
+
+.auto-pl-4 {
+  padding-left: var(--spacing-4);
+}
+
+.auto-px-4 {
+  padding-left: var(--spacing-4);
+  padding-right: var(--spacing-4);
+}
+
+.auto-py-4 {
+  padding-top: var(--spacing-4);
+  padding-bottom: var(--spacing-4);
+}
+
+.auto-p-5 {
+  padding: var(--spacing-5);
+}
+
+.auto-pt-5 {
+  padding-top: var(--spacing-5);
+}
+
+.auto-pr-5 {
+  padding-right: var(--spacing-5);
+}
+
+.auto-pb-5 {
+  padding-bottom: var(--spacing-5);
+}
+
+.auto-pl-5 {
+  padding-left: var(--spacing-5);
+}
+
+.auto-px-5 {
+  padding-left: var(--spacing-5);
+  padding-right: var(--spacing-5);
+}
+
+.auto-py-5 {
+  padding-top: var(--spacing-5);
+  padding-bottom: var(--spacing-5);
+}
+
+.auto-p-6 {
+  padding: var(--spacing-6);
+}
+
+.auto-pt-6 {
+  padding-top: var(--spacing-6);
+}
+
+.auto-pr-6 {
+  padding-right: var(--spacing-6);
+}
+
+.auto-pb-6 {
+  padding-bottom: var(--spacing-6);
+}
+
+.auto-pl-6 {
+  padding-left: var(--spacing-6);
+}
+
+.auto-px-6 {
+  padding-left: var(--spacing-6);
+  padding-right: var(--spacing-6);
+}
+
+.auto-py-6 {
+  padding-top: var(--spacing-6);
+  padding-bottom: var(--spacing-6);
+}
+
+.auto-p-8 {
+  padding: var(--spacing-8);
+}
+
+.auto-pt-8 {
+  padding-top: var(--spacing-8);
+}
+
+.auto-pr-8 {
+  padding-right: var(--spacing-8);
+}
+
+.auto-pb-8 {
+  padding-bottom: var(--spacing-8);
+}
+
+.auto-pl-8 {
+  padding-left: var(--spacing-8);
+}
+
+.auto-px-8 {
+  padding-left: var(--spacing-8);
+  padding-right: var(--spacing-8);
+}
+
+.auto-py-8 {
+  padding-top: var(--spacing-8);
+  padding-bottom: var(--spacing-8);
+}
+
+.auto-p-10 {
+  padding: var(--spacing-10);
+}
+
+.auto-pt-10 {
+  padding-top: var(--spacing-10);
+}
+
+.auto-pr-10 {
+  padding-right: var(--spacing-10);
+}
+
+.auto-pb-10 {
+  padding-bottom: var(--spacing-10);
+}
+
+.auto-pl-10 {
+  padding-left: var(--spacing-10);
+}
+
+.auto-px-10 {
+  padding-left: var(--spacing-10);
+  padding-right: var(--spacing-10);
+}
+
+.auto-py-10 {
+  padding-top: var(--spacing-10);
+  padding-bottom: var(--spacing-10);
+}
+
+.auto-p-12 {
+  padding: var(--spacing-12);
+}
+
+.auto-pt-12 {
+  padding-top: var(--spacing-12);
+}
+
+.auto-pr-12 {
+  padding-right: var(--spacing-12);
+}
+
+.auto-pb-12 {
+  padding-bottom: var(--spacing-12);
+}
+
+.auto-pl-12 {
+  padding-left: var(--spacing-12);
+}
+
+.auto-px-12 {
+  padding-left: var(--spacing-12);
+  padding-right: var(--spacing-12);
+}
+
+.auto-py-12 {
+  padding-top: var(--spacing-12);
+  padding-bottom: var(--spacing-12);
+}
+
+.auto-p-16 {
+  padding: var(--spacing-16);
+}
+
+.auto-pt-16 {
+  padding-top: var(--spacing-16);
+}
+
+.auto-pr-16 {
+  padding-right: var(--spacing-16);
+}
+
+.auto-pb-16 {
+  padding-bottom: var(--spacing-16);
+}
+
+.auto-pl-16 {
+  padding-left: var(--spacing-16);
+}
+
+.auto-px-16 {
+  padding-left: var(--spacing-16);
+  padding-right: var(--spacing-16);
+}
+
+.auto-py-16 {
+  padding-top: var(--spacing-16);
+  padding-bottom: var(--spacing-16);
+}
+
+.auto-p-20 {
+  padding: var(--spacing-20);
+}
+
+.auto-pt-20 {
+  padding-top: var(--spacing-20);
+}
+
+.auto-pr-20 {
+  padding-right: var(--spacing-20);
+}
+
+.auto-pb-20 {
+  padding-bottom: var(--spacing-20);
+}
+
+.auto-pl-20 {
+  padding-left: var(--spacing-20);
+}
+
+.auto-px-20 {
+  padding-left: var(--spacing-20);
+  padding-right: var(--spacing-20);
+}
+
+.auto-py-20 {
+  padding-top: var(--spacing-20);
+  padding-bottom: var(--spacing-20);
+}
+
+.auto-p-24 {
+  padding: var(--spacing-24);
+}
+
+.auto-pt-24 {
+  padding-top: var(--spacing-24);
+}
+
+.auto-pr-24 {
+  padding-right: var(--spacing-24);
+}
+
+.auto-pb-24 {
+  padding-bottom: var(--spacing-24);
+}
+
+.auto-pl-24 {
+  padding-left: var(--spacing-24);
+}
+
+.auto-px-24 {
+  padding-left: var(--spacing-24);
+  padding-right: var(--spacing-24);
+}
+
+.auto-py-24 {
+  padding-top: var(--spacing-24);
+  padding-bottom: var(--spacing-24);
+}
+
+.auto-p-32 {
+  padding: var(--spacing-32);
+}
+
+.auto-pt-32 {
+  padding-top: var(--spacing-32);
+}
+
+.auto-pr-32 {
+  padding-right: var(--spacing-32);
+}
+
+.auto-pb-32 {
+  padding-bottom: var(--spacing-32);
+}
+
+.auto-pl-32 {
+  padding-left: var(--spacing-32);
+}
+
+.auto-px-32 {
+  padding-left: var(--spacing-32);
+  padding-right: var(--spacing-32);
+}
+
+.auto-py-32 {
+  padding-top: var(--spacing-32);
+  padding-bottom: var(--spacing-32);
+}
+
+.auto-p-40 {
+  padding: var(--spacing-40);
+}
+
+.auto-pt-40 {
+  padding-top: var(--spacing-40);
+}
+
+.auto-pr-40 {
+  padding-right: var(--spacing-40);
+}
+
+.auto-pb-40 {
+  padding-bottom: var(--spacing-40);
+}
+
+.auto-pl-40 {
+  padding-left: var(--spacing-40);
+}
+
+.auto-px-40 {
+  padding-left: var(--spacing-40);
+  padding-right: var(--spacing-40);
+}
+
+.auto-py-40 {
+  padding-top: var(--spacing-40);
+  padding-bottom: var(--spacing-40);
+}
+
+.auto-p-48 {
+  padding: var(--spacing-48);
+}
+
+.auto-pt-48 {
+  padding-top: var(--spacing-48);
+}
+
+.auto-pr-48 {
+  padding-right: var(--spacing-48);
+}
+
+.auto-pb-48 {
+  padding-bottom: var(--spacing-48);
+}
+
+.auto-pl-48 {
+  padding-left: var(--spacing-48);
+}
+
+.auto-px-48 {
+  padding-left: var(--spacing-48);
+  padding-right: var(--spacing-48);
+}
+
+.auto-py-48 {
+  padding-top: var(--spacing-48);
+  padding-bottom: var(--spacing-48);
+}
+
+.auto-p-56 {
+  padding: var(--spacing-56);
+}
+
+.auto-pt-56 {
+  padding-top: var(--spacing-56);
+}
+
+.auto-pr-56 {
+  padding-right: var(--spacing-56);
+}
+
+.auto-pb-56 {
+  padding-bottom: var(--spacing-56);
+}
+
+.auto-pl-56 {
+  padding-left: var(--spacing-56);
+}
+
+.auto-px-56 {
+  padding-left: var(--spacing-56);
+  padding-right: var(--spacing-56);
+}
+
+.auto-py-56 {
+  padding-top: var(--spacing-56);
+  padding-bottom: var(--spacing-56);
+}
+
+.auto-p-64 {
+  padding: var(--spacing-64);
+}
+
+.auto-pt-64 {
+  padding-top: var(--spacing-64);
+}
+
+.auto-pr-64 {
+  padding-right: var(--spacing-64);
+}
+
+.auto-pb-64 {
+  padding-bottom: var(--spacing-64);
+}
+
+.auto-pl-64 {
+  padding-left: var(--spacing-64);
+}
+
+.auto-px-64 {
+  padding-left: var(--spacing-64);
+  padding-right: var(--spacing-64);
+}
+
+.auto-py-64 {
+  padding-top: var(--spacing-64);
+  padding-bottom: var(--spacing-64);
+}
+
+/* Border Radius Utilities */
+.auto-rounded-none {
+  border-radius: var(--radius-none);
+}
+
+.auto-rounded-sm {
+  border-radius: var(--radius-sm);
+}
+
+.auto-rounded {
+  border-radius: var(--radius-default);
+}
+
+.auto-rounded-md {
+  border-radius: var(--radius-md);
+}
+
+.auto-rounded-lg {
+  border-radius: var(--radius-lg);
+}
+
+.auto-rounded-xl {
+  border-radius: var(--radius-xl);
+}
+
+.auto-rounded-2xl {
+  border-radius: var(--radius-2xl);
+}
+
+.auto-rounded-3xl {
+  border-radius: var(--radius-3xl);
+}
+
+.auto-rounded-full {
+  border-radius: var(--radius-full);
+}
+
+
+/**
+ * Auto Design Tokens - Shadow Classes
+ */
+
+/* Shadow Utilities */
+.auto-shadow-sm {
+  box-shadow: var(--shadow-sm);
+}
+
+.auto-shadow-default {
+  box-shadow: var(--shadow-default);
+}
+
+.auto-shadow-md {
+  box-shadow: var(--shadow-md);
+}
+
+.auto-shadow-lg {
+  box-shadow: var(--shadow-lg);
+}
+
+.auto-shadow-xl {
+  box-shadow: var(--shadow-xl);
+}
+
+.auto-shadow-2xl {
+  box-shadow: var(--shadow-2xl);
+}
+
+.auto-shadow-inner {
+  box-shadow: var(--shadow-inner);
+}
+
+.auto-shadow-none {
+  box-shadow: var(--shadow-none);
+}
+
+.auto-shadow-darksm {
+  box-shadow: var(--shadow-darksm);
+}
+
+.auto-shadow-darkdefault {
+  box-shadow: var(--shadow-darkdefault);
+}
+
+.auto-shadow-darkmd {
+  box-shadow: var(--shadow-darkmd);
+}
+
+.auto-shadow-darklg {
+  box-shadow: var(--shadow-darklg);
+}
+
+.auto-shadow-darkxl {
+  box-shadow: var(--shadow-darkxl);
+}
+
+.auto-shadow-dark2xl {
+  box-shadow: var(--shadow-dark2xl);
+}
+
+/* Component Shadow Utilities */
+.auto-shadow-button {
+  box-shadow: var(--shadow-button);
+}
+
+.auto-shadow-card {
+  box-shadow: var(--shadow-card);
+}
+
+.auto-shadow-modal {
+  box-shadow: var(--shadow-modal);
+}
+
+.auto-shadow-dropdown {
+  box-shadow: var(--shadow-dropdown);
+}
+
+.auto-shadow-header {
+  box-shadow: var(--shadow-header);
+}
+
+.auto-shadow-tooltip {
+  box-shadow: var(--shadow-tooltip);
+}
+
+.auto-shadow-buttonDark {
+  box-shadow: var(--shadow-buttonDark);
+}
+
+.auto-shadow-cardDark {
+  box-shadow: var(--shadow-cardDark);
+}
+
+.auto-shadow-modalDark {
+  box-shadow: var(--shadow-modalDark);
+}
+
+.auto-shadow-dropdownDark {
+  box-shadow: var(--shadow-dropdownDark);
+}
+
+.auto-shadow-headerDark {
+  box-shadow: var(--shadow-headerDark);
+}
+
+.auto-shadow-tooltipDark {
+  box-shadow: var(--shadow-tooltipDark);
+}
+
+
+/**
+ * Auto Design Tokens - Color Utility Classes
+ */
+
+/* Background Color Utilities */
+.auto-bg-primary {
+  background-color: var(--color-backgroundPrimary);
+}
+
+.auto-bg-secondary {
+  background-color: var(--color-backgroundSecondary);
+}
+
+.auto-bg-tertiary {
+  background-color: var(--color-backgroundTertiary);
+}
+
+.auto-bg-error {
+  background-color: var(--color-backgroundError);
+}
+
+.auto-bg-success {
+  background-color: var(--color-backgroundSuccess);
+}
+
+.auto-bg-warning {
+  background-color: var(--color-backgroundWarning);
+}
+
+.auto-bg-info {
+  background-color: var(--color-backgroundInfo);
+}
+
+.auto-bg-accent {
+  background-color: var(--color-backgroundAccent);
+}
+
+/* Border Color Utilities */
+.auto-border-primary {
+  border-color: var(--color-borderPrimary);
+}
+
+.auto-border-secondary {
+  border-color: var(--color-borderSecondary);
+}
+
+.auto-border-focus {
+  border-color: var(--color-borderFocus);
+}
+
+.auto-border-error {
+  border-color: var(--color-borderError);
+}
+
+/* Button Utilities */
+.auto-button-primary {
+  background-color: var(--color-buttonPrimary);
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+.auto-button-primary:hover {
+  background-color: var(--color-buttonPrimaryHover);
+}
+
+.auto-button-secondary {
+  background-color: var(--color-buttonSecondary);
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+.auto-button-secondary:hover {
+  background-color: var(--color-buttonSecondaryHover);
+}
+
+.auto-button-accent {
+  background-color: var(--color-buttonAccent);
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+.auto-button-accent:hover {
+  background-color: var(--color-buttonAccentHover);
+}
+
+.auto-button-danger {
+  background-color: var(--color-buttonDanger);
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+.auto-button-danger:hover {
+  background-color: var(--color-buttonDangerHover);
+}
+
+.auto-button-disabled {
+  background-color: var(--color-buttonDisabled);
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+/* Explorer Background Colors */
+.auto-explorer-bg-grayDark {
+  background-color: var(--explorer-color-grayDark);
+}
+
+.auto-explorer-bg-grayDarker {
+  background-color: var(--explorer-color-grayDarker);
+}
+
+.auto-explorer-bg-grayLight {
+  background-color: var(--explorer-color-grayLight);
+}
+
+.auto-explorer-bg-gradientFrom {
+  background-color: var(--explorer-color-gradientFrom);
+}
+
+.auto-explorer-bg-gradientVia {
+  background-color: var(--explorer-color-gradientVia);
+}
+
+.auto-explorer-bg-gradientTo {
+  background-color: var(--explorer-color-gradientTo);
+}
+
+.auto-explorer-bg-gradientToSecondary {
+  background-color: var(--explorer-color-gradientToSecondary);
+}
+
+.auto-explorer-bg-white {
+  background-color: var(--explorer-color-white);
+}
+
+.auto-explorer-bg-whiteTransparent {
+  background-color: var(--explorer-color-whiteTransparent);
+}
+
+.auto-explorer-bg-whiteOpaque {
+  background-color: var(--explorer-color-whiteOpaque);
+}
+
+.auto-explorer-bg-pastelPurple {
+  background-color: var(--explorer-color-pastelPurple);
+}
+
+.auto-explorer-bg-pastelBlue {
+  background-color: var(--explorer-color-pastelBlue);
+}
+
+.auto-explorer-bg-pastelPink {
+  background-color: var(--explorer-color-pastelPink);
+}
+
+.auto-explorer-bg-pastelGreen {
+  background-color: var(--explorer-color-pastelGreen);
+}
+
+.auto-explorer-bg-greenBright {
+  background-color: var(--explorer-color-greenBright);
+}
+
+.auto-explorer-bg-primaryAccent {
+  background-color: var(--explorer-color-primaryAccent);
+}
+
+.auto-explorer-bg-blueAccent {
+  background-color: var(--explorer-color-blueAccent);
+}
+
+.auto-explorer-bg-blueDarkAccent {
+  background-color: var(--explorer-color-blueDarkAccent);
+}
+
+.auto-explorer-bg-blueLight {
+  background-color: var(--explorer-color-blueLight);
+}
+
+.auto-explorer-bg-blueShade {
+  background-color: var(--explorer-color-blueShade);
+}
+
+.auto-explorer-bg-blueUndertone {
+  background-color: var(--explorer-color-blueUndertone);
+}
+
+.auto-explorer-bg-backgroundLight {
+  background-color: var(--explorer-color-backgroundLight);
+}
+
+.auto-explorer-bg-backgroundDark {
+  background-color: var(--explorer-color-backgroundDark);
+}
+
+.auto-explorer-bg-backgroundDarker {
+  background-color: var(--explorer-color-backgroundDarker);
+}
+
+.auto-explorer-bg-backgroundDarkest {
+  background-color: var(--explorer-color-backgroundDarkest);
+}
+
+.auto-explorer-bg-boxLight {
+  background-color: var(--explorer-color-boxLight);
+}
+
+.auto-explorer-bg-boxDark {
+  background-color: var(--explorer-color-boxDark);
+}
+
+.auto-explorer-bg-buttonLightFrom {
+  background-color: var(--explorer-color-buttonLightFrom);
+}
+
+.auto-explorer-bg-buttonLightTo {
+  background-color: var(--explorer-color-buttonLightTo);
+}
+
+.auto-explorer-bg-buttonDarkFrom {
+  background-color: var(--explorer-color-buttonDarkFrom);
+}
+
+.auto-explorer-bg-buttonDarkTo {
+  background-color: var(--explorer-color-buttonDarkTo);
+}
+
+.auto-explorer-bg-headerLight {
+  background-color: var(--explorer-color-headerLight);
+}
+
+.auto-explorer-bg-headerDark {
+  background-color: var(--explorer-color-headerDark);
+}
+
+.auto-explorer-bg-footerLight {
+  background-color: var(--explorer-color-footerLight);
+}
+
+.auto-explorer-bg-footerDark {
+  background-color: var(--explorer-color-footerDark);
+}
+
+/* Explorer Text Colors */
+.auto-explorer-text-grayDark {
+  color: var(--explorer-color-grayDark);
+}
+
+.auto-explorer-text-grayDarker {
+  color: var(--explorer-color-grayDarker);
+}
+
+.auto-explorer-text-grayLight {
+  color: var(--explorer-color-grayLight);
+}
+
+.auto-explorer-text-gradientFrom {
+  color: var(--explorer-color-gradientFrom);
+}
+
+.auto-explorer-text-gradientVia {
+  color: var(--explorer-color-gradientVia);
+}
+
+.auto-explorer-text-gradientTo {
+  color: var(--explorer-color-gradientTo);
+}
+
+.auto-explorer-text-gradientToSecondary {
+  color: var(--explorer-color-gradientToSecondary);
+}
+
+.auto-explorer-text-white {
+  color: var(--explorer-color-white);
+}
+
+.auto-explorer-text-whiteTransparent {
+  color: var(--explorer-color-whiteTransparent);
+}
+
+.auto-explorer-text-whiteOpaque {
+  color: var(--explorer-color-whiteOpaque);
+}
+
+.auto-explorer-text-pastelPurple {
+  color: var(--explorer-color-pastelPurple);
+}
+
+.auto-explorer-text-pastelBlue {
+  color: var(--explorer-color-pastelBlue);
+}
+
+.auto-explorer-text-pastelPink {
+  color: var(--explorer-color-pastelPink);
+}
+
+.auto-explorer-text-pastelGreen {
+  color: var(--explorer-color-pastelGreen);
+}
+
+.auto-explorer-text-greenBright {
+  color: var(--explorer-color-greenBright);
+}
+
+.auto-explorer-text-primaryAccent {
+  color: var(--explorer-color-primaryAccent);
+}
+
+.auto-explorer-text-blueAccent {
+  color: var(--explorer-color-blueAccent);
+}
+
+.auto-explorer-text-blueDarkAccent {
+  color: var(--explorer-color-blueDarkAccent);
+}
+
+.auto-explorer-text-blueLight {
+  color: var(--explorer-color-blueLight);
+}
+
+.auto-explorer-text-blueShade {
+  color: var(--explorer-color-blueShade);
+}
+
+.auto-explorer-text-blueUndertone {
+  color: var(--explorer-color-blueUndertone);
+}
+
+.auto-explorer-text-backgroundLight {
+  color: var(--explorer-color-backgroundLight);
+}
+
+.auto-explorer-text-backgroundDark {
+  color: var(--explorer-color-backgroundDark);
+}
+
+.auto-explorer-text-backgroundDarker {
+  color: var(--explorer-color-backgroundDarker);
+}
+
+.auto-explorer-text-backgroundDarkest {
+  color: var(--explorer-color-backgroundDarkest);
+}
+
+.auto-explorer-text-boxLight {
+  color: var(--explorer-color-boxLight);
+}
+
+.auto-explorer-text-boxDark {
+  color: var(--explorer-color-boxDark);
+}
+
+.auto-explorer-text-buttonLightFrom {
+  color: var(--explorer-color-buttonLightFrom);
+}
+
+.auto-explorer-text-buttonLightTo {
+  color: var(--explorer-color-buttonLightTo);
+}
+
+.auto-explorer-text-buttonDarkFrom {
+  color: var(--explorer-color-buttonDarkFrom);
+}
+
+.auto-explorer-text-buttonDarkTo {
+  color: var(--explorer-color-buttonDarkTo);
+}
+
+.auto-explorer-text-headerLight {
+  color: var(--explorer-color-headerLight);
+}
+
+.auto-explorer-text-headerDark {
+  color: var(--explorer-color-headerDark);
+}
+
+.auto-explorer-text-footerLight {
+  color: var(--explorer-color-footerLight);
+}
+
+.auto-explorer-text-footerDark {
+  color: var(--explorer-color-footerDark);
+}
+
+/* Explorer Gradient Utilities */
+.auto-explorer-bg-gradient-dark {
+  background: var(--explorer-gradient-background-dark);
+}
+
+.auto-explorer-bg-gradient-light {
+  background: var(--explorer-gradient-background-light);
+}
+
+.auto-explorer-button-gradient-light {
+  background: var(--explorer-gradient-button-light);
+}
+
+.auto-explorer-button-gradient-dark {
+  background: var(--explorer-gradient-button-dark);
+}
+
+.auto-explorer-button-gradient-light:hover {
+  background: var(--explorer-gradient-button-hover-light);
+}
+
+.auto-explorer-button-gradient-dark:hover {
+  background: var(--explorer-gradient-button-hover-dark);
+}
+
+.auto-explorer-card-gradient-primary {
+  background: var(--explorer-gradient-card-primary);
+}
+
+.auto-explorer-card-gradient-secondary {
+  background: var(--explorer-gradient-card-secondary);
+}
+