@scattered-light/base-ui-theme 0.1.0

package/dist/styles/semantic/alert-dialog.css

@@ -0,0 +1,78 @@
+/* Alert Dialog Component Tokens - Mojave Theme */
+/* AlertDialog references Dialog tokens but maintains separate structure for customization */
+
+:root {
+  /* ============================================
+     BACKDROP
+     ============================================ */
+  
+  --alert-dialog-backdrop-bg: var(--dialog-backdrop-background);
+  --alert-dialog-backdrop-z-index: var(--dialog-backdrop-z-index);
+  --alert-dialog-backdrop-animation-duration: var(--dialog-backdrop-animation-duration);
+  --alert-dialog-backdrop-animation-easing: var(--dialog-backdrop-animation-easing);
+  
+  /* ============================================
+     POPUP CONTAINER
+     ============================================ */
+  
+  --alert-dialog-popup-width: var(--dialog-popup-width);
+  --alert-dialog-popup-max-width: var(--dialog-popup-max-width);
+  --alert-dialog-popup-max-height: var(--dialog-popup-max-height);
+  --alert-dialog-popup-bg: var(--dialog-popup-background);
+  --alert-dialog-popup-border-width: var(--dialog-popup-border-width);
+  --alert-dialog-popup-border-color: var(--dialog-popup-border-color);
+  --alert-dialog-popup-border-radius: var(--dialog-popup-border-radius);
+  --alert-dialog-popup-shadow: var(--dialog-popup-box-shadow);
+  --alert-dialog-popup-padding: var(--dialog-popup-padding);
+  --alert-dialog-popup-gap: var(--dialog-popup-gap);
+  --alert-dialog-popup-z-index: var(--dialog-popup-z-index);
+  --alert-dialog-popup-animation-duration: var(--dialog-popup-animation-duration);
+  --alert-dialog-popup-animation-easing: var(--dialog-popup-animation-easing);
+  
+  /* ============================================
+     TITLE
+     ============================================ */
+  
+  --alert-dialog-title-font-family: var(--dialog-title-font-family);
+  --alert-dialog-title-font-size: var(--dialog-title-font-size);
+  --alert-dialog-title-font-weight: var(--dialog-title-font-weight);
+  --alert-dialog-title-line-height: var(--dialog-title-line-height);
+  --alert-dialog-title-letter-spacing: var(--dialog-title-letter-spacing);
+  --alert-dialog-title-color: var(--dialog-title-color);
+  
+  /* ============================================
+     DESCRIPTION
+     ============================================ */
+  
+  --alert-dialog-description-font-family: var(--dialog-description-font-family);
+  --alert-dialog-description-font-size: var(--dialog-description-font-size);
+  --alert-dialog-description-font-weight: var(--dialog-description-font-weight);
+  --alert-dialog-description-line-height: var(--dialog-description-line-height);
+  --alert-dialog-description-letter-spacing: var(--dialog-description-letter-spacing);
+  --alert-dialog-description-color: var(--dialog-description-color);
+  
+  /* ============================================
+     ACTIONS
+     ============================================ */
+  
+  --alert-dialog-actions-display: var(--dialog-actions-display);
+  --alert-dialog-actions-gap: var(--dialog-actions-gap);
+  --alert-dialog-actions-justify-content: var(--dialog-actions-justify-content);
+  --alert-dialog-actions-margin-top: var(--dialog-actions-margin-top);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --alert-dialog-popup-bg: var(--theme-neutral-50);
+    --alert-dialog-popup-border-color: var(--theme-neutral-600);
+  }
+}
+
+[data-theme='dark'] {
+  --alert-dialog-popup-bg: var(--theme-neutral-50);
+  --alert-dialog-popup-border-color: var(--theme-neutral-600);
+}

package/dist/styles/semantic/autocomplete.css

