@bcc-code/component-library-vue 0.0.0-dev.dc82c05 → 0.0.0-dev.df70a52

package/dist/theme.css

@@ -4,96 +4,222 @@
 
 @import 'tailwindcss';
 @import '@bcc-code/design-tokens/tailwind';
-@import '@bcc-code/design-tokens/primevue/overrides';
 
 
 /* === ./styles/theme.css === */
 @theme {
+	/* spacing variables */
+	--spacing-inset-top: env(safe-area-inset-top, var(--safe-area-inset-top, 0px));
+	--spacing-inset-top-1: max(0.25rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
+	--spacing-inset-top-2: max(0.5rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
+	--spacing-inset-top-4: max(1rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
+	--spacing-inset-bottom: env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px));
+	--spacing-inset-bottom-1: max(0.25rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
+	--spacing-inset-bottom-2: max(0.5rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
+	--spacing-inset-bottom-4: max(1rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
+	--spacing-inset-left: env(safe-area-inset-left, var(--safe-area-inset-left, 0px));
+	--spacing-inset-right: env(safe-area-inset-right, var(--safe-area-inset-right, 0px));
+
+	--spacing-18: 4.5rem;
+}
+
+.ctx-default {
+	@apply ctx-default;
+}
+.ctx-success {
+	@apply ctx-success-subtlest;
+}
+.ctx-danger {
+	@apply ctx-danger-subtlest;
+}
+.ctx-warning {
+	@apply ctx-warning-subtlest;
+}
+.ctx-info {
+	@apply ctx-info-subtlest;
+}
+
+.ctx-blue-bolder {
+	@apply ctx-blue-bolder;
+}
+.ctx-blue-subtle {
+	@apply ctx-blue-subtle;
+}
+.ctx-blue-subtler {
+	@apply ctx-blue-subtler;
+}
+.ctx-blue-subtlest {
+	@apply ctx-blue-subtlest;
+}
+.ctx-brand-boldest {
+	@apply ctx-brand-boldest;
+}
+.ctx-brand-bolder {
+	@apply ctx-brand-bolder;
+}
+.ctx-brand-bold {
+	@apply ctx-brand-bold;
+}
+.ctx-brand-subtle {
+	@apply ctx-brand-subtle;
+}
+.ctx-brand-subtler {
+	@apply ctx-brand-subtler;
+}
+.ctx-brand-subtlest {
+	@apply ctx-brand-subtlest;
+}
+.ctx-brown-bolder {
+	@apply ctx-brown-bolder;
+}
+.ctx-brown-subtle {
+	@apply ctx-brown-subtle;
+}
+.ctx-brown-subtler {
+	@apply ctx-brown-subtler;
+}
+.ctx-brown-subtlest {
+	@apply ctx-brown-subtlest;
+}
+.ctx-danger-subtlest {
+	@apply ctx-danger;
+}
+.ctx-danger-bolder {
+	@apply ctx-danger-bolder;
+}
+.ctx-gray-bolder {
+	@apply ctx-gray-bolder;
+}
+.ctx-gray-subtle {
+	@apply ctx-gray-subtle;
+}
+.ctx-gray-subtler {
+	@apply ctx-gray-subtler;
+}
+.ctx-gray-subtlest {
+	@apply ctx-gray-subtlest;
+}
+.ctx-green-bolder {
+	@apply ctx-green-bolder;
+}
+.ctx-green-subtle {
+	@apply ctx-green-subtle;
+}
+.ctx-green-subtler {
+	@apply ctx-green-subtler;
+}
+.ctx-green-subtlest {
+	@apply ctx-green-subtlest;
+}
+.ctx-info-subtlest {
+	@apply ctx-info;
+}
+.ctx-info-bolder {
+	@apply ctx-info-bolder;
+}
+.ctx-magenta-bolder {
+	@apply ctx-magenta-bolder;
+}
+.ctx-magenta-subtle {
+	@apply ctx-magenta-subtle;
+}
+.ctx-magenta-subtler {
+	@apply ctx-magenta-subtler;
+}
+.ctx-magenta-subtlest {
+	@apply ctx-magenta-subtlest;
+}
+.ctx-neutral-boldest {
+	@apply ctx-neutral-boldest;
+}
+.ctx-neutral-bolder {
+	@apply ctx-neutral-bolder;
+}
+.ctx-neutral-bold {
+	@apply ctx-neutral-bold;
+}
+.ctx-neutral-subtle {
+	@apply ctx-neutral-subtle;
+}
+.ctx-neutral-subtler {
+	@apply ctx-neutral-subtler;
+}
+.ctx-neutral-subtlest {
+	@apply ctx-neutral-subtlest;
+}
+.ctx-orange-bolder {
+	@apply ctx-orange-bolder;
+}
+.ctx-orange-subtle {
+	@apply ctx-orange-subtle;
+}
+.ctx-orange-subtler {
+	@apply ctx-orange-subtler;
+}
+.ctx-orange-subtlest {
+	@apply ctx-orange-subtlest;
+}
+.ctx-purple-bolder {
+	@apply ctx-purple-bolder;
+}
+.ctx-purple-subtle {
+	@apply ctx-purple-subtle;
+}
+.ctx-purple-subtler {
+	@apply ctx-purple-subtler;
+}
+.ctx-purple-subtlest {
+	@apply ctx-purple-subtlest;
+}
+.ctx-red-bolder {
+	@apply ctx-red-bolder;
+}
+.ctx-red-subtle {
+	@apply ctx-red-subtle;
+}
+.ctx-red-subtler {
+	@apply ctx-red-subtler;
+}
+.ctx-red-subtlest {
+	@apply ctx-red-subtlest;
+}
+.ctx-success-subtlest {
+	@apply ctx-success;
+}
+.ctx-success-bolder {
+	@apply ctx-success-bolder;
+}
+.ctx-teal-bolder {
+	@apply ctx-teal-bolder;
+}
+.ctx-teal-subtle {
+	@apply ctx-teal-subtle;
+}
+.ctx-teal-subtler {
+	@apply ctx-teal-subtler;
+}
+.ctx-teal-subtlest {
+	@apply ctx-teal-subtlest;
+}
+.ctx-warning-subtlest {
+	@apply ctx-warning;
+}
+.ctx-warning-bolder {
+	@apply ctx-warning-bolder;
+}
+.ctx-yellow-bolder {
+	@apply ctx-yellow-bolder;
+}
+.ctx-yellow-subtle {
+	@apply ctx-yellow-subtle;
+}
+.ctx-yellow-subtler {
+	@apply ctx-yellow-subtler;
+}
+.ctx-yellow-subtlest {
+	@apply ctx-yellow-subtlest;
+}
 
-    /* spacing variables */
-    --spacing-inset-top: env(safe-area-inset-top, var(--safe-area-inset-top, 0px));
-    --spacing-inset-top-1: max(0.25rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
-    --spacing-inset-top-2: max(0.5rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
-    --spacing-inset-top-4: max(1rem, env(safe-area-inset-top, var(--safe-area-inset-top, 0px)));
-    --spacing-inset-bottom: env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px));
-    --spacing-inset-bottom-1: max(0.25rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
-    --spacing-inset-bottom-2: max(0.5rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
-    --spacing-inset-bottom-4: max(1rem, env(safe-area-inset-bottom, var(--safe-area-inset-bottom, 0px)));
-    --spacing-inset-left: env(safe-area-inset-left, var(--safe-area-inset-left, 0px));
-    --spacing-inset-right: env(safe-area-inset-right, var(--safe-area-inset-right, 0px));
-
-    --spacing-18: 4.5rem;
-
-    /* color variables */
-    --color-overlay: rgba(17, 24, 39, 0.85);
-}
-
-.ctx-default { @apply ctx-default; }
-.ctx-success { @apply ctx-success-subtlest; }
-.ctx-danger { @apply ctx-danger-subtlest; }
-.ctx-warning { @apply ctx-warning-subtlest; }
-.ctx-info { @apply ctx-info-subtlest; }
-
-.ctx-blue-bolder { @apply ctx-blue-bolder; }
-.ctx-blue-subtle { @apply ctx-blue-subtle; }
-.ctx-blue-subtler { @apply ctx-blue-subtler; }
-.ctx-blue-subtlest { @apply ctx-blue-subtlest; }
-.ctx-brand-boldest { @apply ctx-brand-boldest; }
-.ctx-brand-bolder { @apply ctx-brand-bolder; }
-.ctx-brand-bold { @apply ctx-brand-bold; }
-.ctx-brand-subtle { @apply ctx-brand-subtle; }
-.ctx-brand-subtler { @apply ctx-brand-subtler; }
-.ctx-brand-subtlest { @apply ctx-brand-subtlest; }
-.ctx-brown-bolder { @apply ctx-brown-bolder; }
-.ctx-brown-subtle { @apply ctx-brown-subtle; }
-.ctx-brown-subtler { @apply ctx-brown-subtler; }
-.ctx-brown-subtlest { @apply ctx-brown-subtlest; }
-.ctx-danger-subtlest { @apply ctx-danger; }
-.ctx-danger-bolder { @apply ctx-danger-bolder; }
-.ctx-gray-bolder { @apply ctx-gray-bolder; }
-.ctx-gray-subtle { @apply ctx-gray-subtle; }
-.ctx-gray-subtler { @apply ctx-gray-subtler; }
-.ctx-gray-subtlest { @apply ctx-gray-subtlest; }
-.ctx-green-bolder { @apply ctx-green-bolder; }
-.ctx-green-subtle { @apply ctx-green-subtle; }
-.ctx-green-subtler { @apply ctx-green-subtler; }
-.ctx-green-subtlest { @apply ctx-green-subtlest; }
-.ctx-info-subtlest { @apply ctx-info; }
-.ctx-info-bolder { @apply ctx-info-bolder; }
-.ctx-magenta-bolder { @apply ctx-magenta-bolder; }
-.ctx-magenta-subtle { @apply ctx-magenta-subtle; }
-.ctx-magenta-subtler { @apply ctx-magenta-subtler; }
-.ctx-magenta-subtlest { @apply ctx-magenta-subtlest; }
-.ctx-neutral-boldest { @apply ctx-neutral-boldest; }
-.ctx-neutral-bolder { @apply ctx-neutral-bolder; }
-.ctx-neutral-bold { @apply ctx-neutral-bold; }
-.ctx-neutral-subtle { @apply ctx-neutral-subtle; }
-.ctx-neutral-subtler { @apply ctx-neutral-subtler; }
-.ctx-neutral-subtlest { @apply ctx-neutral-subtlest; }
-.ctx-orange-bolder { @apply ctx-orange-bolder; }
-.ctx-orange-subtle { @apply ctx-orange-subtle; }
-.ctx-orange-subtler { @apply ctx-orange-subtler; }
-.ctx-orange-subtlest { @apply ctx-orange-subtlest; }
-.ctx-purple-bolder { @apply ctx-purple-bolder; }
-.ctx-purple-subtle { @apply ctx-purple-subtle; }
-.ctx-purple-subtler { @apply ctx-purple-subtler; }
-.ctx-purple-subtlest { @apply ctx-purple-subtlest; }
-.ctx-red-bolder { @apply ctx-red-bolder; }
-.ctx-red-subtle { @apply ctx-red-subtle; }
-.ctx-red-subtler { @apply ctx-red-subtler; }
-.ctx-red-subtlest { @apply ctx-red-subtlest; }
-.ctx-success-subtlest { @apply ctx-success; }
-.ctx-success-bolder { @apply ctx-success-bolder; }
-.ctx-teal-bolder { @apply ctx-teal-bolder; }
-.ctx-teal-subtle { @apply ctx-teal-subtle; }
-.ctx-teal-subtler { @apply ctx-teal-subtler; }
-.ctx-teal-subtlest { @apply ctx-teal-subtlest; }
-.ctx-warning-subtlest { @apply ctx-warning; }
-.ctx-warning-bolder { @apply ctx-warning-bolder; }
-.ctx-yellow-bolder { @apply ctx-yellow-bolder; }
-.ctx-yellow-subtle { @apply ctx-yellow-subtle; }
-.ctx-yellow-subtler { @apply ctx-yellow-subtler; }
-.ctx-yellow-subtlest { @apply ctx-yellow-subtlest; }
 
 
 /* === ./styles/semantic.css === */
@@ -677,15 +803,11 @@
   --ctx-background: var(--color-default-neutral-0);
   --ctx-gradient: var(--color-default-neutral-100);
   --ctx-border: var(--color-default-neutral-300);
+  --ctx-border-bold: var(--color-default-neutral-800);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-neutral-1000);
-  --ctx-text-pressed: var(--color-default-neutral-1000);
   --ctx-background-hover: var(--color-default-neutral-100);
-  --ctx-background-pressed: var(--color-default-neutral-200);
-  --ctx-gradient-hover: var(--color-default-neutral-200);
-  --ctx-gradient-pressed: var(--color-default-neutral-200);
   --ctx-border-hover: var(--color-default-neutral-300);
-  --ctx-border-pressed: var(--color-default-neutral-300);
 }
 
 @utility ctx-blue-bolder {
@@ -693,16 +815,12 @@
   --ctx-text-bold: var(--color-default-blue-100);
   --ctx-background: var(--color-default-blue-700);
   --ctx-gradient: var(--color-default-blue-800);
-  --ctx-border: var(--color-default-blue-700);
+  --ctx-border: var(--color-default-blue-800);
+  --ctx-border-bold: var(--color-default-blue-600);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-blue-200);
-  --ctx-text-pressed: var(--color-default-blue-200);
   --ctx-background-hover: var(--color-default-blue-800);
-  --ctx-background-pressed: var(--color-default-blue-900);
-  --ctx-gradient-hover: var(--color-default-blue-900);
-  --ctx-gradient-pressed: var(--color-default-blue-900);
-  --ctx-border-hover: var(--color-default-blue-700);
-  --ctx-border-pressed: var(--color-default-blue-700);
+  --ctx-border-hover: var(--color-default-blue-800);
 }
 
 @utility ctx-blue-subtle {
@@ -711,15 +829,11 @@
   --ctx-background: var(--color-default-blue-400);
   --ctx-gradient: var(--color-default-blue-300);
   --ctx-border: var(--color-default-blue-500);
+  --ctx-border-bold: var(--color-default-blue-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-blue-900);
-  --ctx-text-pressed: var(--color-default-blue-900);
   --ctx-background-hover: var(--color-default-blue-300);
-  --ctx-background-pressed: var(--color-default-blue-200);
-  --ctx-gradient-hover: var(--color-default-blue-200);
-  --ctx-gradient-pressed: var(--color-default-blue-200);
   --ctx-border-hover: var(--color-default-blue-500);
-  --ctx-border-pressed: var(--color-default-blue-500);
 }
 
 @utility ctx-blue-subtler {
@@ -727,16 +841,12 @@
   --ctx-text-bold: var(--color-default-blue-900);
   --ctx-background: var(--color-default-blue-200);
   --ctx-gradient: var(--color-default-blue-300);
-  --ctx-border: var(--color-default-blue-400);
+  --ctx-border: var(--color-default-blue-300);
+  --ctx-border-bold: var(--color-default-blue-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-blue-800);
-  --ctx-text-pressed: var(--color-default-blue-800);
   --ctx-background-hover: var(--color-default-blue-300);
-  --ctx-background-pressed: var(--color-default-blue-400);
-  --ctx-gradient-hover: var(--color-default-blue-400);
-  --ctx-gradient-pressed: var(--color-default-blue-400);
-  --ctx-border-hover: var(--color-default-blue-400);
-  --ctx-border-pressed: var(--color-default-blue-400);
+  --ctx-border-hover: var(--color-default-blue-300);
 }
 
 @utility ctx-blue-subtlest {
@@ -744,16 +854,12 @@
   --ctx-text-bold: var(--color-default-blue-900);
   --ctx-background: var(--color-default-blue-100);
   --ctx-gradient: var(--color-default-blue-200);
-  --ctx-border: var(--color-default-blue-300);
+  --ctx-border: var(--color-default-blue-200);
+  --ctx-border-bold: var(--color-default-blue-400);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-blue-800);
-  --ctx-text-pressed: var(--color-default-blue-800);
   --ctx-background-hover: var(--color-default-blue-200);
-  --ctx-background-pressed: var(--color-default-blue-300);
-  --ctx-gradient-hover: var(--color-default-blue-300);
-  --ctx-gradient-pressed: var(--color-default-blue-300);
-  --ctx-border-hover: var(--color-default-blue-300);
-  --ctx-border-pressed: var(--color-default-blue-300);
+  --ctx-border-hover: var(--color-default-blue-200);
 }
 
 @utility ctx-brand-bold {
@@ -761,16 +867,12 @@
   --ctx-text-bold: var(--color-default-neutral-100);
   --ctx-background: var(--color-default-bcc-600);
   --ctx-gradient: var(--color-default-bcc-700);
-  --ctx-border: var(--color-default-bcc-600);
+  --ctx-border: var(--color-default-bcc-700);
+  --ctx-border-bold: var(--color-default-bcc-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-bcc-200);
-  --ctx-text-pressed: var(--color-default-bcc-200);
   --ctx-background-hover: var(--color-default-bcc-700);
-  --ctx-background-pressed: var(--color-default-bcc-800);
-  --ctx-gradient-hover: var(--color-default-bcc-800);
-  --ctx-gradient-pressed: var(--color-default-bcc-800);
-  --ctx-border-hover: var(--color-default-bcc-600);
-  --ctx-border-pressed: var(--color-default-bcc-600);
+  --ctx-border-hover: var(--color-default-bcc-700);
 }
 
 @utility ctx-brand-bolder {
@@ -778,16 +880,12 @@
   --ctx-text-bold: var(--color-default-neutral-0);
   --ctx-background: var(--color-default-bcc-800);
   --ctx-gradient: var(--color-default-bcc-900);
-  --ctx-border: var(--color-default-bcc-700);
+  --ctx-border: var(--color-default-bcc-900);
+  --ctx-border-bold: var(--color-default-bcc-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-neutral-0);
-  --ctx-text-pressed: var(--color-default-neutral-0);
   --ctx-background-hover: var(--color-default-bcc-900);
-  --ctx-background-pressed: var(--color-default-bcc-1000);
-  --ctx-gradient-hover: var(--color-default-bcc-1000);
-  --ctx-gradient-pressed: var(--color-default-bcc-1000);
-  --ctx-border-hover: var(--color-default-bcc-700);
-  --ctx-border-pressed: var(--color-default-bcc-700);
+  --ctx-border-hover: var(--color-default-bcc-900);
 }
 
 @utility ctx-brand-boldest {
@@ -796,15 +894,11 @@
   --ctx-background: var(--color-default-bcc-1000);
   --ctx-gradient: var(--color-default-bcc-900);
   --ctx-border: var(--color-default-bcc-800);
+  --ctx-border-bold: var(--color-default-bcc-600);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-neutral-0);
-  --ctx-text-pressed: var(--color-default-neutral-0);
   --ctx-background-hover: var(--color-default-bcc-900);
-  --ctx-background-pressed: var(--color-default-bcc-800);
-  --ctx-gradient-hover: var(--color-default-bcc-800);
-  --ctx-gradient-pressed: var(--color-default-bcc-800);
   --ctx-border-hover: var(--color-default-bcc-800);
-  --ctx-border-pressed: var(--color-default-bcc-800);
 }
 
 @utility ctx-brand-default {
@@ -813,15 +907,11 @@
   --ctx-background: var(--color-default-neutral-0);
   --ctx-gradient: var(--color-default-neutral-0);
   --ctx-border: var(--color-default-neutral-700);
+  --ctx-border-bold: var(--color-default-neutral-800);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-neutral-1000);
-  --ctx-text-pressed: var(--color-default-neutral-1000);
   --ctx-background-hover: var(--color-default-neutral-0);
