@autonomys/design-tokens 1.4.18

package/dist/css/utilities.css

@@ -0,0 +1,1919 @@
+/**
+ * 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);
+}
+