@@ -0,0 +1,162 @@
+/* At the top of the file, add: */
+@import './input.css';
+
+/* Autocomplete Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     ROOT CONTAINER
+     ============================================ */
+  
+  --autocomplete-root-position: relative;
+  
+  /* ============================================
+     INPUT (reuses base input tokens)
+     ============================================ */
+  
+  --autocomplete-input-width: var(--input-width);
+  --autocomplete-input-height: var(--input-height);
+  --autocomplete-input-padding-block: var(--input-padding-block);
+  --autocomplete-input-padding-inline-start: var(--input-padding-inline);
+  --autocomplete-input-padding-inline-end: var(--space-10); /* Extra space for clear button */
+  --autocomplete-input-font-family: var(--input-font-family);
+  --autocomplete-input-font-size: var(--input-font-size);
+  --autocomplete-input-font-weight: var(--input-font-weight);
+  --autocomplete-input-line-height: var(--input-line-height);
+  --autocomplete-input-letter-spacing: var(--input-letter-spacing);
+  --autocomplete-input-color: var(--input-color);
+  --autocomplete-input-bg: var(--input-background);
+  --autocomplete-input-border-width: var(--input-border-width);
+  --autocomplete-input-border-color: var(--input-border-color);
+  --autocomplete-input-border-color-hover: var(--input-border-color-hover);
+  --autocomplete-input-border-color-focus: var(--input-border-color-focus);
+  --autocomplete-input-shadow-focus: var(--input-shadow-focus);
+  --autocomplete-input-background-disabled: var(--input-background-disabled);
+  --autocomplete-input-color-disabled: var(--input-color-disabled);
+  --autocomplete-input-cursor-disabled: var(--input-cursor-disabled);
+  
+  /* ============================================
+     CLEAR BUTTON
+     ============================================ */
+  
+  --autocomplete-clear-position: absolute;
+  --autocomplete-clear-inset-inline-end: var(--space-3);
+  --autocomplete-clear-inset-block-start: 50%;
+  --autocomplete-clear-size: var(--space-6);
+  --autocomplete-clear-bg: transparent;
+  --autocomplete-clear-bg-hover: var(--surface-raised);
+  --autocomplete-clear-color: var(--text-tertiary);
+  --autocomplete-clear-color-hover: var(--text-primary);
+  --autocomplete-clear-border-radius: var(--theme-radius-item);
+  --autocomplete-clear-font-size: var(--theme-maximize-xl-font-size);
+  --autocomplete-clear-transition: all 0.2s ease;
+  
+  /* ============================================
+     POSITIONER
+     ============================================ */
+  
+  --autocomplete-positioner-z-index: 1500;
+  
+  /* ============================================
+     POPUP
+     ============================================ */
+  
+  --autocomplete-popup-margin-block-start: var(--space-1);
+  --autocomplete-popup-bg: var(--surface-base);
+  --autocomplete-popup-border-width: var(--theme-stroke-default);
+  --autocomplete-popup-border-color: var(--border-default);
+  --autocomplete-popup-border-radius: var(--input-border-radius);
+  --autocomplete-popup-shadow: var(--shadow-lg);
+  --autocomplete-popup-animation-duration: 0.2s;
+  --autocomplete-popup-animation-easing: ease-out;
+  
+  /* ============================================
+     LIST
+     ============================================ */
+  
+  --autocomplete-list-max-height: 300px;
+  --autocomplete-list-padding: var(--space-1);
+  
+  /* ============================================
+     ITEM
+     ============================================ */
+  
+  --autocomplete-item-padding-block: var(--space-2-5);
+  --autocomplete-item-padding-inline: var(--space-3);
+  --autocomplete-item-font-family: var(--theme-font-base-font-family);
+  --autocomplete-item-font-size: var(--theme-font-base-font-size);
+  --autocomplete-item-font-weight: var(--theme-font-base-font-weight);
+  --autocomplete-item-line-height: var(--theme-font-base-line-height);
+  --autocomplete-item-letter-spacing: var(--theme-font-base-letter-spacing);
+  --autocomplete-item-color: var(--text-primary);
+  --autocomplete-item-bg-hover: var(--theme-primary-100);
+  --autocomplete-item-color-hover: var(--theme-primary-800);
+  --autocomplete-item-bg-selected: var(--theme-primary-200);
+  --autocomplete-item-color-selected: var(--theme-primary-900);
+  --autocomplete-item-font-weight-selected: var(--font-weight-medium);
+  --autocomplete-item-color-disabled: var(--text-disabled);
+  --autocomplete-item-opacity-disabled: 0.5;
+  --autocomplete-item-border-radius: var(--theme-radius-item);
+  --autocomplete-item-transition: all 0.15s ease;
+  
+  /* ============================================
+     GROUP
+     ============================================ */
+  
+  --autocomplete-group-padding: 0;
+  
+  /* ============================================
+     GROUP LABEL
+     ============================================ */
+  
+  --autocomplete-group-label-padding-block-start: var(--space-2);
+  --autocomplete-group-label-padding-block-end: var(--space-1);
+  --autocomplete-group-label-padding-inline: var(--space-3);
+  --autocomplete-group-label-font-family: var(--theme-font-condense-subtitle-label-font-family);
+  --autocomplete-group-label-font-size: var(--theme-font-condense-subtitle-label-font-size);
+  --autocomplete-group-label-font-weight: var(--theme-font-condense-subtitle-label-font-weight);
+  --autocomplete-group-label-line-height: var(--theme-font-condense-subtitle-label-line-height);
+  --autocomplete-group-label-letter-spacing: var(--theme-font-condense-subtitle-label-letter-spacing);
+  --autocomplete-group-label-color: var(--text-secondary);
+  --autocomplete-group-label-text-transform: var(--theme-font-condense-subtitle-label-text-transform);
+  
+  /* ============================================
+     SEPARATOR
+     ============================================ */
+  
+  --autocomplete-separator-height: var(--theme-stroke-default);
+  --autocomplete-separator-bg: var(--border-subtle);
+  --autocomplete-separator-margin-block: var(--space-1);
+  
+  /* ============================================
+     EMPTY STATE
+     ============================================ */
+  
+  --autocomplete-empty-padding-block: var(--space-6);
+  --autocomplete-empty-padding-inline: var(--space-3);
+  --autocomplete-empty-text-align: center;
+  --autocomplete-empty-color: var(--text-tertiary);
+  --autocomplete-empty-font-family: var(--theme-font-condense-font-family);
+  --autocomplete-empty-font-size: var(--theme-font-condense-font-size);
+  --autocomplete-empty-font-weight: var(--theme-font-condense-font-weight);
+  --autocomplete-empty-line-height: var(--theme-font-condense-line-height);
+  --autocomplete-empty-letter-spacing: var(--theme-font-condense-letter-spacing);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --autocomplete-input-bg: var(--input-background);
+    --autocomplete-popup-bg: var(--theme-neutral-50);
+    --autocomplete-clear-bg-hover: var(--theme-neutral-100);
+  }
+}
+
+[data-theme='dark'] {
+  --autocomplete-input-bg: var(--input-background);
+  --autocomplete-popup-bg: var(--theme-neutral-50);
+  --autocomplete-clear-bg-hover: var(--theme-neutral-100);
+}