-  --ctx-background-pressed: var(--color-default-neutral-0);
-  --ctx-gradient-hover: var(--color-default-neutral-0);
-  --ctx-gradient-pressed: var(--color-default-neutral-0);
   --ctx-border-hover: var(--color-default-neutral-700);
-  --ctx-border-pressed: var(--color-default-neutral-700);
 }
 
 @utility ctx-brand-subtle {
@@ -830,15 +920,11 @@
   --ctx-background: var(--color-default-bcc-400);
   --ctx-gradient: var(--color-default-bcc-300);
   --ctx-border: var(--color-default-bcc-500);
+  --ctx-border-bold: var(--color-default-bcc-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-bcc-1000);
-  --ctx-text-pressed: var(--color-default-bcc-1000);
   --ctx-background-hover: var(--color-default-bcc-300);
-  --ctx-background-pressed: var(--color-default-bcc-200);
-  --ctx-gradient-hover: var(--color-default-bcc-200);
-  --ctx-gradient-pressed: var(--color-default-bcc-200);
   --ctx-border-hover: var(--color-default-bcc-500);
-  --ctx-border-pressed: var(--color-default-bcc-500);
 }
 
 @utility ctx-brand-subtler {
@@ -846,16 +932,12 @@
   --ctx-text-bold: var(--color-default-bcc-800);
   --ctx-background: var(--color-default-bcc-200);
   --ctx-gradient: var(--color-default-bcc-300);
-  --ctx-border: var(--color-default-bcc-400);
+  --ctx-border: var(--color-default-bcc-300);
+  --ctx-border-bold: var(--color-default-bcc-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-bcc-900);
-  --ctx-text-pressed: var(--color-default-bcc-900);
   --ctx-background-hover: var(--color-default-bcc-300);
-  --ctx-background-pressed: var(--color-default-bcc-400);
-  --ctx-gradient-hover: var(--color-default-bcc-400);
-  --ctx-gradient-pressed: var(--color-default-bcc-400);
-  --ctx-border-hover: var(--color-default-bcc-400);
-  --ctx-border-pressed: var(--color-default-bcc-400);
+  --ctx-border-hover: var(--color-default-bcc-300);
 }
 
 @utility ctx-brand-subtlest {
@@ -863,16 +945,12 @@
   --ctx-text-bold: var(--color-default-bcc-700);
   --ctx-background: var(--color-default-bcc-100);
   --ctx-gradient: var(--color-default-bcc-200);
-  --ctx-border: var(--color-default-bcc-300);
+  --ctx-border: var(--color-default-bcc-200);
+  --ctx-border-bold: var(--color-default-bcc-400);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-bcc-800);
-  --ctx-text-pressed: var(--color-default-bcc-800);
   --ctx-background-hover: var(--color-default-bcc-200);
