:root {
    --e-radius: .667rem;
    --color-sf-transparent: rgba(255,255,255,0);
    --color-sf-white: rgb(255 255 255);
    --color-sf-black: rgb(0 0 0 );
    /* Background colors - Light mode grays */
    --color-sf-content-bg-color-alt1: rgba(255,255,255,0);
    --color-sf-content-bg-color-alt2: var(--color-primary-50);
    --color-sf-content-bg-color-alt3: var(--color-primary-200);
    --color-sf-content-bg-color-alt4: var(--color-primary-400);
    --color-sf-content-bg-color-alt5: var(--color-primary-500);
    --color-sf-content-bg-color-hover: var(--color-primary-50);
    --color-sf-content-bg-color-pressed: var(--color-primary-100);
    --color-sf-content-bg-color-focus: var(--color-primary-50);
    --color-sf-content-bg-color-selected: var(--color-primary-200);
    --color-sf-content-bg-color-dragged: var(--color-primary-100);
    /* Flyout backgrounds */
    --color-sf-flyout-bg-color-hover: var(--color-primary-100);
    --color-sf-flyout-bg-color-pressed: var(--color-primary-200);
    --color-sf-flyout-bg-color-focus: var(--color-primary-50);
    --color-sf-flyout-bg-color-selected: var(--color-primary-100);
    /* Table backgrounds */
    --color-sf-table-bg-color-hover: var(--color-primary-50);
    --color-sf-table-bg-color-pressed: var(--color-primary-100);
    --color-sf-table-bg-color-selected: var(--color-primary-200);
    /* TreeView */
    --color-sf-treeview-item-active-hover-bg: var(--color-primary-200);
    /* Text colors */
    --color-sf-content-text-color: var(--text-color);
    --color-sf-content-text-color-alt1: var(--text-color);
    --color-sf-content-text-color-alt2: var(--text-color);
    --color-sf-content-text-color-alt3: var(--text-color);
    --color-sf-content-text-color-alt4: var(--text-color);
    --color-sf-content-text-color-hover: var(--color-primary-900);
    --color-sf-content-text-color-pressed: var(--color-primary-900);
    --color-sf-content-text-color-focus: var(--color-primary-900);
    --color-sf-content-text-color-selected: var(--color-primary-900);
    --color-sf-content-text-color-dragged: var(--color-primary-900);
    --color-sf-content-text-color-disabled: var(--color-primary-400);
    --color-sf-placeholder-text-color: var(--color-primary-500);
    /* Flyout text colors */
    --color-sf-flyout-text-color: var(--color-primary-900);
    --color-sf-flyout-text-color-hover: var(--color-primary-900);
    --color-sf-flyout-text-color-pressed: var(--color-primary-900);
    --color-sf-flyout-text-color-focus: var(--color-primary-900);
    --color-sf-flyout-text-color-selected: var(--color-primary-900);
    --color-sf-flyout-text-color-disabled: var(--color-primary-400);
    /* Table text colors */
    --color-sf-table-text-color-hover: var(--color-primary-900);
    --color-sf-table-text-color-pressed: var(--color-primary-900);
    --color-sf-table-text-color-selected: var(--color-primary-900);
    /* Icon colors */
    --color-sf-icon-color: var(--color-gray-700);
    --color-sf-icon-color-hover: var(--color-gray-600);
    --color-sf-icon-color-pressed: var(--color-gray-500);
    --color-sf-icon-color-disabled: var(--color-gray-300);
    --color-sf-close-icon-color: var(--color-gray-700);
    --color-sf-close-icon-color-hover: var(--color-gray-600);
    --color-sf-close-icon-color-pressed: var(--color-gray-500);
    --color-sf-close-icon-color-disabled: var(--color-gray-300);
    /* Border colors */
    --color-sf-border: var(--color-gray-300);
    --color-sf-border-light: var(--color-gray-200);
    --color-sf-border-dark: var(--color-gray-400);
    --color-sf-border-hover: var(--color-gray-300);
    --color-sf-border-pressed: var(--color-gray-400);
    --color-sf-border-focus: var(--color-gray-300);
    --color-sf-border-selected: var(--color-gray-400);
    --color-sf-border-dragged: var(--color-gray-200);
    --color-sf-border-disabled: var(--color-gray-200);
    --color-sf-flyout-border: var(--color-gray-200);
    /* Secondary button */
    --color-sf-secondary-border-color: var(--color-primary-300);
    --color-sf-secondary-text-color: var(--text-color);
    --color-sf-secondary-bg-color-hover: var(--color-primary-100);
    --color-sf-secondary-border-color-hover: var(--color-primary-300);
    --color-sf-secondary-text-color-hover: var(--text-color);
    --color-sf-secondary-bg-color-pressed: var(--color-primary-200);
    --color-sf-secondary-border-color-pressed: var(--color-primary-300);
    --color-sf-secondary-text-color-pressed: var(--text-color);
    --color-sf-secondary-bg-color-focus: var(--color-primary-100);
    --color-sf-secondary-border-color-focus: var(--color-primary-300);
    --color-sf-secondary-text-color-focus: var(--text-color);
    --color-sf-secondary-border-color-disabled: var(--color-primary-200);
    --color-sf-secondary-text-color-disabled: var(--text-color);
    --color-sf-secondary-outline: var(--color-primary-300);
    /* Tooltip */
    --color-sf-tooltip-bg-color: var(--color-primary-900);
    --color-sf-tooltip-border: var(--color-primary-900);
    --color-sf-tooltip-text-color: var(--color-primary-50);
    /* AppBar */
    --color-sf-appbar-color-alt1: var(--color-primary-900);
    /* Diagram Palette */
    --color-sf-diagram-palette-hover-background: var(--color-primary-50);
    --color-sf-diagram-palette-selected-color: var(--color-primary-200);
    /* Rating */
    --color-sf-rating-selected-color: var(--color-primary-900);
    --color-sf-rating-unrated-color: var(--color-primary-200);
    --color-sf-rating-selected-disabled-color: var(--color-primary-400);
    --color-sf-rating-unrated-disabled-color: var(--color-primary-200);
    --color-sf-rating-unrated-hover-color: var(--color-primary-700);
    /* Message */
    --color-sf-msg-color: var(--color-primary-700);
    --color-sf-msg-bg-color: var(--color-primary-50);
    --color-sf-msg-color-alt1: var(--color-primary-900);
    --color-sf-msg-color-alt2: var(--color-primary-700);
    --color-sf-msg-bg-color-alt2: var(--color-primary-50);
    --color-sf-msg-icon-color: var(--color-primary-700);
    --color-sf-msg-icon-color-alt1: var(--color-primary-900);
    --color-sf-msg-close-icon-color: var(--color-primary-700);
    --color-sf-msg-close-icon-color-alt1: var(--color-primary-500);
    --color-sf-msg-close-icon-color-alt2: var(--color-primary-700);
    /* Chip Secondary */
    --color-sf-chip-secondary-bg-color: var(--color-primary-50);
    --color-sf-chip-secondary-icon-color: var(--color-primary-400);
    --color-sf-chip-secondary-border-color: var(--color-primary-100);
    --color-sf-chip-secondary-text-color: var(--color-primary-700);
    --color-sf-chip-secondary-bg-color-hover: var(--color-primary-50);
    --color-sf-chip-secondary-border-color-hover: var(--color-primary-200);
    --color-sf-chip-secondary-text-color-hover: var(--color-primary-700);
    --color-sf-chip-secondary-bg-color-pressed: var(--color-primary-200);
    --color-sf-chip-secondary-border-color-pressed: var(--color-primary-200);
    --color-sf-chip-secondary-text-color-pressed: var(--color-primary-700);
    --color-sf-chip-secondary-bg-color-disabled: var(--color-primary-50);
    --color-sf-chip-secondary-border-color-disabled: var(--color-primary-100);
    --color-sf-chip-secondary-text-color-disabled: var(--color-primary-400);
    /* Breadcrumb */
    --color-sf-breadcrumb-item-hover-color: var(--color-primary-700);
    --color-sf-breadcrumb-item-active-color: var(--color-primary-600);
    /* Primary color - using your primary colors */
    --color-sf-primary: var(--color-primary-600);
    --color-sf-primary-light: var(--color-primary-200);
    --color-sf-primary-bg-color: var(--color-primary-600);
    --color-sf-primary-bg-color-disabled: var(--color-gray-300);
    --color-sf-primary-border-color: var(--color-primary-600);
    --color-sf-primary-bg-color-hover: var(--color-primary-700);
    --color-sf-primary-border-color-hover: var(--color-primary-700);
    --color-sf-primary-bg-color-pressed: var(--color-primary-800);
    --color-sf-primary-border-color-pressed: var(--color-primary-800);
    --color-sf-primary-bg-color-focus: var(--color-primary-700);
    --color-sf-primary-border-color-focus: var(--color-primary-700);
    --color-sf-primary-outline: var(--color-primary-600);
}