package/dist/styles/semantic/avatar.css

@@ -0,0 +1,96 @@
+/* Avatar Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     ROOT CONTAINER
+     ============================================ */
+  
+  --avatar-root-display: inline-flex;
+  --avatar-root-align-items: center;
+  --avatar-root-justify-content: center;
+  --avatar-root-size: 48px;
+  --avatar-root-border-radius: 50%;
+  --avatar-root-bg: var(--theme-neutral-200);
+  --avatar-root-border-width: var(--theme-stroke-emphasis);
+  --avatar-root-border-color: var(--theme-surface-canvas);
+  --avatar-root-shadow: var(--shadow-sm);
+  
+  /* ============================================
+     IMAGE
+     ============================================ */
+  
+  --avatar-image-width: 100%;
+  --avatar-image-height: 100%;
+  --avatar-image-object-fit: cover;
+  
+  /* ============================================
+     FALLBACK
+     ============================================ */
+  
+  --avatar-fallback-display: flex;
+  --avatar-fallback-align-items: center;
+  --avatar-fallback-justify-content: center;
+  --avatar-fallback-width: 100%;
+  --avatar-fallback-height: 100%;
+  --avatar-fallback-bg: var(--theme-primary-500);
+  --avatar-fallback-color: var(--theme-text-on-primary);
+  --avatar-fallback-font-family: var(--theme-maximize-md-font-family);
+  --avatar-fallback-font-size: var(--theme-maximize-md-font-size);
+  --avatar-fallback-font-weight: var(--theme-maximize-md-font-weight);
+  --avatar-fallback-line-height: var(--theme-maximize-md-line-height);
+  --avatar-fallback-letter-spacing: var(--theme-maximize-md-letter-spacing);
+  --avatar-fallback-text-transform: uppercase;
+  --avatar-fallback-user-select: none;
+  
+  /* ============================================
+     SIZE VARIANTS
+     ============================================ */
+  
+  --avatar-size-xs: 32px;
+  --avatar-size-sm: 40px;
+  --avatar-size-md: 48px;
+  --avatar-size-lg: 64px;
+  --avatar-size-xl: 96px;
+  
+  --avatar-font-family-xs: var(--theme-maximize-xs-font-family);
+  --avatar-font-size-xs: var(--theme-maximize-xs-font-size);
+  --avatar-font-weight-xs: var(--theme-maximize-xs-font-weight);
+  --avatar-line-height-xs: var(--theme-maximize-xs-line-height);
+  --avatar-letter-spacing-xs: var(--theme-maximize-xs-letter-spacing);
+  --avatar-font-family-sm: var(--theme-maximize-sm-font-family);
+  --avatar-font-size-sm: var(--theme-maximize-sm-font-size);
+  --avatar-font-weight-sm: var(--theme-maximize-sm-font-weight);
+  --avatar-line-height-sm: var(--theme-maximize-sm-line-height);
+  --avatar-letter-spacing-sm: var(--theme-maximize-sm-letter-spacing);
+  --avatar-font-family-md: var(--theme-maximize-md-font-family);
+  --avatar-font-size-md: var(--theme-maximize-md-font-size);
+  --avatar-font-weight-md: var(--theme-maximize-md-font-weight);
+  --avatar-line-height-md: var(--theme-maximize-md-line-height);
+  --avatar-letter-spacing-md: var(--theme-maximize-md-letter-spacing);
+  --avatar-font-family-lg: var(--theme-maximize-lg-font-family);
+  --avatar-font-size-lg: var(--theme-maximize-lg-font-size);
+  --avatar-font-weight-lg: var(--theme-maximize-lg-font-weight);
+  --avatar-line-height-lg: var(--theme-maximize-lg-line-height);
+  --avatar-letter-spacing-lg: var(--theme-maximize-lg-letter-spacing);
+  --avatar-font-family-xl: var(--theme-maximize-2xl-font-family);
+  --avatar-font-size-xl: var(--theme-maximize-2xl-font-size);
+  --avatar-font-weight-xl: var(--theme-maximize-2xl-font-weight);
+  --avatar-line-height-xl: var(--theme-maximize-2xl-line-height);
+  --avatar-letter-spacing-xl: var(--theme-maximize-2xl-letter-spacing);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --avatar-root-bg: var(--theme-neutral-300);
+    --avatar-root-border-color: var(--theme-neutral-100);
+  }
+}
+
+[data-theme='dark'] {
+  --avatar-root-bg: var(--theme-neutral-300);
+  --avatar-root-border-color: var(--theme-neutral-100);
+}