-  --ctx-background-pressed: var(--color-default-bcc-300);
-  --ctx-gradient-hover: var(--color-default-bcc-300);
-  --ctx-gradient-pressed: var(--color-default-bcc-300);
-  --ctx-border-hover: var(--color-default-bcc-300);
-  --ctx-border-pressed: var(--color-default-bcc-300);
+  --ctx-border-hover: var(--color-default-bcc-200);
 }
 
 @utility ctx-brown-bolder {
@@ -880,16 +958,12 @@
   --ctx-text-bold: var(--color-default-brown-100);
   --ctx-background: var(--color-default-brown-700);
   --ctx-gradient: var(--color-default-brown-800);
-  --ctx-border: var(--color-default-brown-700);
+  --ctx-border: var(--color-default-brown-800);
+  --ctx-border-bold: var(--color-default-brown-600);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-brown-200);
-  --ctx-text-pressed: var(--color-default-brown-200);
   --ctx-background-hover: var(--color-default-brown-800);
-  --ctx-background-pressed: var(--color-default-brown-900);
-  --ctx-gradient-hover: var(--color-default-brown-900);
-  --ctx-gradient-pressed: var(--color-default-brown-900);
-  --ctx-border-hover: var(--color-default-brown-700);
-  --ctx-border-pressed: var(--color-default-brown-700);
+  --ctx-border-hover: var(--color-default-brown-800);
 }
 
 @utility ctx-brown-subtle {
@@ -898,15 +972,11 @@
   --ctx-background: var(--color-default-brown-400);
   --ctx-gradient: var(--color-default-brown-300);
   --ctx-border: var(--color-default-brown-500);
+  --ctx-border-bold: var(--color-default-brown-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-brown-900);
-  --ctx-text-pressed: var(--color-default-brown-900);
   --ctx-background-hover: var(--color-default-brown-300);
-  --ctx-background-pressed: var(--color-default-brown-200);
-  --ctx-gradient-hover: var(--color-default-brown-200);
-  --ctx-gradient-pressed: var(--color-default-brown-200);
   --ctx-border-hover: var(--color-default-brown-500);
-  --ctx-border-pressed: var(--color-default-brown-500);
 }
 
 @utility ctx-brown-subtler {
@@ -914,16 +984,12 @@
   --ctx-text-bold: var(--color-default-brown-900);
   --ctx-background: var(--color-default-brown-200);
   --ctx-gradient: var(--color-default-brown-300);
-  --ctx-border: var(--color-default-brown-400);
+  --ctx-border: var(--color-default-brown-300);
+  --ctx-border-bold: var(--color-default-brown-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-brown-800);
-  --ctx-text-pressed: var(--color-default-brown-800);
   --ctx-background-hover: var(--color-default-brown-300);
-  --ctx-background-pressed: var(--color-default-brown-400);
-  --ctx-gradient-hover: var(--color-default-brown-400);
-  --ctx-gradient-pressed: var(--color-default-brown-400);
-  --ctx-border-hover: var(--color-default-brown-400);
-  --ctx-border-pressed: var(--color-default-brown-400);
+  --ctx-border-hover: var(--color-default-brown-300);
 }
 
 @utility ctx-brown-subtlest {
@@ -931,16 +997,12 @@
   --ctx-text-bold: var(--color-default-brown-900);
   --ctx-background: var(--color-default-brown-100);
   --ctx-gradient: var(--color-default-brown-200);
-  --ctx-border: var(--color-default-brown-300);
+  --ctx-border: var(--color-default-brown-200);
+  --ctx-border-bold: var(--color-default-brown-400);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-brown-800);
-  --ctx-text-pressed: var(--color-default-brown-800);
   --ctx-background-hover: var(--color-default-brown-200);
-  --ctx-background-pressed: var(--color-default-brown-300);
-  --ctx-gradient-hover: var(--color-default-brown-300);
-  --ctx-gradient-pressed: var(--color-default-brown-300);
-  --ctx-border-hover: var(--color-default-brown-300);
-  --ctx-border-pressed: var(--color-default-brown-300);
+  --ctx-border-hover: var(--color-default-brown-200);
 }
 
 @utility ctx-danger-bolder {
@@ -949,15 +1011,11 @@
   --ctx-background: var(--color-default-red-700);
   --ctx-gradient: var(--color-default-red-800);
   --ctx-border: var(--color-default-red-700);
+  --ctx-border-bold: var(--color-default-red-400);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-red-200);
-  --ctx-text-pressed: var(--color-default-red-200);
   --ctx-background-hover: var(--color-default-red-800);
-  --ctx-background-pressed: var(--color-default-red-900);
-  --ctx-gradient-hover: var(--color-default-red-900);
-  --ctx-gradient-pressed: var(--color-default-red-900);
   --ctx-border-hover: var(--color-default-red-700);
-  --ctx-border-pressed: var(--color-default-red-700);
 }
 
 @utility ctx-danger-subtlest {
@@ -966,15 +1024,11 @@
   --ctx-background: var(--color-default-red-100);
   --ctx-gradient: var(--color-default-red-200);
   --ctx-border: var(--color-default-red-300);
+  --ctx-border-bold: var(--color-default-red-800);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-red-800);
-  --ctx-text-pressed: var(--color-default-red-800);
   --ctx-background-hover: var(--color-default-red-200);
-  --ctx-background-pressed: var(--color-default-red-300);
-  --ctx-gradient-hover: var(--color-default-red-300);
-  --ctx-gradient-pressed: var(--color-default-red-300);
   --ctx-border-hover: var(--color-default-red-300);
-  --ctx-border-pressed: var(--color-default-red-300);
 }
 
 @utility ctx-gray-bolder {
@@ -982,16 +1036,12 @@
   --ctx-text-bold: var(--color-default-neutral-100);
   --ctx-background: var(--color-default-neutral-700);
   --ctx-gradient: var(--color-default-neutral-800);
-  --ctx-border: var(--color-default-neutral-700);
+  --ctx-border: var(--color-default-neutral-800);
+  --ctx-border-bold: var(--color-default-neutral-600);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-neutral-200);
-  --ctx-text-pressed: var(--color-default-neutral-200);
   --ctx-background-hover: var(--color-default-neutral-800);
-  --ctx-background-pressed: var(--color-default-neutral-900);
-  --ctx-gradient-hover: var(--color-default-neutral-900);
-  --ctx-gradient-pressed: var(--color-default-neutral-900);
-  --ctx-border-hover: var(--color-default-neutral-700);
-  --ctx-border-pressed: var(--color-default-neutral-700);
+  --ctx-border-hover: var(--color-default-neutral-800);
 }
 
 @utility ctx-gray-subtle {
@@ -1000,15 +1050,11 @@
   --ctx-background: var(--color-default-neutral-400);
   --ctx-gradient: var(--color-default-neutral-300);
   --ctx-border: var(--color-default-neutral-500);
+  --ctx-border-bold: var(--color-default-neutral-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-neutral-900);
-  --ctx-text-pressed: var(--color-default-neutral-900);
   --ctx-background-hover: var(--color-default-neutral-300);
-  --ctx-background-pressed: var(--color-default-neutral-200);
-  --ctx-gradient-hover: var(--color-default-neutral-200);
-  --ctx-gradient-pressed: var(--color-default-neutral-200);
   --ctx-border-hover: var(--color-default-neutral-500);
-  --ctx-border-pressed: var(--color-default-neutral-500);
 }
 
 @utility ctx-gray-subtler {
@@ -1016,16 +1062,12 @@
   --ctx-text-bold: var(--color-default-neutral-900);
   --ctx-background: var(--color-default-neutral-200);
   --ctx-gradient: var(--color-default-neutral-300);
-  --ctx-border: var(--color-default-neutral-400);
+  --ctx-border: var(--color-default-neutral-300);
+  --ctx-border-bold: var(--color-default-neutral-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-neutral-800);
-  --ctx-text-pressed: var(--color-default-neutral-800);
   --ctx-background-hover: var(--color-default-neutral-300);
-  --ctx-background-pressed: var(--color-default-neutral-400);
-  --ctx-gradient-hover: var(--color-default-neutral-400);
-  --ctx-gradient-pressed: var(--color-default-neutral-400);
-  --ctx-border-hover: var(--color-default-neutral-400);
-  --ctx-border-pressed: var(--color-default-neutral-400);
+  --ctx-border-hover: var(--color-default-neutral-300);
 }
 
 @utility ctx-gray-subtlest {
@@ -1033,16 +1075,12 @@
   --ctx-text-bold: var(--color-default-neutral-900);
   --ctx-background: var(--color-default-neutral-100);
   --ctx-gradient: var(--color-default-neutral-200);
-  --ctx-border: var(--color-default-neutral-300);
+  --ctx-border: var(--color-default-neutral-200);
+  --ctx-border-bold: var(--color-default-neutral-400);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-neutral-800);
-  --ctx-text-pressed: var(--color-default-neutral-800);
   --ctx-background-hover: var(--color-default-neutral-200);
-  --ctx-background-pressed: var(--color-default-neutral-300);
-  --ctx-gradient-hover: var(--color-default-neutral-300);
-  --ctx-gradient-pressed: var(--color-default-neutral-300);
-  --ctx-border-hover: var(--color-default-neutral-300);
-  --ctx-border-pressed: var(--color-default-neutral-300);
+  --ctx-border-hover: var(--color-default-neutral-200);
 }
 
 @utility ctx-green-bolder {
@@ -1050,16 +1088,12 @@
   --ctx-text-bold: var(--color-default-green-100);
   --ctx-background: var(--color-default-green-700);
   --ctx-gradient: var(--color-default-green-800);
-  --ctx-border: var(--color-default-green-700);
+  --ctx-border: var(--color-default-green-800);
+  --ctx-border-bold: var(--color-default-green-600);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-green-200);
-  --ctx-text-pressed: var(--color-default-green-200);
   --ctx-background-hover: var(--color-default-green-800);
-  --ctx-background-pressed: var(--color-default-green-900);
-  --ctx-gradient-hover: var(--color-default-green-900);
-  --ctx-gradient-pressed: var(--color-default-green-900);
-  --ctx-border-hover: var(--color-default-green-700);
-  --ctx-border-pressed: var(--color-default-green-700);
+  --ctx-border-hover: var(--color-default-green-800);
 }
 
 @utility ctx-green-subtle {
@@ -1068,15 +1102,11 @@
   --ctx-background: var(--color-default-green-400);
   --ctx-gradient: var(--color-default-green-300);
   --ctx-border: var(--color-default-green-500);
+  --ctx-border-bold: var(--color-default-green-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-green-900);
-  --ctx-text-pressed: var(--color-default-green-900);
   --ctx-background-hover: var(--color-default-green-300);
-  --ctx-background-pressed: var(--color-default-green-200);
-  --ctx-gradient-hover: var(--color-default-green-200);
-  --ctx-gradient-pressed: var(--color-default-green-200);
   --ctx-border-hover: var(--color-default-green-500);
-  --ctx-border-pressed: var(--color-default-green-500);
 }
 
 @utility ctx-green-subtler {
@@ -1084,16 +1114,12 @@
   --ctx-text-bold: var(--color-default-green-900);
   --ctx-background: var(--color-default-green-200);
   --ctx-gradient: var(--color-default-green-300);
-  --ctx-border: var(--color-default-green-400);
+  --ctx-border: var(--color-default-green-300);
+  --ctx-border-bold: var(--color-default-green-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-green-800);
-  --ctx-text-pressed: var(--color-default-green-800);
   --ctx-background-hover: var(--color-default-green-300);
-  --ctx-background-pressed: var(--color-default-green-400);
-  --ctx-gradient-hover: var(--color-default-green-400);
-  --ctx-gradient-pressed: var(--color-default-green-400);
-  --ctx-border-hover: var(--color-default-green-400);
-  --ctx-border-pressed: var(--color-default-green-400);
+  --ctx-border-hover: var(--color-default-green-300);
 }
 
 @utility ctx-green-subtlest {
@@ -1101,16 +1127,12 @@
   --ctx-text-bold: var(--color-default-green-900);
   --ctx-background: var(--color-default-green-100);
   --ctx-gradient: var(--color-default-green-200);
-  --ctx-border: var(--color-default-green-300);
+  --ctx-border: var(--color-default-green-200);
+  --ctx-border-bold: var(--color-default-green-400);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-green-800);
-  --ctx-text-pressed: var(--color-default-green-800);
   --ctx-background-hover: var(--color-default-green-200);
