@machinemetrics/mm-react-components 0.1.1-1 → 0.2.3-0

package/src/themes/carbide.css

@@ -0,0 +1,1257 @@
+.carbide {
+  /* =============================
+   TYPOGRAPHY
+============================= */
+
+  /* Core Fonts */
+  --font-sans:
+    'Noto Sans', Inter, ui-sans-serif, system-ui, -apple-system,
+    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono:
+    'Inconsolata', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+
+  /* Font Weights */
+  --font-weight-bold: 600;
+
+  /* =============================
+   COLORS
+============================= */
+
+  /* Brand */
+  --brand-green: #15a500;
+  --brand-grey: #444444;
+
+  /* Grey */
+  --grey-00: #ffffff;
+  --grey-50: #fcfdfe;
+  --grey-75: #f9fbfd;
+  --grey-100: #f7fafc;
+  --grey-150: #f2f6fa;
+  --grey-200: #edf2f7;
+  --grey-300: #e2e8f0;
+  --grey-350: #d8dfe8;
+  --grey-400: #cbd5e0;
+  --grey-500: #a0aec0;
+  --grey-600: #718096;
+  --grey-700: #4a5568;
+  --grey-750: #3c4658;
+  --grey-800: #2d3748;
+  --grey-850: #242c3a;
+  --grey-900: #1a202c;
+  --grey-950: #11131a;
+  --grey-1000: #000000;
+
+  /* Red */
+  --red-100: #fff5f5;
+  --red-200: #fed7d7;
+  --red-300: #feb2b2;
+  --red-400: #fc8181;
+  --red-500: #f56565;
+  --red-600: #e53e3e;
+  --red-700: #c53030;
+  --red-800: #9b2c2c;
+  --red-900: #742a2a;
+
+  /* Orange */
+  --orange-100: #fffaf0;
+  --orange-200: #feebc8;
+  --orange-300: #fbd38d;
+  --orange-400: #f6ad55;
+  --orange-500: #ed8936;
+  --orange-600: #dd6b20;
+  --orange-700: #c05621;
+  --orange-800: #9c4221;
+  --orange-900: #7b341e;
+
+  /* Yellow */
+  --yellow-50: #fffff7;
+  --yellow-100: #fffff0;
+  --yellow-200: #fefcbf;
+  --yellow-300: #faf089;
+  --yellow-400: #f6e05e;
+  --yellow-500: #ecc94b;
+  --yellow-600: #d69e2e;
+  --yellow-700: #b7791f;
+  --yellow-800: #975a16;
+  --yellow-900: #744210;
+
+  /* Green */
+  --green-50: #f7fff9;
+  --green-100: #f0fff4;
+  --green-200: #c6f6d5;
+  --green-300: #9ae6b4;
+  --green-400: #68d391;
+  --green-500: #48bb78;
+  --green-600: #38a169;
+  --green-700: #2f855a;
+  --green-800: #276749;
+  --green-900: #22543d;
+
+  /* Teal */
+  --teal-50: #f7fffd;
+  --teal-75: #eefffc;
+  --teal-100: #e6fffa;
+  --teal-200: #b2f5ea;
+  --teal-300: #81e6d9;
+  --teal-400: #4fd1c5;
+  --teal-500: #38b2ac;
+  --teal-600: #319795;
+  --teal-700: #2c7a7b;
+  --teal-800: #285e61;
+  --teal-900: #234e52;
+
+  /* Blue */
+  --blue-100: #ebf8ff;
+  --blue-200: #bee3f8;
+  --blue-300: #90cdf4;
+  --blue-400: #63b3ed;
+  --blue-500: #4299e1;
+  --blue-600: #3182ce;
+  --blue-700: #2b6cb0;
+  --blue-800: #2c5282;
+  --blue-900: #2a4365;
+
+  /* Indigo */
+  --indigo-50: #f5faff;
+  --indigo-100: #ebf4ff;
+  --indigo-150: #d7e7ff;
+  --indigo-200: #c3dafe;
+  --indigo-300: #a3bffa;
+  --indigo-400: #7f9cf5;
+  --indigo-500: #667eea;
+  --indigo-600: #5a67d8;
+  --indigo-700: #4c51bf;
+  --indigo-800: #434190;
+  --indigo-900: #3c366b;
+
+  /* Purple */
+  --purple-50: #fcfaff;
+  --purple-100: #faf5ff;
+  --purple-150: #f5ecff;
+  --purple-200: #e9d8fd;
+  --purple-300: #d6bcfa;
+  --purple-400: #b794f4;
+  --purple-500: #9f7aea;
+  --purple-600: #805ad5;
+  --purple-700: #6b46c1;
+  --purple-800: #553c9a;
+  --purple-900: #44337a;
+
+  /* Pink */
+  --pink-100: #fff5f7;
+  --pink-200: #fed7e2;
+  --pink-300: #fbb6ce;
+  --pink-400: #f687b3;
+  --pink-500: #ed64a6;
+  --pink-600: #d53f8c;
+  --pink-700: #b83280;
+  --pink-800: #97266d;
+  --pink-900: #702459;
+
+  /* SHADCN OVERRIDES */
+  --background: var(--grey-100);
+  --foreground: var(--grey-700);
+  --card: var(--grey-00);
+  --card-foreground: var(--grey-700);
+  --popover: var(--grey-00);
+  --popover-foreground: var(--grey-700);
+  --border: var(--grey-300);
+  --input: var(--grey-00);
+  --ring: var(--indigo-600);
+  --ring-soft: var(--ring);
+  --ring-soft: color-mix(in srgb, var(--ring) 45%, transparent);
+  --primary: var(--indigo-600);
+  --primary-subtle: var(--indigo-100);
+  --primary-foreground: var(--grey-00);
+  --secondary: var(--grey-100);
+  --secondary-foreground: var(--grey-700);
+  --muted: var(--grey-75);
+  --muted-foreground: var(--grey-600);
+  --accent: var(--grey-150);
+  --accent-foreground: var(--grey-700);
+  --destructive: var(--red-600);
+  --destructive-foreground: var(--grey-00);
+  --destructive-soft: var(--destructive);
+  --destructive-soft: color-mix(in srgb, var(--destructive) 35%, transparent);
+
+  /* Sidebar */
+  --sidebar: var(--grey-00);
+  --sidebar-foreground: var(--grey-700);
+  --sidebar-primary: var(--indigo-600);
+  --sidebar-primary-foreground: var(--grey-00);
+  --sidebar-accent: var(--grey-200);
+  --sidebar-accent-foreground: var(--grey-700);
+  --sidebar-border: var(--grey-400);
+  --sidebar-ring: var(--indigo-600);
+
+  /* Input Custom Overrides */
+  --bg-input: var(--grey-00);
+  --border-input: var(--grey-400);
+
+  /* =============================
+     SURFACES (GENERIC)
+     ============================= */
+  /* Neutral control rail/background surface used across components */
+  --surface-neutral: var(--grey-300);
+
+  /* =============================
+     TABLIST
+     ============================= */
+  --tablist-bg: var(--grey-200);
+  --tablist-fg: var(--grey-700);
+  --tablist-active-bg: var(--grey-00);
+  --tablist-active-fg: var(--grey-700);
+  --tab-hover-underline: var(--grey-300);
+
+  /* =============================
+     TABLE HEADER
+     ============================= */
+  --tablehead-bg: var(--muted);
+  --tablehead-fg: var(--foreground);
+  --tablehead-border: var(--border);
+
+  /* =============================
+     BUTTONS
+     ============================= */
+  --button-secondary-bg: transparent;
+  --button-secondary-border: var(--grey-700);
+  --button-secondary-hover-bg: var(--grey-150);
+  --button-outline-border: var(--border-input);
+  --button-outline-hover-bg: var(--accent);
+  --button-primary-hover-bg: var(--indigo-700);
+  --button-destructive-hover-bg: var(--red-700);
+  --button-outline-bg: var(--bg-input);
+
+  /* Table action trigger hover (distinct from row hover) */
+  --table-action-hover-bg: var(--grey-300);
+
+  /* Overlay */
+  --overlay-bg: rgba(0, 0, 0, 0.8);
+  --overlay-border: #353b48;
+
+  /* =============================
+     INPUT/OUTLINE/OVERLAY SURFACES
+     ============================= */
+  --input-surface-bg: #202734;
+  --input-surface-border: #2d3748;
+  --input-surface-hover-bg: #242c3a;
+}
+
+/* =============================
+   BADGE: TYPOGRAPHY
+   ============================= */
+.carbide [data-slot='badge'] {
+  font-weight: 400;
+}
+
+/* =============================
+   KNOWLEDGE HUB STATUS BADGES
+   ============================= */
+.carbide .mmc-khub [data-slot='badge'] {
+  border-radius: 9999px;
+}
+
+.carbide .mmc-khub [data-slot='badge'][data-status='Waiting'] {
+  background-color: var(--indigo-200);
+  color: var(--grey-700);
+  border-color: var(--indigo-200);
+}
+
+.carbide .mmc-khub [data-slot='badge'][data-status='Uploading'],
+.carbide .mmc-khub [data-slot='badge'][data-status='Processing'] {
+  background-color: transparent;
+  color: var(--grey-700);
+  border-color: transparent;
+  padding-inline: 0;
+}
+
+.carbide .mmc-khub [data-slot='badge'][data-status='Failed'],
+.carbide .mmc-khub [data-slot='badge'][data-status='Upload Failed'],
+.carbide .mmc-khub [data-slot='badge'][data-status='Processing Failed'] {
+  background-color: var(--red-200);
+  color: var(--grey-700);
+  border-color: var(--red-200);
+}
+
+.carbide .mmc-khub [data-slot='badge'][data-status='Processed'] {
+  background-color: var(--grey-200);
+  color: var(--grey-500);
+  border-color: var(--grey-200);
+}
+
+.carbide.dark .mmc-khub [data-slot='badge'][data-status='Waiting'] {
+  background-color: var(--indigo-700);
+  color: var(--grey-00);
+  border-color: var(--indigo-700);
+}
+
+.carbide.dark .mmc-khub [data-slot='badge'][data-status='Uploading'],
+.carbide.dark .mmc-khub [data-slot='badge'][data-status='Processing'] {
+  background-color: transparent;
+  color: var(--grey-200);
+  border-color: transparent;
+  padding-inline: 0;
+}
+
+.carbide.dark .mmc-khub [data-slot='badge'][data-status='Failed'],
+.carbide.dark .mmc-khub [data-slot='badge'][data-status='Upload Failed'],
+.carbide.dark .mmc-khub [data-slot='badge'][data-status='Processing Failed'] {
+  background-color: var(--red-700);
+  color: var(--grey-00);
+  border-color: var(--red-700);
+}
+
+.carbide.dark .mmc-khub [data-slot='badge'][data-status='Processed'] {
+  background-color: var(--grey-750);
+  color: var(--grey-300);
+  border-color: var(--grey-750);
+}
+
+/* =============================
+   BUTTON: ICON SIZE DEFAULT
+   ============================= */
+/* Default all button icons to 16px; :where() keeps specificity low so consumers can override */
+.carbide [data-slot='button'] svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* =============================
+   BUTTON VARIANTS (LIGHT)
+   ============================= */
+.carbide [data-slot='button'][data-variant='default']:not([disabled]) {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+.carbide [data-slot='button'][data-variant='default']:not([disabled]):hover {
+  background-color: var(--button-primary-hover-bg);
+}
+
+.carbide [data-slot='button'][data-variant='outline']:not([disabled]) {
+  background-color: var(--button-outline-bg);
+  border-color: var(--button-outline-border);
+}
+.carbide [data-slot='button'][data-variant='outline']:not([disabled]):hover {
+  background-color: var(--button-outline-hover-bg);
+}
+
+.carbide [data-slot='button'][data-variant='secondary']:not([disabled]) {
+  background-color: var(--button-secondary-bg);
+  border-color: var(--button-secondary-border);
+  color: var(--secondary-foreground);
+}
+.carbide [data-slot='button'][data-variant='secondary']:not([disabled]):hover {
+  background-color: var(--button-secondary-hover-bg);
+}
+
+.carbide [data-slot='button'][data-variant='ghost']:not([disabled]) {
+  background-color: transparent;
+  color: var(--foreground);
+}
+.carbide [data-slot='button'][data-variant='ghost']:not([disabled]):hover {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+.carbide [data-slot='button'][data-variant='destructive']:not([disabled]) {
+  background-color: var(--destructive);
+  color: var(--destructive-foreground);
+}
+.carbide
+  [data-slot='button'][data-variant='destructive']:not([disabled]):hover {
+  background-color: var(--button-destructive-hover-bg);
+}
+
+.carbide [data-slot='button'][data-variant='link']:not([disabled]) {
+  background-color: transparent;
+  color: var(--primary);
+}
+.carbide [data-slot='button'][data-variant='link']:not([disabled]):hover {
+  text-decoration: underline;
+}
+
+.carbide.dark {
+  --background: var(--grey-900);
+  --foreground: var(--grey-00);
+  --card: var(--grey-900);
+  --card-foreground: var(--grey-00);
+  --popover: var(--grey-800);
+  --popover-foreground: var(--grey-00);
+  --border: var(--grey-700);
+  --input: var(--grey-800);
+  --ring: var(--indigo-600);
+  --ring-soft: var(--ring);
+  --ring-soft: color-mix(in srgb, var(--ring) 45%, transparent);
+  --primary: var(--indigo-600);
+  --primary-subtle: var(--indigo-800);
+  --primary-foreground: var(--grey-00);
+  --secondary: var(--grey-900);
+  --secondary-foreground: var(--grey-00);
+  --muted: var(--grey-850);
+  --muted-foreground: var(--grey-600);
+  --accent: var(--grey-700);
+  --accent-foreground: var(--grey-00);
+  --destructive: var(--red-600);
+  --destructive-foreground: var(--grey-00);
+  --destructive-soft: var(--destructive);
+  --destructive-soft: color-mix(in srgb, var(--destructive) 35%, transparent);
+
+  /* Sidebar */
+  --sidebar: var(--grey-950);
+  --sidebar-foreground: var(--grey-00);
+  --sidebar-primary: var(--indigo-600);
+  --sidebar-primary-foreground: var(--grey-00);
+  --sidebar-accent: var(--grey-800);
+  --sidebar-accent-foreground: var(--grey-00);
+  --sidebar-border: var(--grey-700);
+  --sidebar-ring: var(--indigo-600);
+
+  /* Input Custom Overrides */
+  --bg-input: var(--grey-800);
+  --border-input: var(--grey-700);
+
+  /* =============================
+     SURFACES (GENERIC)
+     ============================= */
+  /* Neutral control rail/background surface used across components (dark) */
+  --surface-neutral: var(--grey-700);
+
+  /* =============================
+     TABLIST
+     ============================= */
+  --tablist-bg: var(--grey-950);
+  --tablist-fg: var(--grey-600);
+  --tablist-active-bg: var(--grey-800);
+  --tablist-active-fg: var(--grey-00);
+  --tab-hover-underline: var(--grey-700);
+
+  /* =============================
+     TABLE HEADER
+     ============================= */
+  --tablehead-bg: var(--muted);
+  --tablehead-fg: var(--foreground);
+  --tablehead-border: var(--border);
+
+  /* =============================
+     BUTTONS
+     ============================= */
+  --button-secondary-bg: transparent;
+  --button-secondary-border: var(--grey-400);
+  --button-secondary-hover-bg: var(--grey-800);
+  --button-outline-border: var(--border-input);
+  --button-outline-hover-bg: color-mix(
+    in srgb,
+    var(--input-surface-hover-bg) 80%,
+    transparent
+  );
+  --button-primary-hover-bg: var(--indigo-500);
+  --button-destructive-hover-bg: var(--red-500);
+  --button-outline-bg: color-mix(in srgb, var(--bg-input) 30%, transparent);
+
+  /* Table action trigger hover (distinct from row hover) */
+  --table-action-hover-bg: var(--grey-800);
+}
+
+/* =============================
+   BUTTON VARIANTS (DARK)
+   ============================= */
+.carbide.dark [data-slot='button'][data-variant='default']:not([disabled]) {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+.carbide.dark
+  [data-slot='button'][data-variant='default']:not([disabled]):hover {
+  background-color: var(--button-primary-hover-bg);
+}
+
+.carbide.dark [data-slot='button'][data-variant='outline']:not([disabled]) {
+  background-color: var(--button-outline-bg);
+  border-color: var(--button-outline-border);
+}
+.carbide.dark
+  [data-slot='button'][data-variant='outline']:not([disabled]):hover {
+  background-color: var(--button-outline-hover-bg);
+}
+
+.carbide.dark [data-slot='button'][data-variant='secondary']:not([disabled]) {
+  background-color: var(--button-secondary-bg);
+  border-color: var(--button-secondary-border);
+  color: var(--secondary-foreground);
+}
+.carbide.dark
+  [data-slot='button'][data-variant='secondary']:not([disabled]):hover {
+  background-color: var(--button-secondary-hover-bg);
+}
+
+.carbide.dark [data-slot='button'][data-variant='ghost']:not([disabled]) {
+  background-color: transparent;
+  color: var(--foreground);
+}
+.carbide.dark [data-slot='button'][data-variant='ghost']:not([disabled]):hover {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+.carbide.dark [data-slot='button'][data-variant='destructive']:not([disabled]) {
+  background-color: var(--destructive);
+  color: var(--destructive-foreground);
+}
+.carbide.dark
+  [data-slot='button'][data-variant='destructive']:not([disabled]):hover {
+  background-color: var(--button-destructive-hover-bg);
+}
+
+.carbide.dark [data-slot='button'][data-variant='link']:not([disabled]) {
+  background-color: transparent;
+  color: var(--primary);
+}
+.carbide.dark [data-slot='button'][data-variant='link']:not([disabled]):hover {
+  text-decoration: underline;
+}
+
+/* =============================
+   INPUT
+   ============================= */
+.carbide [data-slot='input'] {
+  background-color: var(--bg-input);
+  border-color: var(--border-input);
+  color: var(--foreground);
+  font-size: 1rem;
+  line-height: 1.5;
+  min-width: 0;
+  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
+  transition:
+    background-color 0.2s ease,
+    box-shadow 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+@media (min-width: 768px) {
+  .carbide [data-slot='input'] {
+    font-size: 0.875rem;
+  }
+}
+
+.carbide [data-slot='input']::placeholder {
+  color: var(--muted-foreground);
+  opacity: 1;
+}
+
+.carbide [data-slot='input']::selection {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+
+.carbide [data-slot='input']:where(:not(:disabled)):hover {
+  background-color: var(--accent);
+  cursor: text;
+}
+
+.carbide.dark [data-slot='input'] {
+  background-color: var(--bg-input);
+}
+
+.carbide.dark [data-slot='input']:where(:not(:disabled)):hover {
+  background-color: var(--input-surface-hover-bg);
+}
+
+.carbide [data-slot='input']:focus-visible {
+  outline: none;
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px var(--ring-soft);
+}
+
+.carbide [data-slot='input'][aria-invalid='true'] {
+  border-color: var(--destructive);
+}
+
+.carbide [data-slot='input'][aria-invalid='true']:focus-visible {
+  box-shadow: 0 0 0 3px var(--destructive-soft);
+}
+
+/* =============================
+   SELECT
+   ============================= */
+.carbide [data-slot='select-trigger'] {
+  background-color: var(--bg-input);
+  border-color: var(--border-input);
+  color: var(--foreground);
+  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
+  transition:
+    background-color 0.2s ease,
+    box-shadow 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease;
+}
+.carbide [data-slot='select-trigger'][data-placeholder] {
+  color: var(--muted-foreground);
+}
+.carbide [data-slot='select-trigger']:where(:not(:disabled)):hover {
+  background-color: var(--accent);
+  cursor: pointer;
+}
+.carbide.dark [data-slot='select-trigger']:where(:not(:disabled)):hover {
+  background-color: var(--input-surface-hover-bg);
+}
+.carbide [data-slot='select-trigger']:focus-visible {
+  outline: none;
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px var(--ring-soft);
+}
+.carbide [data-slot='select-trigger'][aria-invalid='true'] {
+  border-color: var(--destructive);
+}
+.carbide [data-slot='select-trigger'][aria-invalid='true']:focus-visible {
+  box-shadow: 0 0 0 3px var(--destructive-soft);
+}
+.carbide [data-slot='select-trigger'] svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  pointer-events: none;
+  color: var(--muted-foreground);
+}
+.carbide [data-slot='select-trigger'] [data-slot='select-value'] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.carbide [data-slot='select-item'] {
+  color: var(--foreground);
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+.carbide [data-slot='select-item']:focus {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+.carbide [data-slot='select-item'] svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  pointer-events: none;
+  color: var(--muted-foreground);
+}
+.carbide [data-slot='select-item'][data-disabled] {
+  color: var(--muted-foreground);
+}
+
+/* =============================
+   DROPDOWN MENU
+   ============================= */
+.carbide [data-slot='dropdown-menu-content'] {
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  border-color: var(--border);
+  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
+}
+.carbide.dark [data-slot='dropdown-menu-content'] {
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  border-color: var(--border);
+}
+
+.carbide [data-slot='dropdown-menu-item'],
+.carbide [data-slot='dropdown-menu-checkbox-item'],
+.carbide [data-slot='dropdown-menu-radio-item'] {
+  color: var(--foreground);
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+.carbide [data-slot='dropdown-menu-item'][data-variant='destructive'],
+.carbide [data-slot='dropdown-menu-checkbox-item'][data-variant='destructive'],
+.carbide [data-slot='dropdown-menu-radio-item'][data-variant='destructive'] {
+  color: var(--destructive);
+}
+.carbide [data-slot='dropdown-menu-item'][data-variant='destructive'] svg,
+.carbide
+  [data-slot='dropdown-menu-checkbox-item'][data-variant='destructive']
+  svg,
+.carbide
+  [data-slot='dropdown-menu-radio-item'][data-variant='destructive']
+  svg {
+  color: var(--destructive);
+}
+.carbide [data-slot='dropdown-menu-item']:focus,
+.carbide [data-slot='dropdown-menu-checkbox-item']:focus,
+.carbide [data-slot='dropdown-menu-radio-item']:focus {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+.carbide [data-slot='dropdown-menu-item'][data-variant='destructive']:focus,
+.carbide
+  [data-slot='dropdown-menu-checkbox-item'][data-variant='destructive']:focus,
+.carbide
+  [data-slot='dropdown-menu-radio-item'][data-variant='destructive']:focus {
+  background-color: color-mix(in srgb, var(--destructive) 15%, transparent);
+  color: var(--destructive);
+}
+.carbide.dark
+  [data-slot='dropdown-menu-item'][data-variant='destructive']:focus,
+.carbide.dark
+  [data-slot='dropdown-menu-checkbox-item'][data-variant='destructive']:focus,
+.carbide.dark
+  [data-slot='dropdown-menu-radio-item'][data-variant='destructive']:focus {
+  background-color: color-mix(in srgb, var(--destructive) 25%, transparent);
+  color: var(--destructive);
+}
+.carbide [data-slot='dropdown-menu-item']:focus svg,
+.carbide [data-slot='dropdown-menu-checkbox-item']:focus svg,
+.carbide [data-slot='dropdown-menu-radio-item']:focus svg {
+  color: inherit;
+}
+.carbide [data-slot='dropdown-menu-item'] svg,
+.carbide [data-slot='dropdown-menu-checkbox-item'] svg,
+.carbide [data-slot='dropdown-menu-radio-item'] svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  pointer-events: none;
+  color: var(--muted-foreground);
+}
+.carbide [data-slot='dropdown-menu-item'][data-disabled],
+.carbide [data-slot='dropdown-menu-checkbox-item'][data-disabled],
+.carbide [data-slot='dropdown-menu-radio-item'][data-disabled] {
+  color: var(--muted-foreground);
+}
+
+.carbide [data-slot='dropdown-menu-label'] {
+  color: var(--muted-foreground);
+}
+
+.carbide [data-slot='dropdown-menu-separator'] {
+  background-color: var(--border);
+}
+
+/* =============================
+   TOOLTIP
+   ============================= */
+.carbide [data-slot='tooltip-content'] {
+  background-color: var(--foreground);
+  color: var(--background);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
+}
+.carbide.dark [data-slot='tooltip-content'] {
+  background-color: var(--foreground);
+  color: var(--background);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.45);
+}
+.carbide [data-slot='tooltip-arrow'],
+.carbide [data-slot='tooltip-content'] > [data-radix-tooltip-arrow] {
+  background-color: var(--foreground);
+  fill: var(--foreground);
+}
+
+/* =============================
+   OVERLAYS & DIALOG/SHEET/DRAWER
+   ============================= */
+.carbide [data-slot='dialog-overlay'],
+.carbide [data-slot='sheet-overlay'],
+.carbide [data-slot='drawer-overlay'] {
+  background-color: color-mix(in srgb, var(--overlay-bg) 60%, transparent);
+  backdrop-filter: blur(2px);
+}
+.carbide.dark [data-slot='dialog-overlay'],
+.carbide.dark [data-slot='sheet-overlay'],
+.carbide.dark [data-slot='drawer-overlay'] {
+  background-color: color-mix(in srgb, var(--overlay-bg) 75%, transparent);
+}
+
+.carbide [data-slot='dialog-content'],
+.carbide [data-slot='sheet-content'],
+.carbide [data-slot='drawer-content'] {
+  background-color: var(--card);
+  color: var(--card-foreground);
+  border-color: var(--border);
+  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
+}
+.carbide.dark [data-slot='dialog-content'],
+.carbide.dark [data-slot='sheet-content'],
+.carbide.dark [data-slot='drawer-content'] {
+  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.55);
+}
+
+.carbide [data-slot='dialog-close'],
+.carbide [data-slot='sheet-close'] {
+  background-color: transparent;
+  color: var(--muted-foreground);
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    box-shadow 0.2s ease,
+    opacity 0.2s ease;
+}
+.carbide [data-slot='dialog-close']:hover,
+.carbide [data-slot='sheet-close']:hover {
+  background-color: color-mix(in srgb, var(--accent) 40%, transparent);
+  color: var(--accent-foreground);
+  opacity: 1;
+}
+.carbide [data-slot='dialog-close']:focus-visible,
+.carbide [data-slot='sheet-close']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--ring-soft);
+}
+.carbide [data-slot='dialog-close'][data-state='open'],
+.carbide [data-slot='sheet-close'][data-state='open'] {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+
+.carbide [data-slot='dialog-title'],
+.carbide [data-slot='sheet-title'],
+.carbide [data-slot='drawer-title'] {
+  color: var(--card-foreground);
+}
+
+.carbide [data-slot='dialog-description'],
+.carbide [data-slot='sheet-description'],
+.carbide [data-slot='drawer-description'] {
+  color: var(--muted-foreground);
+}
+
+.carbide [data-slot='drawer-handle'] {
+  background-color: color-mix(
+    in srgb,
+    var(--muted-foreground) 30%,
+    transparent
+  );
+}
+.carbide.dark [data-slot='drawer-handle'] {
+  background-color: color-mix(
+    in srgb,
+    var(--muted-foreground) 45%,
+    transparent
+  );
+}
+
+/* =============================
+   TABLE
+   ============================= */
+.carbide [data-slot='table-wrapper'] {
+  background-color: var(--card);
+  color: var(--card-foreground);
+  border-color: var(--border);
+}
+.carbide.dark [data-slot='table-wrapper'] {
+  background-color: var(--card);
+  color: var(--card-foreground);
+  border-color: var(--border);
+}
+
+/* =============================
+   TABS
+   ============================= */
+.carbide [data-slot='tabs-list'][data-variant='default'] {
+  background-color: var(--tablist-bg);
+  color: var(--tablist-fg);
+  border-radius: 0.5rem;
+  gap: 0.25rem;
+}
+.carbide
+  [data-slot='tabs-list'][data-variant='default']
+  [data-slot='tabs-trigger'] {
+  color: var(--tablist-fg);
+  border-radius: 0.375rem;
+}
+.carbide
+  [data-slot='tabs-list'][data-variant='default']
+  [data-slot='tabs-trigger']:hover {
+  color: var(--tablist-active-fg);
+}
+.carbide
+  [data-slot='tabs-list'][data-variant='default']
+  [data-slot='tabs-trigger'][data-state='active'] {
+  background-color: var(--tablist-active-bg);
+  color: var(--tablist-active-fg);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
+}
+
+.carbide [data-slot='tabs-list'][data-variant='underline'],
+.carbide [data-variant='underline'] > [data-slot='tabs-list'] {
+  color: var(--muted-foreground);
+  border-color: var(--border);
+}
+.carbide
+  [data-slot='tabs-list'][data-variant='underline']
+  [data-slot='tabs-trigger'] {
+  color: var(--muted-foreground);
+}
+.carbide
+  [data-slot='tabs-list'][data-variant='underline']
+  [data-slot='tabs-trigger']
+  > span {
+  color: inherit;
+  transition: color 0.2s ease;
+}
+.carbide
+  [data-slot='tabs-list'][data-variant='underline']
+  [data-slot='tabs-trigger']:hover,
+.carbide
+  [data-slot='tabs-list'][data-variant='underline']
+  [data-slot='tabs-trigger'][data-state='active'] {
+  color: var(--foreground);
+}
+/* =============================
+   UTILITY OVERRIDES
+============================= */
+
+/*
+  Force correct text color for destructive badges and elements using text-destructive-foreground.
+  This ensures shadcn/ui and Carbide parity even if Tailwind config mapping is missing or overridden.
+*/
+.carbide .text-destructive-foreground {
+  color: var(--destructive-foreground) !important;
+}
+
+/* Input Border Utility */
+.carbide .border-input,
+.carbide.dark .border-input {
+  border-color: var(--border-input) !important;
+}
+
+/* Scrollbar Utilities */
+.carbide .scrollbar-none {
+  scrollbar-width: none;
+}
+
+.carbide .scrollbar-none::-webkit-scrollbar {
+  display: none;
+}
+
+/* =============================
+   PROGRESS (SEMANTIC HOOK)
+   ============================= */
+.carbide [data-slot='progress'] {
+  background-color: var(--surface-neutral);
+}
+
+.carbide [data-slot='progress'] [data-slot='progress-indicator'] {
+  background-color: var(--primary);
+}
+
+/* =============================
+   ACCORDION
+   ============================= */
+.carbide [data-slot='accordion'] [data-slot='accordion-item'] {
+  border-bottom: 1px solid var(--border);
+}
+.carbide [data-slot='accordion'] [data-slot='accordion-trigger'] {
+  color: var(--foreground);
+}
+
+/* =============================
+   POPOVER
+   ============================= */
+.carbide [data-slot='popover-content'] {
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  border-color: var(--border);
+  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
+}
+.carbide.dark [data-slot='popover-content'] {
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  border-color: var(--border);
+  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.45);
+}
+
+/* =============================
+   SLIDER (SEMANTIC HOOK)
+   ============================= */
+/* =============================
+   CHECKBOX (SEMANTIC HOOK)
+   ============================= */
+.carbide [data-slot='checkbox'] {
+  border-color: var(--border-input) !important;
+  background-color: var(--bg-input);
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+.carbide [data-slot='checkbox']:where(:not(:disabled)):hover {
+  background-color: var(--accent);
+  border-color: var(--accent);
+}
+.carbide.dark [data-slot='checkbox']:where(:not(:disabled)):hover {
+  background-color: var(--input-surface-hover-bg);
+  border-color: var(--input-surface-hover-bg);
+}
+.carbide [data-slot='checkbox'][data-state='checked'],
+.carbide [data-slot='checkbox'][data-state='indeterminate'] {
+  border-color: var(--primary) !important;
+  background-color: var(--primary) !important;
+  color: var(--primary-foreground) !important;
+}
+
+/* =============================
+   RADIO GROUP ITEM
+   ============================= */
+.carbide [data-slot='radio-group-item'] {
+  border-color: var(--border-input);
+  background-color: var(--bg-input);
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+.carbide [data-slot='radio-group-item']:where(:not(:disabled)):hover {
+  background-color: var(--accent);
+}
+.carbide.dark [data-slot='radio-group-item']:where(:not(:disabled)):hover {
+  background-color: var(--input-surface-hover-bg);
+}
+.carbide [data-slot='radio-group-item'][data-state='checked'] {
+  border-color: var(--primary);
+}
+.carbide [data-slot='radio-group-indicator'] svg {
+  fill: var(--primary);
+  stroke: var(--primary);
+}
+
+/* =============================
+   FORM CONTROL FOCUS + INVALID STATES
+   ============================= */
+.carbide [data-slot='checkbox']:focus-visible,
+.carbide [data-slot='radio-group-item']:focus-visible,
+.carbide [data-slot='switch']:focus-visible {
+  outline: none;
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px var(--ring-soft);
+}
+
+.carbide [data-slot='checkbox'][aria-invalid='true'],
+.carbide [data-slot='radio-group-item'][aria-invalid='true'],
+.carbide [data-slot='switch'][aria-invalid='true'] {
+  border-color: var(--destructive);
+}
+
+.carbide [data-slot='checkbox'][aria-invalid='true']:focus-visible,
+.carbide [data-slot='radio-group-item'][aria-invalid='true']:focus-visible,
+.carbide [data-slot='switch'][aria-invalid='true']:focus-visible {
+  box-shadow: 0 0 0 3px var(--destructive-soft);
+}
+
+/* =============================
+   SWITCH (SEMANTIC HOOK)
+   ============================= */
+.carbide [data-slot='switch'] {
+  border-color: transparent;
+}
+.carbide [data-slot='switch'][data-state='unchecked'] {
+  background-color: var(--accent);
+}
+.carbide [data-slot='switch'][data-state='checked'] {
+  background-color: var(--primary);
+}
+.carbide.dark [data-slot='switch'][data-state='unchecked'] {
+  background-color: color-mix(in srgb, var(--bg-input) 80%, transparent);
+}
+.carbide [data-slot='switch-thumb'] {
+  background-color: var(--card);
+  transition:
+    background-color 0.2s ease,
+    transform 0.2s ease;
+}
+.carbide.dark [data-slot='switch-thumb'][data-state='unchecked'] {
+  background-color: var(--foreground);
+}
+.carbide.dark [data-slot='switch-thumb'][data-state='checked'] {
+  background-color: var(--primary-foreground);
+}
+
+/* =============================
+   CALENDAR (SEMANTIC HOOK)
+   ============================= */
+.carbide [data-slot='calendar'] {
+  background-color: var(--card);
+  color: var(--card-foreground);
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.06),
+    0 2px 12px rgba(0, 0, 0, 0.08);
+  border-radius: 0.5rem;
+}
+.carbide [data-slot='slider'] [data-slot='slider-track'] {
+  background-color: var(--surface-neutral);
+}
+
+.carbide [data-slot='slider'] [data-slot='slider-range'] {
+  background-color: var(--primary);
+}
+.carbide [data-slot='slider'] [data-slot='slider-thumb'] {
+  border-color: var(--primary);
+}
+.carbide.dark [data-slot='slider'] [data-slot='slider-track'] {
+  background-color: var(--surface-neutral);
+}
+.carbide.dark [data-slot='slider'] [data-slot='slider-range'] {
+  background-color: var(--primary);
+}
+.carbide.dark [data-slot='slider'] [data-slot='slider-thumb'] {
+  border-color: var(--primary);
+}
+.carbide [data-slot='accordion'] [data-slot='accordion-content'] {
+  color: var(--muted-foreground);
+}
+.carbide.dark [data-slot='accordion'] [data-slot='accordion-item'] {
+  border-bottom: 1px solid var(--border);
+}
+.carbide.dark [data-slot='accordion'] [data-slot='accordion-trigger'] {
+  color: var(--foreground);
+}
+.carbide.dark [data-slot='accordion'] [data-slot='accordion-content'] {
+  color: var(--muted-foreground);
+}
+
+.carbide.dark [data-slot='progress'] {
+  background-color: var(--surface-neutral);
+}
+
+.carbide.dark [data-slot='progress'] [data-slot='progress-indicator'] {
+  background-color: var(--primary);
+}
+
+/* =============================
+   DATA TABLE: ALIGNMENT BASELINE FIX
+   ============================= */
+/* Unify left-aligned body cells to the sortable-header baseline (0.25rem) */
+.carbide
+  td.text-left[data-col-id]:not([data-col-id='select']):not(
+    [data-col-id='actions']
+  ) {
+  padding-left: 0.25rem !important;
+}
+
+/* Normalize non-button header labels to match the ghost-button baseline */
+.carbide
+  th[data-slot='table-head']
+  .inline-flex.items-center.gap-1:not(:has(button)) {
+  margin-left: -0.75rem; /* simulate -ml-3 */
+  padding-left: 0.75rem; /* simulate px-3 so text begins at the same x */
+}
+.carbide.dark [data-slot='switch'][data-state='unchecked'] {
+  background-color: var(--bg-input);
+  background-color: color-mix(in srgb, var(--bg-input) 80%, transparent);
+}
+.carbide [data-slot='calendar'] {
+  background-color: var(--card);
+  color: var(--card-foreground);
+  box-shadow:
+    0 1px 2px rgba(15, 23, 42, 0.06),
+    0 12px 32px rgba(15, 23, 42, 0.12);
+  border-radius: 0.75rem;
+}
+.carbide [data-slot='calendar'] .rdp-months {
+  display: flex;
+  gap: 1rem;
+  position: relative;
+}
+.carbide [data-slot='calendar'] .rdp-navbar {
+  position: absolute;
+  inset-inline: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-inline: 0;
+}
+.carbide [data-slot='calendar'] .rdp-caption_label {
+  font-weight: 500;
+  text-transform: none;
+  color: var(--card-foreground);
+}
+.carbide [data-slot='calendar'] .rdp-caption_dropdowns {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  justify-content: center;
+}
+.carbide [data-slot='calendar'] .rdp-caption_dropdowns select {
+  appearance: none;
+  background-color: transparent;
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--card-foreground);
+}
+.carbide [data-slot='calendar'] .rdp-weeknumber,
+.carbide [data-slot='calendar'] .rdp-weeknumber_label {
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+}
+.carbide [data-slot='calendar'] .rdp-head_cell {
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+.carbide [data-slot='calendar'] .rdp-cell {
+  padding: 0;
+}
+.carbide [data-slot='calendar'] [data-slot='button'] {
+  width: var(--cell-size);
+  height: var(--cell-size);
+  border-radius: 0.75rem;
+  color: var(--card-foreground);
+}
+.carbide [data-slot='calendar'] [data-slot='button'][data-range-middle='true'] {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+}
+.carbide [data-slot='calendar'] [data-slot='button'][data-range-start='true'],
+.carbide [data-slot='calendar'] [data-slot='button'][data-range-end='true'],
+.carbide
+  [data-slot='calendar']
+  [data-slot='button'][data-selected-single='true'] {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+.carbide [data-slot='calendar'] [data-slot='button'][data-range-middle='true'] {
+  border-radius: 0;
+}
+.carbide [data-slot='calendar'] [data-slot='button'][data-range-end='true'] {
+  border-radius: 0.75rem;
+  border-start-end-radius: 0.75rem;
+  border-end-end-radius: 0.75rem;
+}
+.carbide [data-slot='calendar'] [data-slot='button'][data-range-start='true'] {
+  border-radius: 0.75rem;
+  border-start-start-radius: 0.75rem;
+  border-end-start-radius: 0.75rem;
+}
+.carbide [data-slot='calendar'] [data-slot='button'][data-outside='true'] {
+  color: var(--muted-foreground);
+}
+.carbide [data-slot='calendar'] [data-slot='button'][disabled] {
+  color: var(--muted-foreground);
+  opacity: 0.5;
+}
+.carbide [data-slot='calendar'] [data-slot='button'][data-state='today'] {
+  color: var(--primary);
+  border: 1px solid var(--primary);
+}
+.carbide [data-slot='calendar'] .group\/day [data-slot='button'] {
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+.carbide
+  [data-slot='calendar']
+  .group\/day[data-focused='true']
+  [data-slot='button'] {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 3px var(--ring-soft);
+}