package/dist/styles/semantic/badge.css

@@ -0,0 +1,16 @@
+/* Badge Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     BADGE TOKENS
+     ============================================ */
+  
+  --badge-height: 20px;
+  --badge-padding-inline: var(--space-inline-xs);
+  --badge-font-family: var(--theme-font-base-label-font-family);
+  --badge-font-size: var(--theme-font-base-label-font-size);
+  --badge-border-radius: var(--theme-radius-pill);
+  --badge-font-weight: var(--theme-font-base-label-font-weight);
+  --badge-line-height: var(--theme-font-base-label-line-height);
+  --badge-letter-spacing: var(--theme-font-base-label-letter-spacing);
+}

package/dist/styles/semantic/button.css

@@ -0,0 +1,145 @@
+/* Button Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     BASE BUTTON — control primary (body + medium)
+     ============================================ */
+  
+  --button-display: inline-flex;
+  --button-align-items: center;
+  --button-justify-content: center;
+  --button-gap: var(--theme-gap-control);
+  --button-height: var(--input-height); /* Reuse input height for consistency */
+  --button-padding-inline: var(--theme-control-padding-inline);
+  --button-font-family: var(--theme-font-base-trigger-font-family);
+  --button-font-size: var(--theme-font-base-trigger-font-size);
+  --button-font-weight: var(--theme-font-base-trigger-font-weight);
+  --button-line-height: var(--theme-font-base-trigger-line-height);
+  --button-letter-spacing: var(--theme-font-base-trigger-letter-spacing);
+  --button-border-radius: var(--theme-radius-pill);
+  --button-border-width: var(--theme-stroke-default);
+  --button-transition: all 0.2s ease;
+  --button-cursor: pointer;
+  
+  /* ============================================
+     SOLID VARIANT (primary)
+     ============================================ */
+  
+  --button-solid-bg: var(--theme-primary-600);
+  --button-solid-color: var(--theme-text-on-primary);
+  --button-solid-border-color: var(--theme-primary-600);
+  
+  --button-solid-bg-hover: var(--theme-primary-700);
+  --button-solid-border-color-hover: var(--theme-primary-700);
+  
+  --button-solid-bg-active: var(--theme-primary-800);
+  --button-solid-border-color-active: var(--theme-primary-800);
+  
+  --button-solid-shadow-focus: var(--theme-focus-shadow-3px-primary);
+  
+  /* ============================================
+     OUTLINE VARIANT
+     ============================================ */
+  
+  --button-outline-bg: transparent;
+  --button-outline-color: var(--theme-primary-600);
+  --button-outline-border-color: var(--theme-primary-600);
+  
+  --button-outline-bg-hover: var(--theme-primary-50);
+  --button-outline-color-hover: var(--theme-primary-700);
+  --button-outline-border-color-hover: var(--theme-primary-700);
+  
+  --button-outline-bg-active: var(--theme-primary-100);
+  
+  --button-outline-shadow-focus: var(--theme-focus-shadow-3px-primary);
+  
+  /* ============================================
+     GHOST VARIANT
+     ============================================ */
+  
+  --button-ghost-bg: transparent;
+  --button-ghost-color: var(--theme-primary-600);
+  --button-ghost-border-color: transparent;
+  
+  --button-ghost-bg-hover: var(--theme-primary-50);
+  --button-ghost-color-hover: var(--theme-primary-700);
+  
+  --button-ghost-bg-active: var(--theme-primary-100);
+  
+  --button-ghost-shadow-focus: var(--theme-focus-shadow-3px-primary);
+  
+  /* ============================================
+     DISABLED STATE
+     ============================================ */
+  
+  --button-disabled-opacity: 0.5;
+  --button-disabled-cursor: not-allowed;
+  
+  /* ============================================
+     SIZE VARIANTS
+     ============================================ */
+  
+  /* Extra Small — overline scale */
+  --button-height-xs: var(--theme-control-height-xs);
+  --button-padding-inline-xs: var(--theme-control-padding-inline-xs);
+  --button-font-family-xs: var(--theme-font-minimize-font-family);
+  --button-font-size-xs: var(--theme-font-minimize-font-size);
+  --button-font-weight-xs: var(--font-weight-medium);
+  --button-line-height-xs: var(--theme-font-minimize-line-height);
+  --button-letter-spacing-xs: var(--theme-font-minimize-letter-spacing);
+  --button-gap-xs: var(--theme-gap-control-xs);
+  --button-icon-size-xs: 14px;
+  
+  /* Small — caption + medium */
+  --button-height-sm: var(--theme-control-height-sm);
+  --button-padding-inline-sm: var(--theme-control-padding-inline-sm);
+  --button-font-family-sm: var(--theme-font-condense-font-family);
+  --button-font-size-sm: var(--theme-font-condense-font-size);
+  --button-font-weight-sm: var(--font-weight-medium);
+  --button-line-height-sm: var(--theme-font-condense-line-height);
+  --button-letter-spacing-sm: var(--theme-font-condense-letter-spacing);
+  --button-gap-sm: var(--theme-gap-control-sm);
+  --button-icon-size-sm: 16px;
+  
+  /* Medium — same as default control primary */
+  --button-height-md: var(--theme-control-height-md);
+  --button-padding-inline-md: var(--theme-control-padding-inline);
+  --button-font-family-md: var(--theme-font-base-trigger-font-family);
+  --button-font-size-md: var(--theme-font-base-trigger-font-size);
+  --button-font-weight-md: var(--theme-font-base-trigger-font-weight);
+  --button-line-height-md: var(--theme-font-base-trigger-line-height);
+  --button-letter-spacing-md: var(--theme-font-base-trigger-letter-spacing);
+  --button-gap-md: var(--theme-gap-control);
+  --button-icon-size-md: 20px;
+  
+  /* Large — body-lead + medium */
+  --button-height-lg: var(--theme-control-height-lg);
+  --button-padding-inline-lg: var(--theme-control-padding-inline-lg);
+  --button-font-family-lg: var(--theme-font-magnify-font-family);
+  --button-font-size-lg: var(--theme-font-magnify-font-size);
+  --button-font-weight-lg: var(--font-weight-medium);
+  --button-line-height-lg: var(--theme-font-magnify-line-height);
+  --button-letter-spacing-lg: var(--theme-font-magnify-letter-spacing);
+  --button-gap-lg: var(--theme-gap-control);
+  --button-icon-size-lg: 24px;
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --button-outline-bg-hover: var(--theme-neutral-100);
+    --button-outline-bg-active: var(--theme-neutral-200);
+    --button-ghost-bg-hover: var(--theme-neutral-100);
+    --button-ghost-bg-active: var(--theme-neutral-200);
+  }
+}
+
+[data-theme='dark'] {
+  --button-outline-bg-hover: var(--theme-neutral-100);
+  --button-outline-bg-active: var(--theme-neutral-200);
+  --button-ghost-bg-hover: var(--theme-neutral-100);
+  --button-ghost-bg-active: var(--theme-neutral-200);
+}