-  --ctx-background-pressed: var(--color-default-green-300);
-  --ctx-gradient-hover: var(--color-default-green-300);
-  --ctx-gradient-pressed: var(--color-default-green-300);
-  --ctx-border-hover: var(--color-default-green-300);
-  --ctx-border-pressed: var(--color-default-green-300);
+  --ctx-border-hover: var(--color-default-green-200);
 }
 
 @utility ctx-info-bolder {
@@ -1119,15 +1141,11 @@
   --ctx-background: var(--color-default-blue-700);
   --ctx-gradient: var(--color-default-blue-800);
   --ctx-border: var(--color-default-blue-700);
+  --ctx-border-bold: var(--color-default-blue-400);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-blue-200);
-  --ctx-text-pressed: var(--color-default-blue-200);
   --ctx-background-hover: var(--color-default-blue-800);
-  --ctx-background-pressed: var(--color-default-blue-900);
-  --ctx-gradient-hover: var(--color-default-blue-900);
-  --ctx-gradient-pressed: var(--color-default-blue-900);
   --ctx-border-hover: var(--color-default-blue-700);
-  --ctx-border-pressed: var(--color-default-blue-700);
 }
 
 @utility ctx-info-subtlest {
@@ -1136,15 +1154,11 @@
   --ctx-background: var(--color-default-blue-100);
   --ctx-gradient: var(--color-default-blue-200);
   --ctx-border: var(--color-default-blue-300);
+  --ctx-border-bold: var(--color-default-blue-800);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-blue-800);
-  --ctx-text-pressed: var(--color-default-blue-800);
   --ctx-background-hover: var(--color-default-blue-200);
-  --ctx-background-pressed: var(--color-default-blue-300);
-  --ctx-gradient-hover: var(--color-default-blue-300);
-  --ctx-gradient-pressed: var(--color-default-blue-300);
   --ctx-border-hover: var(--color-default-blue-300);
-  --ctx-border-pressed: var(--color-default-blue-300);
 }
 
 @utility ctx-magenta-bolder {
@@ -1152,16 +1166,12 @@
   --ctx-text-bold: var(--color-default-magenta-100);
   --ctx-background: var(--color-default-magenta-700);
   --ctx-gradient: var(--color-default-magenta-800);
-  --ctx-border: var(--color-default-magenta-700);
+  --ctx-border: var(--color-default-magenta-800);
+  --ctx-border-bold: var(--color-default-magenta-600);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-magenta-200);
-  --ctx-text-pressed: var(--color-default-magenta-200);
   --ctx-background-hover: var(--color-default-magenta-800);
-  --ctx-background-pressed: var(--color-default-magenta-900);
-  --ctx-gradient-hover: var(--color-default-magenta-900);
-  --ctx-gradient-pressed: var(--color-default-magenta-900);
-  --ctx-border-hover: var(--color-default-magenta-700);
-  --ctx-border-pressed: var(--color-default-magenta-700);
+  --ctx-border-hover: var(--color-default-magenta-800);
 }
 
 @utility ctx-magenta-subtle {
@@ -1170,15 +1180,11 @@
   --ctx-background: var(--color-default-magenta-400);
   --ctx-gradient: var(--color-default-magenta-300);
   --ctx-border: var(--color-default-magenta-500);
+  --ctx-border-bold: var(--color-default-magenta-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-magenta-900);
-  --ctx-text-pressed: var(--color-default-magenta-900);
   --ctx-background-hover: var(--color-default-magenta-300);
-  --ctx-background-pressed: var(--color-default-magenta-200);
-  --ctx-gradient-hover: var(--color-default-magenta-200);
-  --ctx-gradient-pressed: var(--color-default-magenta-200);
   --ctx-border-hover: var(--color-default-magenta-500);
-  --ctx-border-pressed: var(--color-default-magenta-500);
 }
 
 @utility ctx-magenta-subtler {
@@ -1186,16 +1192,12 @@
   --ctx-text-bold: var(--color-default-magenta-900);
   --ctx-background: var(--color-default-magenta-200);
   --ctx-gradient: var(--color-default-magenta-300);
-  --ctx-border: var(--color-default-magenta-400);
+  --ctx-border: var(--color-default-magenta-300);
+  --ctx-border-bold: var(--color-default-magenta-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-magenta-800);
-  --ctx-text-pressed: var(--color-default-magenta-800);
   --ctx-background-hover: var(--color-default-magenta-300);
-  --ctx-background-pressed: var(--color-default-magenta-400);
-  --ctx-gradient-hover: var(--color-default-magenta-400);
-  --ctx-gradient-pressed: var(--color-default-magenta-400);
-  --ctx-border-hover: var(--color-default-magenta-400);
-  --ctx-border-pressed: var(--color-default-magenta-400);
+  --ctx-border-hover: var(--color-default-magenta-300);
 }
 
 @utility ctx-magenta-subtlest {
@@ -1203,16 +1205,12 @@
   --ctx-text-bold: var(--color-default-magenta-900);
   --ctx-background: var(--color-default-magenta-100);
   --ctx-gradient: var(--color-default-magenta-200);
-  --ctx-border: var(--color-default-magenta-300);
+  --ctx-border: var(--color-default-magenta-200);
+  --ctx-border-bold: var(--color-default-magenta-400);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-magenta-800);
-  --ctx-text-pressed: var(--color-default-magenta-800);
   --ctx-background-hover: var(--color-default-magenta-200);
-  --ctx-background-pressed: var(--color-default-magenta-300);
-  --ctx-gradient-hover: var(--color-default-magenta-300);
-  --ctx-gradient-pressed: var(--color-default-magenta-300);
-  --ctx-border-hover: var(--color-default-magenta-300);
-  --ctx-border-pressed: var(--color-default-magenta-300);
+  --ctx-border-hover: var(--color-default-magenta-200);
 }
 
 @utility ctx-neutral-bold {
@@ -1221,15 +1219,11 @@
   --ctx-background: var(--color-default-neutral-900);
   --ctx-gradient: var(--color-default-neutral-800);
   --ctx-border: var(--color-default-neutral-600);
+  --ctx-border-bold: var(--color-default-neutral-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-neutral-300);
-  --ctx-text-pressed: var(--color-default-neutral-300);
   --ctx-background-hover: var(--color-default-neutral-800);
-  --ctx-background-pressed: var(--color-default-neutral-700);
-  --ctx-gradient-hover: var(--color-default-neutral-700);
-  --ctx-gradient-pressed: var(--color-default-neutral-700);
   --ctx-border-hover: var(--color-default-neutral-600);
-  --ctx-border-pressed: var(--color-default-neutral-600);
 }
 
 @utility ctx-neutral-bolder {
@@ -1238,15 +1232,11 @@
   --ctx-background: var(--color-default-neutral-1000);
   --ctx-gradient: var(--color-default-neutral-900);
   --ctx-border: var(--color-default-neutral-700);
+  --ctx-border-bold: var(--color-default-neutral-400);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-neutral-200);
-  --ctx-text-pressed: var(--color-default-neutral-200);
   --ctx-background-hover: var(--color-default-neutral-900);
-  --ctx-background-pressed: var(--color-default-neutral-800);
-  --ctx-gradient-hover: var(--color-default-neutral-800);
-  --ctx-gradient-pressed: var(--color-default-neutral-800);
   --ctx-border-hover: var(--color-default-neutral-700);
-  --ctx-border-pressed: var(--color-default-neutral-700);
 }
 
 @utility ctx-neutral-boldest {
@@ -1255,15 +1245,11 @@
   --ctx-background: var(--color-default-neutral-1100);
   --ctx-gradient: var(--color-default-neutral-1000);
   --ctx-border: var(--color-default-neutral-800);
+  --ctx-border-bold: var(--color-default-neutral-300);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-neutral-100);
-  --ctx-text-pressed: var(--color-default-neutral-100);
   --ctx-background-hover: var(--color-default-neutral-1000);
-  --ctx-background-pressed: var(--color-default-neutral-900);
-  --ctx-gradient-hover: var(--color-default-neutral-900);
-  --ctx-gradient-pressed: var(--color-default-neutral-900);
   --ctx-border-hover: var(--color-default-neutral-800);
-  --ctx-border-pressed: var(--color-default-neutral-800);
 }
 
 @utility ctx-neutral-subtle {
@@ -1272,15 +1258,11 @@
   --ctx-background: var(--color-default-neutral-200);
   --ctx-gradient: var(--color-default-neutral-300);
   --ctx-border: var(--color-default-neutral-500);
+  --ctx-border-bold: var(--color-default-neutral-600);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-neutral-800);
-  --ctx-text-pressed: var(--color-default-neutral-800);
   --ctx-background-hover: var(--color-default-neutral-300);
-  --ctx-background-pressed: var(--color-default-neutral-400);
-  --ctx-gradient-hover: var(--color-default-neutral-400);
-  --ctx-gradient-pressed: var(--color-default-neutral-400);
   --ctx-border-hover: var(--color-default-neutral-500);
-  --ctx-border-pressed: var(--color-default-neutral-500);
 }
 
 @utility ctx-neutral-subtler {
@@ -1289,15 +1271,11 @@
   --ctx-background: var(--color-default-neutral-100);
   --ctx-gradient: var(--color-default-neutral-200);
   --ctx-border: var(--color-default-neutral-400);
+  --ctx-border-bold: var(--color-default-neutral-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-neutral-900);
-  --ctx-text-pressed: var(--color-default-neutral-900);
   --ctx-background-hover: var(--color-default-neutral-200);
-  --ctx-background-pressed: var(--color-default-neutral-300);
-  --ctx-gradient-hover: var(--color-default-neutral-300);
-  --ctx-gradient-pressed: var(--color-default-neutral-300);
   --ctx-border-hover: var(--color-default-neutral-400);
-  --ctx-border-pressed: var(--color-default-neutral-400);
 }
 
 @utility ctx-neutral-subtlest {
@@ -1306,15 +1284,11 @@
   --ctx-background: var(--color-default-neutral-0);
   --ctx-gradient: var(--color-default-neutral-100);
   --ctx-border: var(--color-default-neutral-300);
+  --ctx-border-bold: var(--color-default-neutral-800);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-neutral-1000);
-  --ctx-text-pressed: var(--color-default-neutral-1000);
   --ctx-background-hover: var(--color-default-neutral-100);
-  --ctx-background-pressed: var(--color-default-neutral-200);
-  --ctx-gradient-hover: var(--color-default-neutral-200);
-  --ctx-gradient-pressed: var(--color-default-neutral-200);
   --ctx-border-hover: var(--color-default-neutral-300);
-  --ctx-border-pressed: var(--color-default-neutral-300);
 }
 
 @utility ctx-orange-bolder {
@@ -1322,16 +1296,12 @@
   --ctx-text-bold: var(--color-default-orange-100);
   --ctx-background: var(--color-default-orange-700);
   --ctx-gradient: var(--color-default-orange-800);
-  --ctx-border: var(--color-default-orange-700);
+  --ctx-border: var(--color-default-orange-800);
+  --ctx-border-bold: var(--color-default-orange-600);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-orange-200);
-  --ctx-text-pressed: var(--color-default-orange-200);
   --ctx-background-hover: var(--color-default-orange-800);
-  --ctx-background-pressed: var(--color-default-orange-900);
-  --ctx-gradient-hover: var(--color-default-orange-900);
-  --ctx-gradient-pressed: var(--color-default-orange-900);
-  --ctx-border-hover: var(--color-default-orange-700);
-  --ctx-border-pressed: var(--color-default-orange-700);
+  --ctx-border-hover: var(--color-default-orange-800);
 }
 
 @utility ctx-orange-subtle {
@@ -1340,15 +1310,11 @@
   --ctx-background: var(--color-default-orange-400);
   --ctx-gradient: var(--color-default-orange-300);
   --ctx-border: var(--color-default-orange-500);
+  --ctx-border-bold: var(--color-default-orange-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-orange-900);
-  --ctx-text-pressed: var(--color-default-orange-900);
   --ctx-background-hover: var(--color-default-orange-300);
-  --ctx-background-pressed: var(--color-default-orange-200);
-  --ctx-gradient-hover: var(--color-default-orange-200);
-  --ctx-gradient-pressed: var(--color-default-orange-200);
   --ctx-border-hover: var(--color-default-orange-500);
-  --ctx-border-pressed: var(--color-default-orange-500);
 }
 
 @utility ctx-orange-subtler {
@@ -1356,16 +1322,12 @@
   --ctx-text-bold: var(--color-default-orange-900);
   --ctx-background: var(--color-default-orange-200);
   --ctx-gradient: var(--color-default-orange-300);
-  --ctx-border: var(--color-default-orange-400);
+  --ctx-border: var(--color-default-orange-300);
+  --ctx-border-bold: var(--color-default-orange-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-orange-800);
-  --ctx-text-pressed: var(--color-default-orange-800);
   --ctx-background-hover: var(--color-default-orange-300);
-  --ctx-background-pressed: var(--color-default-orange-400);
-  --ctx-gradient-hover: var(--color-default-orange-400);
-  --ctx-gradient-pressed: var(--color-default-orange-400);
-  --ctx-border-hover: var(--color-default-orange-400);
-  --ctx-border-pressed: var(--color-default-orange-400);
+  --ctx-border-hover: var(--color-default-orange-300);
 }
 
 @utility ctx-orange-subtlest {
@@ -1373,16 +1335,12 @@
   --ctx-text-bold: var(--color-default-orange-900);
   --ctx-background: var(--color-default-orange-100);
   --ctx-gradient: var(--color-default-orange-200);
-  --ctx-border: var(--color-default-orange-300);
+  --ctx-border: var(--color-default-orange-200);
+  --ctx-border-bold: var(--color-default-orange-400);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-orange-800);
-  --ctx-text-pressed: var(--color-default-orange-800);
   --ctx-background-hover: var(--color-default-orange-200);
-  --ctx-background-pressed: var(--color-default-orange-300);
-  --ctx-gradient-hover: var(--color-default-orange-300);
-  --ctx-gradient-pressed: var(--color-default-orange-300);
-  --ctx-border-hover: var(--color-default-orange-300);
-  --ctx-border-pressed: var(--color-default-orange-300);
+  --ctx-border-hover: var(--color-default-orange-200);
 }
 
 @utility ctx-purple-bolder {
@@ -1390,16 +1348,12 @@
   --ctx-text-bold: var(--color-default-purple-100);
   --ctx-background: var(--color-default-purple-700);
   --ctx-gradient: var(--color-default-purple-800);
-  --ctx-border: var(--color-default-purple-700);
+  --ctx-border: var(--color-default-purple-800);
+  --ctx-border-bold: var(--color-default-purple-600);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-purple-200);
-  --ctx-text-pressed: var(--color-default-purple-200);
   --ctx-background-hover: var(--color-default-purple-800);
-  --ctx-background-pressed: var(--color-default-purple-900);
-  --ctx-gradient-hover: var(--color-default-purple-900);
-  --ctx-gradient-pressed: var(--color-default-purple-900);
-  --ctx-border-hover: var(--color-default-purple-700);
-  --ctx-border-pressed: var(--color-default-purple-700);
+  --ctx-border-hover: var(--color-default-purple-800);
 }
 
 @utility ctx-purple-subtle {
@@ -1408,15 +1362,11 @@
   --ctx-background: var(--color-default-purple-400);
   --ctx-gradient: var(--color-default-purple-300);
   --ctx-border: var(--color-default-purple-500);
+  --ctx-border-bold: var(--color-default-purple-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-purple-900);
-  --ctx-text-pressed: var(--color-default-purple-900);
   --ctx-background-hover: var(--color-default-purple-300);
-  --ctx-background-pressed: var(--color-default-purple-200);
-  --ctx-gradient-hover: var(--color-default-purple-200);
-  --ctx-gradient-pressed: var(--color-default-purple-200);
   --ctx-border-hover: var(--color-default-purple-500);
-  --ctx-border-pressed: var(--color-default-purple-500);
 }
 
 @utility ctx-purple-subtler {
@@ -1424,16 +1374,12 @@
   --ctx-text-bold: var(--color-default-purple-900);
   --ctx-background: var(--color-default-purple-200);
   --ctx-gradient: var(--color-default-purple-300);
-  --ctx-border: var(--color-default-purple-400);
+  --ctx-border: var(--color-default-purple-300);
+  --ctx-border-bold: var(--color-default-purple-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-purple-800);
-  --ctx-text-pressed: var(--color-default-purple-800);
   --ctx-background-hover: var(--color-default-purple-300);
-  --ctx-background-pressed: var(--color-default-purple-400);
-  --ctx-gradient-hover: var(--color-default-purple-400);
-  --ctx-gradient-pressed: var(--color-default-purple-400);
-  --ctx-border-hover: var(--color-default-purple-400);
-  --ctx-border-pressed: var(--color-default-purple-400);
+  --ctx-border-hover: var(--color-default-purple-300);
 }
 
 @utility ctx-purple-subtlest {
@@ -1441,16 +1387,12 @@
   --ctx-text-bold: var(--color-default-purple-900);
   --ctx-background: var(--color-default-purple-100);
   --ctx-gradient: var(--color-default-purple-200);
-  --ctx-border: var(--color-default-purple-300);
+  --ctx-border: var(--color-default-purple-200);
+  --ctx-border-bold: var(--color-default-purple-400);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-purple-800);
-  --ctx-text-pressed: var(--color-default-purple-800);
   --ctx-background-hover: var(--color-default-purple-200);
-  --ctx-background-pressed: var(--color-default-purple-300);
-  --ctx-gradient-hover: var(--color-default-purple-300);
-  --ctx-gradient-pressed: var(--color-default-purple-300);
-  --ctx-border-hover: var(--color-default-purple-300);
-  --ctx-border-pressed: var(--color-default-purple-300);
+  --ctx-border-hover: var(--color-default-purple-200);
 }
 
 @utility ctx-red-bolder {
@@ -1458,16 +1400,12 @@
   --ctx-text-bold: var(--color-default-red-100);
   --ctx-background: var(--color-default-red-700);
   --ctx-gradient: var(--color-default-red-800);
-  --ctx-border: var(--color-default-red-700);
+  --ctx-border: var(--color-default-red-800);
+  --ctx-border-bold: var(--color-default-red-600);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-red-200);
-  --ctx-text-pressed: var(--color-default-red-200);
   --ctx-background-hover: var(--color-default-red-800);
-  --ctx-background-pressed: var(--color-default-red-900);
-  --ctx-gradient-hover: var(--color-default-red-900);
-  --ctx-gradient-pressed: var(--color-default-red-900);
-  --ctx-border-hover: var(--color-default-red-700);
-  --ctx-border-pressed: var(--color-default-red-700);
+  --ctx-border-hover: var(--color-default-red-800);
 }
 
 @utility ctx-red-subtle {
@@ -1476,15 +1414,11 @@
   --ctx-background: var(--color-default-red-400);
   --ctx-gradient: var(--color-default-red-300);
   --ctx-border: var(--color-default-red-500);
+  --ctx-border-bold: var(--color-default-red-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-red-900);
-  --ctx-text-pressed: var(--color-default-red-900);
   --ctx-background-hover: var(--color-default-red-300);
-  --ctx-background-pressed: var(--color-default-red-200);
-  --ctx-gradient-hover: var(--color-default-red-200);
-  --ctx-gradient-pressed: var(--color-default-red-200);
   --ctx-border-hover: var(--color-default-red-500);
-  --ctx-border-pressed: var(--color-default-red-500);
 }
 
 @utility ctx-red-subtler {
@@ -1492,16 +1426,12 @@
   --ctx-text-bold: var(--color-default-red-900);
   --ctx-background: var(--color-default-red-200);
   --ctx-gradient: var(--color-default-red-300);
-  --ctx-border: var(--color-default-red-400);
+  --ctx-border: var(--color-default-red-300);
+  --ctx-border-bold: var(--color-default-red-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-red-800);
-  --ctx-text-pressed: var(--color-default-red-800);
   --ctx-background-hover: var(--color-default-red-300);
-  --ctx-background-pressed: var(--color-default-red-400);
-  --ctx-gradient-hover: var(--color-default-red-400);
-  --ctx-gradient-pressed: var(--color-default-red-400);
-  --ctx-border-hover: var(--color-default-red-400);
-  --ctx-border-pressed: var(--color-default-red-400);
+  --ctx-border-hover: var(--color-default-red-300);
 }
 
 @utility ctx-red-subtlest {
@@ -1509,16 +1439,12 @@
   --ctx-text-bold: var(--color-default-red-900);
   --ctx-background: var(--color-default-red-100);
   --ctx-gradient: var(--color-default-red-200);
-  --ctx-border: var(--color-default-red-300);
+  --ctx-border: var(--color-default-red-200);
+  --ctx-border-bold: var(--color-default-red-400);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-red-800);
-  --ctx-text-pressed: var(--color-default-red-800);
   --ctx-background-hover: var(--color-default-red-200);
-  --ctx-background-pressed: var(--color-default-red-300);
-  --ctx-gradient-hover: var(--color-default-red-300);
-  --ctx-gradient-pressed: var(--color-default-red-300);
-  --ctx-border-hover: var(--color-default-red-300);
-  --ctx-border-pressed: var(--color-default-red-300);
+  --ctx-border-hover: var(--color-default-red-200);
 }
 
 @utility ctx-success-bolder {
@@ -1527,15 +1453,11 @@
   --ctx-background: var(--color-default-green-700);
   --ctx-gradient: var(--color-default-green-800);
   --ctx-border: var(--color-default-green-700);
+  --ctx-border-bold: var(--color-default-green-400);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-green-200);
-  --ctx-text-pressed: var(--color-default-green-200);
   --ctx-background-hover: var(--color-default-green-800);