package/dist/styles/semantic/card.css

@@ -0,0 +1,14 @@
+/* Card Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     CARD TOKENS
+     ============================================ */
+  
+  --card-bg: var(--surface-base);
+  --card-border-color: var(--border-default);
+  --card-border-width: var(--theme-stroke-default);
+  --card-border-radius: var(--theme-radius-surface);
+  --card-padding: var(--space-6);
+  --card-shadow: var(--shadow-base);
+}

package/dist/styles/semantic/checkbox-group.css

@@ -0,0 +1,18 @@
+/* Checkbox Group Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     CHECKBOX GROUP CONTAINER
+     ============================================ */
+  
+  --checkbox-group-display: flex;
+  --checkbox-group-flex-direction: column;
+  --checkbox-group-gap: var(--space-0-5);
+  
+  /* ============================================
+     DISABLED STATE
+     ============================================ */
+  
+  --checkbox-group-disabled-opacity: 0.6;
+  --checkbox-group-disabled-cursor: not-allowed;
+}

package/dist/styles/semantic/checkbox.css

@@ -0,0 +1,117 @@
+/* Checkbox Component Tokens - Mojave Theme */
+
+:root {
+  /* ============================================
+     ROOT CONTAINER
+     ============================================ */
+  
+  --checkbox-root-display: inline-flex;
+  --checkbox-root-align-items: center;
+  --checkbox-root-gap: var(--space-2);
+  
+  /* ============================================
+     CHECKBOX INDICATOR
+     ============================================ */
+  
+  --checkbox-indicator-size: 20px;
+  --checkbox-indicator-border-radius: var(--theme-radius-box);
+  --checkbox-indicator-border-width: var(--theme-stroke-default);
+  --checkbox-indicator-border-color: var(--theme-neutral-400);
+  --checkbox-indicator-bg: var(--theme-surface-canvas);
+  --checkbox-indicator-transition: all 0.2s ease;
+  
+  /* Hover state */
+  --checkbox-indicator-border-color-hover: var(--theme-neutral-600);
+  
+  /* Checked state */
+  --checkbox-indicator-bg-checked: var(--theme-primary-600);
+  --checkbox-indicator-border-color-checked: var(--theme-primary-600);
+  
+  /* Focus state */
+  --checkbox-indicator-shadow-focus: var(--theme-focus-shadow-3px-primary);
+  
+  /* Disabled state */
+  --checkbox-indicator-opacity-disabled: 0.5;
+  --checkbox-indicator-cursor-disabled: not-allowed;
+  
+  /* ============================================
+     CHECKBOX ICON
+     ============================================ */
+  
+  --checkbox-icon-size: 14px;
+  --checkbox-icon-color: var(--theme-text-on-primary);
+  
+  /* ============================================
+     LABEL
+     ============================================ */
+  
+  --checkbox-label-font-family: var(--theme-font-base-font-family);
+  --checkbox-label-font-size: var(--theme-font-base-font-size);
+  --checkbox-label-font-weight: var(--theme-font-base-font-weight);
+  --checkbox-label-line-height: var(--theme-font-base-line-height);
+  --checkbox-label-letter-spacing: var(--theme-font-base-letter-spacing);
+  --checkbox-label-color: var(--text-primary);
+  --checkbox-label-cursor: pointer;
+  
+  /* Disabled label */
+  --checkbox-label-color-disabled: var(--text-disabled);
+  --checkbox-label-cursor-disabled: not-allowed;
+  
+  /* ============================================
+     SIZE VARIANTS
+     ============================================ */
+  
+  --checkbox-size-sm: 12px;
+  --checkbox-size-lg: 24px;
+  
+  --checkbox-icon-size-sm: 8px;
+  --checkbox-icon-size-lg: 16px;
+  
+  --checkbox-label-font-family-sm: var(--theme-font-condense-font-family);
+  --checkbox-label-font-size-sm: var(--theme-font-condense-font-size);
+  --checkbox-label-font-weight-sm: var(--theme-font-condense-font-weight);
+  --checkbox-label-line-height-sm: var(--theme-font-condense-line-height);
+  --checkbox-label-letter-spacing-sm: var(--theme-font-condense-letter-spacing);
+  --checkbox-label-font-family-lg: var(--theme-font-magnify-font-family);
+  --checkbox-label-font-size-lg: var(--theme-font-magnify-font-size);
+  --checkbox-label-font-weight-lg: var(--theme-font-magnify-font-weight);
+  --checkbox-label-line-height-lg: var(--theme-font-magnify-line-height);
+  --checkbox-label-letter-spacing-lg: var(--theme-font-magnify-letter-spacing);
+  
+  /* ============================================
+     OUTLINE VARIANT
+     ============================================ */
+  
+  --checkbox-outline-bg: transparent;
+  --checkbox-outline-checked-bg: transparent;
+  --checkbox-outline-checked-icon-color: var(--theme-primary-600);
+  --checkbox-outline-disabled-checked-icon-color: var(--theme-neutral-500);
+  
+  /* ============================================
+     CIRCULAR VARIANT
+     ============================================ */
+  
+  --checkbox-circular-border-radius: var(--theme-radius-pill);
+}
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --checkbox-indicator-border-color: var(--theme-neutral-600);
+    --checkbox-indicator-bg: var(--theme-neutral-100);
+    
+    /* Outline variant in dark mode */
+    --checkbox-outline-checked-icon-color: var(--theme-primary-400);
+  }
+}
+
+[data-theme='dark'] {
+  --checkbox-indicator-border-color: var(--theme-neutral-600);
+  --checkbox-indicator-bg: var(--theme-neutral-100);
+  
+  /* Outline variant in dark mode */
+  --checkbox-outline-checked-icon-color: var(--theme-primary-400);
+}