-  --ctx-background-pressed: var(--color-default-green-900);
-  --ctx-gradient-hover: var(--color-default-green-900);
-  --ctx-gradient-pressed: var(--color-default-green-900);
   --ctx-border-hover: var(--color-default-green-700);
-  --ctx-border-pressed: var(--color-default-green-700);
 }
 
 @utility ctx-success-subtlest {
@@ -1544,15 +1466,11 @@
   --ctx-background: var(--color-default-green-100);
   --ctx-gradient: var(--color-default-green-200);
   --ctx-border: var(--color-default-green-300);
+  --ctx-border-bold: var(--color-default-green-800);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-green-800);
-  --ctx-text-pressed: var(--color-default-green-800);
   --ctx-background-hover: var(--color-default-green-200);
-  --ctx-background-pressed: var(--color-default-green-300);
-  --ctx-gradient-hover: var(--color-default-green-300);
-  --ctx-gradient-pressed: var(--color-default-green-300);
   --ctx-border-hover: var(--color-default-green-300);
-  --ctx-border-pressed: var(--color-default-green-300);
 }
 
 @utility ctx-teal-bolder {
@@ -1560,16 +1478,12 @@
   --ctx-text-bold: var(--color-default-teal-100);
   --ctx-background: var(--color-default-teal-700);
   --ctx-gradient: var(--color-default-teal-800);
-  --ctx-border: var(--color-default-teal-700);
+  --ctx-border: var(--color-default-teal-800);
+  --ctx-border-bold: var(--color-default-teal-600);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-teal-200);
-  --ctx-text-pressed: var(--color-default-teal-200);
   --ctx-background-hover: var(--color-default-teal-800);
-  --ctx-background-pressed: var(--color-default-teal-900);
-  --ctx-gradient-hover: var(--color-default-teal-900);
-  --ctx-gradient-pressed: var(--color-default-teal-900);
-  --ctx-border-hover: var(--color-default-teal-700);
-  --ctx-border-pressed: var(--color-default-teal-700);
+  --ctx-border-hover: var(--color-default-teal-800);
 }
 
 @utility ctx-teal-subtle {
@@ -1578,15 +1492,11 @@
   --ctx-background: var(--color-default-teal-400);
   --ctx-gradient: var(--color-default-teal-300);
   --ctx-border: var(--color-default-teal-500);
+  --ctx-border-bold: var(--color-default-teal-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-teal-900);
-  --ctx-text-pressed: var(--color-default-teal-900);
   --ctx-background-hover: var(--color-default-teal-300);
-  --ctx-background-pressed: var(--color-default-teal-200);
-  --ctx-gradient-hover: var(--color-default-teal-200);
-  --ctx-gradient-pressed: var(--color-default-teal-200);
   --ctx-border-hover: var(--color-default-teal-500);
-  --ctx-border-pressed: var(--color-default-teal-500);
 }
 
 @utility ctx-teal-subtler {
@@ -1594,16 +1504,12 @@
   --ctx-text-bold: var(--color-default-teal-900);
   --ctx-background: var(--color-default-teal-200);
   --ctx-gradient: var(--color-default-teal-300);
-  --ctx-border: var(--color-default-teal-400);
+  --ctx-border: var(--color-default-teal-300);
+  --ctx-border-bold: var(--color-default-teal-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-teal-800);
-  --ctx-text-pressed: var(--color-default-teal-800);
   --ctx-background-hover: var(--color-default-teal-300);
-  --ctx-background-pressed: var(--color-default-teal-400);
-  --ctx-gradient-hover: var(--color-default-teal-400);
-  --ctx-gradient-pressed: var(--color-default-teal-400);
-  --ctx-border-hover: var(--color-default-teal-400);
-  --ctx-border-pressed: var(--color-default-teal-400);
+  --ctx-border-hover: var(--color-default-teal-300);
 }
 
 @utility ctx-teal-subtlest {
@@ -1611,16 +1517,12 @@
   --ctx-text-bold: var(--color-default-teal-900);
   --ctx-background: var(--color-default-teal-100);
   --ctx-gradient: var(--color-default-teal-200);
-  --ctx-border: var(--color-default-teal-300);
+  --ctx-border: var(--color-default-teal-200);
+  --ctx-border-bold: var(--color-default-teal-400);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-teal-800);
-  --ctx-text-pressed: var(--color-default-teal-800);
   --ctx-background-hover: var(--color-default-teal-200);
-  --ctx-background-pressed: var(--color-default-teal-300);
-  --ctx-gradient-hover: var(--color-default-teal-300);
-  --ctx-gradient-pressed: var(--color-default-teal-300);
-  --ctx-border-hover: var(--color-default-teal-300);
-  --ctx-border-pressed: var(--color-default-teal-300);
+  --ctx-border-hover: var(--color-default-teal-200);
 }
 
 @utility ctx-warning-bolder {
@@ -1629,15 +1531,11 @@
   --ctx-background: var(--color-default-yellow-700);
   --ctx-gradient: var(--color-default-yellow-800);
   --ctx-border: var(--color-default-yellow-700);
+  --ctx-border-bold: var(--color-default-yellow-400);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-yellow-200);
-  --ctx-text-pressed: var(--color-default-yellow-200);
   --ctx-background-hover: var(--color-default-yellow-800);
-  --ctx-background-pressed: var(--color-default-yellow-900);
-  --ctx-gradient-hover: var(--color-default-yellow-900);
-  --ctx-gradient-pressed: var(--color-default-yellow-900);
   --ctx-border-hover: var(--color-default-yellow-700);
-  --ctx-border-pressed: var(--color-default-yellow-700);
 }
 
 @utility ctx-warning-subtlest {
@@ -1646,15 +1544,11 @@
   --ctx-background: var(--color-default-yellow-100);
   --ctx-gradient: var(--color-default-yellow-200);
   --ctx-border: var(--color-default-yellow-300);
+  --ctx-border-bold: var(--color-default-yellow-800);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-yellow-800);
-  --ctx-text-pressed: var(--color-default-yellow-800);
   --ctx-background-hover: var(--color-default-yellow-200);
-  --ctx-background-pressed: var(--color-default-yellow-300);
-  --ctx-gradient-hover: var(--color-default-yellow-300);
-  --ctx-gradient-pressed: var(--color-default-yellow-300);
   --ctx-border-hover: var(--color-default-yellow-300);
-  --ctx-border-pressed: var(--color-default-yellow-300);
 }
 
 @utility ctx-yellow-bolder {
@@ -1662,16 +1556,12 @@
   --ctx-text-bold: var(--color-default-yellow-100);
   --ctx-background: var(--color-default-yellow-700);
   --ctx-gradient: var(--color-default-yellow-800);
-  --ctx-border: var(--color-default-yellow-700);
+  --ctx-border: var(--color-default-yellow-800);
+  --ctx-border-bold: var(--color-default-yellow-600);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-yellow-200);
-  --ctx-text-pressed: var(--color-default-yellow-200);
   --ctx-background-hover: var(--color-default-yellow-800);
-  --ctx-background-pressed: var(--color-default-yellow-900);
-  --ctx-gradient-hover: var(--color-default-yellow-900);
-  --ctx-gradient-pressed: var(--color-default-yellow-900);
-  --ctx-border-hover: var(--color-default-yellow-700);
-  --ctx-border-pressed: var(--color-default-yellow-700);
+  --ctx-border-hover: var(--color-default-yellow-800);
 }
 
 @utility ctx-yellow-subtle {
@@ -1680,15 +1570,11 @@
   --ctx-background: var(--color-default-yellow-400);
   --ctx-gradient: var(--color-default-yellow-300);
   --ctx-border: var(--color-default-yellow-500);
+  --ctx-border-bold: var(--color-default-yellow-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-yellow-900);
-  --ctx-text-pressed: var(--color-default-yellow-900);
   --ctx-background-hover: var(--color-default-yellow-300);
-  --ctx-background-pressed: var(--color-default-yellow-200);
-  --ctx-gradient-hover: var(--color-default-yellow-200);
-  --ctx-gradient-pressed: var(--color-default-yellow-200);
   --ctx-border-hover: var(--color-default-yellow-500);
-  --ctx-border-pressed: var(--color-default-yellow-500);
 }
 
 @utility ctx-yellow-subtler {
@@ -1696,16 +1582,12 @@
   --ctx-text-bold: var(--color-default-yellow-900);
   --ctx-background: var(--color-default-yellow-200);
   --ctx-gradient: var(--color-default-yellow-300);
-  --ctx-border: var(--color-default-yellow-400);
+  --ctx-border: var(--color-default-yellow-300);
+  --ctx-border-bold: var(--color-default-yellow-500);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-yellow-800);
-  --ctx-text-pressed: var(--color-default-yellow-800);
   --ctx-background-hover: var(--color-default-yellow-300);
-  --ctx-background-pressed: var(--color-default-yellow-400);
-  --ctx-gradient-hover: var(--color-default-yellow-400);
-  --ctx-gradient-pressed: var(--color-default-yellow-400);
-  --ctx-border-hover: var(--color-default-yellow-400);
-  --ctx-border-pressed: var(--color-default-yellow-400);
+  --ctx-border-hover: var(--color-default-yellow-300);
 }
 
 @utility ctx-yellow-subtlest {
@@ -1713,16 +1595,12 @@
   --ctx-text-bold: var(--color-default-yellow-900);
   --ctx-background: var(--color-default-yellow-100);
   --ctx-gradient: var(--color-default-yellow-200);
-  --ctx-border: var(--color-default-yellow-300);
+  --ctx-border: var(--color-default-yellow-200);
+  --ctx-border-bold: var(--color-default-yellow-400);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-yellow-800);
-  --ctx-text-pressed: var(--color-default-yellow-800);
   --ctx-background-hover: var(--color-default-yellow-200);
-  --ctx-background-pressed: var(--color-default-yellow-300);
-  --ctx-gradient-hover: var(--color-default-yellow-300);
-  --ctx-gradient-pressed: var(--color-default-yellow-300);
-  --ctx-border-hover: var(--color-default-yellow-300);
-  --ctx-border-pressed: var(--color-default-yellow-300);
+  --ctx-border-hover: var(--color-default-yellow-200);
 }
 
 
@@ -1826,27 +1704,12 @@
 
 
 
-/* === ./styles/fonts.css === */
-@utility heading-xs { font: var(--heading-xs); }
-@utility heading-sm { font: var(--heading-sm); }
-@utility heading-md { font: var(--heading-md); }
-@utility heading-lg { font: var(--heading-lg); }
-@utility heading-xl { font: var(--heading-xl); }
-@utility heading-2xl { font: var(--heading-2xl); }
-@utility heading-3xl { font: var(--heading-3xl); }
-@utility heading-4xl { font: var(--heading-4xl); }
-@utility heading-5xl { font: var(--heading-5xl); }
-@utility body-sm { font: var(--body-sm); }
-@utility body-md { font: var(--body-md); }
-@utility body-lg { font: var(--body-lg); }
-
-
-
 /* === ./styles/component-overrides.css === */
 /** Custom styles to fix primevue components that are not custom or wrapped. */
 
 :root {
-	--p-toast-width: min(85vw, 400px);
+	--p-toast-width: min(85vw, calc(var(--spacing) * 100));
+	--p-tooltip-max-width: min(85vw, calc(var(--spacing) * 100));
 }
 
 /**
@@ -1947,6 +1810,156 @@
 	font-size: var(--text-md);
 }
 
+/* primevue-overrides.css - CSS-level component overrides */
+@layer custom {
+	.p-accordionheader {
+		gap: var(--p-accordion-header-gap);
+	}
+
+	.p-autocomplete-input-multiple {
+		min-height: var(--p-autocomplete-input-multiple-min-height);
+		gap: var(--p-autocomplete-input-multiple-gap);
+	}
+
+	.p-badge-circle {
+		border-radius: var(--p-badge-circle-border-radius);
+	}
+
+	.p-button {
+		min-height: var(--p-button-min-height);
+	}
+
+	.p-button-sm {
+		min-height: var(--p-button-sm-min-height);
+	}
+
+	.p-button-lg {
+		min-height: var(--p-button-lg-min-height);
+	}
+
+	.p-button.p-button-icon-only {
+		min-width: var(--p-button-icon-only-width);
+	}
+
+	.p-button-sm.p-button-icon-only {
+		min-width: var(--p-button-sm-icon-only-width);
+	}
+
+	.p-button-lg.p-button-icon-only {
+		min-width: var(--p-button-lg-icon-only-width);
+	}
+
+	.p-divider {
+		gap: var(--p-divider-content-gap);
+	}
+
+	.p-inputgroupaddon {
+		min-height: var(--p-inputgroup-addon-min-height);
+	}
+
+	.p-inputtext {
+		min-height: var(--p-inputtext-min-height);
+	}
+
+	.p-inputtext-sm {
+		min-height: var(--p-inputtext-sm-min-height);
+	}
+
+	.p-inputtext-lg {
+		min-height: var(--p-inputtext-lg-min-height);
+	}
+
+	.p-message-text {
+		line-height: 1;
+		flex: 1 1 0;
+	}
+
+	.p-multiselect {
+		min-height: var(--p-multiselect-min-height);
+	}
+
+	.p-multiselect-sm {
+		min-height: var(--p-multiselect-sm-min-height);
+	}
+
+	.p-multiselect-lg {
+		min-height: var(--p-multiselect-lg-min-height);
+	}
+
+	.p-multiselect-label-container {
+		display: flex;
+		align-items: center;
+	}
+
+	.p-radiobutton {
+		gap: var(--p-radiobutton-gap);
+		border-radius: var(--p-radiobutton-border-radius);
+	}
+
+	.p-radiobutton-icon {
+		border-radius: var(--p-radiobutton-icon-border-radius);
+	}
+
+	.p-radiobutton-icon-sm {
+		border-radius: var(--p-radiobutton-icon-sm-border-radius);
+	}
+
+	.p-radiobutton-icon-lg {
+		border-radius: var(--p-radiobutton-icon-lg-border-radius);
+	}
+
+	.p-select {
+		min-height: var(--p-select-min-height);
+	}
+
+	.p-select-sm {
+		min-height: var(--p-select-sm-min-height);
+	}
+
+	.p-select-lg {
+		min-height: var(--p-select-lg-min-height);
+	}
+
+	.p-select-label {
+		display: flex;
+		align-items: center;
+	}
+
+	.p-select-option {
+		gap: var(--p-select-option-gap);
+	}
+
+	.p-textarea {
+		min-height: var(--p-textarea-min-height);
+	}
+
+	.p-togglebutton {
+		min-height: var(--p-togglebutton-min-height);
+	}
+
+	.p-togglebutton .p-togglebutton-sm {
+		min-height: var(--p-togglebutton-sm-min-height);
+		border-radius: var(--p-togglebutton-sm-border-radius);
+	}
+
+	.p-togglebutton-lg {
+		min-height: var(--p-togglebutton-lg-min-height);
+	}
+
+	.p-togglebutton .p-togglebutton-content {
+		min-height: var(--p-togglebutton-content-min-height);
+	}
+
+	.p-togglebutton-sm .p-togglebutton-content {
+		min-height: var(--p-togglebutton-content-sm-min-height);
+		border-radius: var(--p-togglebutton-content-sm-border-radius);
+	}
+
+	.p-togglebutton-lg .p-togglebutton-content {
+		min-height: var(--p-togglebutton-content-lg-min-height);
+	}
+}
+
 
 
 
@@ -1962,29 +1975,27 @@
 	}
 
 	.bcc-app-nav-item {
-		@apply ctx-gray-subtlest text-ctx relative flex h-12 flex-1 flex-col items-center justify-center gap-1 transition-colors focus:ring-0 focus:outline-none;
+		@apply relative flex h-12 flex-1 flex-col items-center justify-center gap-1 transition-colors focus:ring-0 focus:outline-none;
 	}
 
 	.bcc-nav-item-icon {
-		@apply size-6 opacity-50;
+		@apply size-6 icon-subtlest;
 	}
 
 	.bcc-nav-item-badge {
-		@apply absolute top-0 right-1 opacity-75;
+		@apply absolute top-0 right-1;
 	}
 
 	.bcc-nav-item-title {
-		@apply text-heading-xs text-center opacity-50;
+		@apply heading-xs text-center text-subtlest opacity-75;
 	}
 
-	.bcc-app-nav-item--active {
-		@apply text-selected;
+	.bcc-app-nav-item--active .bcc-nav-item-title {
+		@apply text-selected opacity-100;
 	}
 
-	.bcc-app-nav-item--active .bcc-nav-item-icon,
-	.bcc-app-nav-item--active .bcc-nav-item-badge,
-	.bcc-app-nav-item--active .bcc-nav-item-title {
-		@apply opacity-100;
+	.bcc-app-nav-item--active .bcc-nav-item-icon {
+		@apply text-selected;
 	}
 }
 
@@ -1997,20 +2008,23 @@
 
 		@apply bg-ctx text-ctx;
 	}
+	.bcc-badge span:empty {
+		display: none;
+	}
 	.bcc-badge.gradient {
 		@apply ctx-gradient;
 	}
 	.bcc-badge.sm {
-		@apply text-heading-xs h-4 w-4;
+		@apply heading-xs h-4 w-4;
 	}
 	.bcc-badge.md {
-		@apply text-heading-sm h-5 w-5;
+		@apply heading-sm h-5 w-5;
 	}
 	.bcc-badge.lg {
-		@apply text-heading-md h-6 w-6;
+		@apply heading-md h-6 w-6;
 	}
 	.bcc-badge.xl {
-		@apply text-heading-md h-8 w-8;
+		@apply heading-md h-8 w-8;
 	}
 
 	.bcc-badge .bcc-badge-icon {
@@ -2058,163 +2072,176 @@
 
 /* from ./BccCapacityIndicator/BccCapacityIndicator.css */
 @layer components {
-    .bcc-capacity-indicator {
-        @apply text-base;
-    }
+	.bcc-capacity-indicator {
+		@apply text-base;
+	}
 
-    .bcc-capacity-indicator.xs {
-        @apply text-xs;
-    }
+	.bcc-capacity-indicator.xs {
+		@apply text-xs;
+	}
 
-    .bcc-capacity-indicator.sm {
-        @apply text-sm;
-    }
+	.bcc-capacity-indicator.sm {
+		@apply text-sm;
+	}
 
-    .bcc-capacity-indicator.lg {
-        @apply text-xl;
-    }
+	.bcc-capacity-indicator.lg {
+		@apply text-xl;
+	}
 
-    .bcc-capacity-indicator {
-        --bcc-capacity-indicator-background: transparent;
-        --bcc-capacity-indicator-text: var(--ctx-text);
-        --bcc-capacity-indicator-circle: var(--ctx-background-pressed);
-        --bcc-capacity-indicator-circle-used: var(--ctx-border);
-        background: var(--bcc-capacity-indicator-background);
-        @apply ctx-gray-subtlest;
-    }
+	.bcc-capacity-indicator {
+		--bcc-capacity-indicator-background: transparent;
+		--bcc-capacity-indicator-text: var(--ctx-text);
+		--bcc-capacity-indicator-circle: var(--ctx-border);
+		--bcc-capacity-indicator-circle-used: var(--ctx-border-bold);
+		background: var(--bcc-capacity-indicator-background);
+		@apply ctx-gray-subtler;
+	}
 
-    .bcc-capacity-indicator.colored {
-        --bcc-capacity-indicator-background: var(--ctx-background);
-        @apply ctx-blue-subtlest;
-    }
+	.bcc-capacity-indicator.colored {
+		--bcc-capacity-indicator-background: var(--ctx-background);
+		@apply ctx-blue-subtlest;
+	}
 
-    .bcc-capacity-indicator .text {
-        color: var(--bcc-capacity-indicator-text);
-    }
-    .bcc-capacity-indicator .circle {
-        stroke: var(--bcc-capacity-indicator-circle);
-    }
-    .bcc-capacity-indicator .circle-used {
-        stroke: var(--bcc-capacity-indicator-circle-used);
-    }
+	.bcc-capacity-indicator .text {
+		color: var(--bcc-capacity-indicator-text);
+	}
+	.bcc-capacity-indicator .circle {
+		stroke: var(--bcc-capacity-indicator-circle);
+	}
+	.bcc-capacity-indicator .circle-used {
+		stroke: var(--bcc-capacity-indicator-circle-used);
+	}
 
-    .bcc-capacity-indicator.is-warning {
-        @apply ctx-yellow-subtlest;
-        --bcc-capacity-indicator-circle: var(--ctx-background);
-    }
+	.bcc-capacity-indicator.is-warning {
+		@apply ctx-yellow-subtlest;
+	}
 
-    .bcc-capacity-indicator.is-full {
-        @apply ctx-red-subtlest;
-    }
+	.bcc-capacity-indicator.is-full {
+		@apply ctx-red-subtlest;
+		--bcc-capacity-indicator-background: var(--ctx-background);
+	}
 }
 
 
+
 /* from ./BccDialKnob/BccDialKnob.css */
 @layer components {
-    .bcc-knob {
-        @apply relative mx-auto inline-flex touch-none select-none items-center justify-center p-2;
-
-        --bcc-knob-arc-bg: var(--color-background-neutral-default);
-        --bcc-knob-head: var(--color-background-brand-bolder-default);
-        --bcc-knob-tail: var(--color-background-brand-subtle-default);
-
-        --bcc-knob-left-head: var(--color-background-accent-red-bolder-default);
-        --bcc-knob-left-tail: var(--color-background-accent-red-subtle-default);
-        
-        --bcc-knob-right-head: var(--color-background-accent-green-bolder-default);
-        --bcc-knob-right-tail: var(--color-background-accent-green-subtle-default);
-    }
+	.bcc-knob {
+		@apply relative mx-auto inline-flex touch-none items-center justify-center p-2 select-none;
 
-    .bcc-knob-label {
-        @apply pointer-events-none absolute inset-0 flex select-none flex-col items-center justify-center;
-    }
+		--bcc-knob-arc-bg: var(--color-background-accent-gray-default);
+		--bcc-knob-head: var(--color-background-brand-bolder-default);
+		--bcc-knob-tail: var(--color-background-brand-subtle-default);
 
-    .bcc-knob-top-left {
-        @apply absolute top-0 left-0 text-left;
-    }
+		--bcc-knob-left-head: var(--color-background-accent-red-bolder-default);
+		--bcc-knob-left-tail: var(--color-background-accent-red-subtle-default);
 
-    .bcc-knob-top-right {
-        @apply absolute top-0 right-0 text-right;
-    }
+		--bcc-knob-right-head: var(--color-background-accent-green-bolder-default);
+		--bcc-knob-right-tail: var(--color-background-accent-green-subtle-default);
+	}
+
+	.bcc-knob-label {
+		@apply pointer-events-none absolute inset-0 flex flex-col items-center justify-center select-none;
+	}
+
+	.bcc-knob-top-left {
+		@apply absolute top-0 left-0 text-left;
+	}
+
+	.bcc-knob-top-right {
+		@apply absolute top-0 right-0 text-right;
+	}
 }
 
 
 
 /* from ./BccFrame/BccFrame.css */
 @layer components {
-    .bcc-frame {
-        @apply ctx ctx-default w-full;
-    }
+	.bcc-frame {
+		@apply ctx ctx-default w-full border border-transparent;
+	}
 
-    .bcc-frame.bcc-frame--shadow {
-        @apply shadow shadow-ctx;
-    }
+	.bcc-frame.bcc-frame--shadow {
+		@apply shadow-ctx shadow;
+	}
 
-    .bcc-frame--raised {
-        --ctx-background: var(--color-elevation-surface-raised-default);
-    }
-    .bcc-frame--rounded {
-        @apply rounded-md;
-    }
-    .bcc-frame--raised.bcc-frame--shadow {
-        @apply shadow-raised;
-    }
+	.bcc-frame--raised {
+		--ctx-background: var(--color-elevation-surface-raised-default);
+	}
+	.bcc-frame--rounded {
+		@apply rounded-md;
+	}
+	.bcc-frame--raised.bcc-frame--shadow {
+		@apply shadow-raised dark:border-default;
+	}
 
-    .bcc-frame--overlay {
-        --ctx-background: var(--color-elevation-surface-overlay-default);
-    }
-    .bcc-frame--overlay.bcc-frame--shadow {
-        @apply shadow-overlay;
-    }
+	.bcc-frame--overlay {
+		--ctx-background: var(--color-elevation-surface-overlay-default);
+		@apply border;
+	}
+	.bcc-frame--overlay.bcc-frame--shadow {
+		@apply shadow-overlay dark:border-default;
+	}
 
-    .bcc-frame--sunken {
-        --ctx-background: var(--color-elevation-surface-sunken-default);
-    }
-    .bcc-frame--sunken.bcc-frame--shadow {
-        @apply shadow-inner;
-    }
+	.bcc-frame--sunken {
+		--ctx-background: var(--color-elevation-surface-sunken-default);
+		@apply border;
+	}
+	.bcc-frame--sunken.bcc-frame--shadow {
+		@apply dark:border-default shadow-inner;
+	}
 }
 
 
+
 /* from ./BccGraphic/BccGraphic.css */
 @layer components {
-  .bcc-graphic .corner,
-  .bcc-graphic .center-slot {
-    @apply absolute z-10;
-  }
-  .bcc-graphic .corner.top-left {
-    @apply left-4 top-4;
-  }
-  .bcc-graphic .corner.top-right {
-    @apply right-4 top-4;
-  }
-  .bcc-graphic .corner.bottom-right {
-    @apply bottom-4 right-4;
-  }
-  .bcc-graphic .corner.bottom-left {
-    @apply bottom-4 left-4;
-  }
-  .bcc-graphic .center-slot {
-    @apply inset-1/4 h-1/2 w-1/2 flex items-center justify-center;
-  }
+	.bcc-graphic .corner,
+	.bcc-graphic .center-slot {
+		@apply absolute z-10;
+	}
+	.bcc-graphic .corner.top-left {
+		@apply top-4 left-4;
+	}
+	.bcc-graphic .corner.top-right {
+		@apply top-4 right-4;
+	}
+	.bcc-graphic .corner.bottom-right {
+		@apply right-4 bottom-4;
+	}
+	.bcc-graphic .corner.bottom-left {
+		@apply bottom-4 left-4;
+	}
+	.bcc-graphic .center-slot {
+		@apply inset-1/4 flex h-1/2 w-1/2 items-center justify-center;
+	}
 
-  .bcc-graphic {
-    @apply relative flex max-h-full w-full bg-linear-to-tr from-background-brand-bolder-default to-background-brand-subtle-default;
-  }
+	.bcc-graphic {
+		@apply from-background-brand-bolder-default to-background-brand-subtle-default relative flex max-h-full w-full bg-linear-to-tr;
+	}
 
-  .bcc-graphic-banner {
-    @apply absolute inset-0 h-full w-full object-cover object-center;
-  }
-  .bcc-graphic-banner--loading {
-    @apply animate-pulse bg-linear-to-tr from-background-brand-bolder-default to-background-brand-subtle-default;
-  }
+	.bcc-graphic-banner {
+		@apply absolute inset-0 h-full w-full object-cover object-center;
+	}
+	.bcc-graphic-banner--loading {
+		@apply from-background-brand-bolder-default to-background-brand-subtle-default animate-pulse bg-linear-to-tr;
+	}
 
-  .bcc-graphic-logo {
-    @apply absolute inset-1/4 h-1/2 w-1/2 object-contain object-center;
-  }
-  .bcc-graphic-logo--loading {
-    @apply animate-pulse bg-black opacity-10 blur-sm;
-  }
+	.bcc-graphic-logo {
+		@apply absolute inset-1/4 h-1/2 w-1/2 object-contain object-center;
+	}
+	.bcc-graphic-logo--loading {
+		@apply animate-pulse bg-black opacity-10 blur-sm;
+	}
+
+	.bcc-graphic.bcc-gb-grayscale .bcc-graphic-banner,
+	.bcc-graphic.bcc-gb-grayscale .bcc-graphic-logo {
+		@apply brightness-75 grayscale;
+	}
+	.bcc-graphic.bcc-gb-highlight .bcc-graphic-banner,
+	.bcc-graphic.bcc-gb-highlight .bcc-graphic-logo {
+		@apply brightness-150;
+	}
 }
 
 
@@ -2279,60 +2306,60 @@
 
 /* from ./BccNpsScore/BccNpsScore.css */
 @layer components {
-  .bcc-nps-score {
-    @apply min-w-[280px] p-4 text-body-sm flex flex-col gap-y-2 select-none;
-  }
+	.bcc-nps-score {
+		@apply body-sm flex min-w-70 flex-col gap-y-2 p-4 select-none;
+	}
 
-  .bcc-nps-score--heading {
-    @apply flex items-center justify-between;
-  }
+	.bcc-nps-score--heading {
+		@apply flex items-center justify-between;
+	}
 
-  .bcc-nps-score--label {
-    @apply flex-1 truncate;
-  }
+	.bcc-nps-score--label {
+		@apply flex-1 truncate;
+	}
 
-  .bcc-nps-score--bar {
-    @apply flex justify-evenly rounded-xl text-white pointer-events-none;
-    @apply bg-linear-to-r from-red-600 via-yellow-400 via-75% to-green-400;
-  }
+	.bcc-nps-score--bar {
+		@apply pointer-events-none flex justify-evenly rounded-xl text-white;
+		@apply bg-linear-to-r from-red-600 via-yellow-400 via-75% to-green-400;
+	}
 
-  .bcc-nps-score--bar.reverse {
-    @apply bg-linear-to-l;
-  }
+	.bcc-nps-score--bar.reverse {
+		@apply bg-linear-to-l;
+	}
 
-  .bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
-    @apply bg-ctx ctx-gray-subtlest text-disabled;
-  }
+	.bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
+		@apply bg-ctx ctx-gray-subtlest text-disabled;
+	}
 
-  .bcc-nps-score--number {
-    @apply border-border-inverse;
-    @apply flex h-8 flex-1 items-center justify-center border-r-2 font-bold text-sm leading-none;
-    @apply pointer-events-auto cursor-pointer transition-all duration-200 hover:bg-transparent;
-  }
+	.bcc-nps-score--number {
+		@apply border-inverse;
+		@apply flex h-8 flex-1 items-center justify-center border-r-2 text-sm leading-none font-bold;
+		@apply pointer-events-auto cursor-pointer transition-all duration-200 hover:bg-transparent;
+	}
 
-  .bcc-nps-score--number:disabled {
-    @apply cursor-not-allowed;
-  }
+	.bcc-nps-score--number:disabled {
+		@apply cursor-not-allowed;
+	}
 
-  .bcc-nps-score--number.active {
-    @apply pointer-events-none;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-  }
+	.bcc-nps-score--number.active {
+		@apply pointer-events-none;
+		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+	}
 
-  .bcc-nps-score--number:has(~ .bcc-nps-score--number.active) {
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-  }
+	.bcc-nps-score--number:has(~ .bcc-nps-score--number.active) {
+		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+	}
 
-  .bcc-nps-score--number.inactive {
-    @apply bg-ctx text-ctx ctx-gray-subtler;
-  }
+	.bcc-nps-score--number.inactive {
+		@apply bg-ctx text-ctx ctx-gray-subtler;
+	}
 
-  .bcc-nps-score--number:first-child {
-    @apply rounded-l-xl pl-0.5;
-  }
-  .bcc-nps-score--number:last-child{
-    @apply rounded-r-xl border-r-0 pr-0.5;
-  }
+	.bcc-nps-score--number:first-child {
+		@apply rounded-l-xl pl-0.5;
+	}
+	.bcc-nps-score--number:last-child {
+		@apply rounded-r-xl border-r-0 pr-0.5;
+	}
 }
 
 
@@ -2432,27 +2459,27 @@
 
 
 /* from ./BccTag/BccTag.css */
-
 @layer components {
 	.bcc-tag.bcc-badge {
 		@apply w-auto;
 	}
 	.bcc-tag.bcc-badge.md {
-		@apply font-regular h-6;
+		@apply body-md h-6;
 	}
 	.bcc-tag.bcc-badge.sm {
-		@apply font-regular h-5;
+		@apply body-sm h-5;
 	}
 	.bcc-tag.bcc-badge.lg {
-		@apply font-regular h-8;
+		@apply body-md h-8;
 	}
 	.bcc-tag.bcc-badge.xl {
-		@apply font-regular h-10;
+		@apply body-lg h-10;
 	}
 }
 
 
 
+
 /* === ./components/wrapped/styles.css === */
 
 /* from ./BccAvatar/BccAvatar.css */
@@ -2546,6 +2573,9 @@
     .bcc-tabs-fluid.p-tabs {
         width: 100%;
     }
+    .p-tabs .p-tab {
+        @apply heading-sm;
+    }
 }
 
 
@@ -2595,3 +2625,12 @@ strong,
 	cursor: not-allowed;
 	pointer-events: none;
 }
+
+
+/* SFC <style> blocks extracted all .vue components */
+@import './sfc-styles.css';
+
+/* Library utility classes, compiled from the library's own components.
+   Contains only the utility class rules used inside the library — no preflight,
+   no @theme variables, no design tokens, since theme.css already provides those. */
+@import './library-utilities.css';