:root {
    /* || Non-Interactive / Background */
    --noninteractive-bg-primary: var(--neutral-0);
    --noninteractive-bg-primary-inverse: var(--neutral-1000);
    --noninteractive-bg-secondary: var(--neutral-1000);
    --noninteractive-bg-secondary-inverse: var(--neutral-0);

    /* || Non-Interactive / Border */
    --noninteractive-border-primary: var(--neutral-900);
    --noninteractive-border-primary-inverse: var(--neutral-1000);
    --noninteractive-border-secondary: var(--neutral-25);
    --noninteractive-border-secondary-inverse: var(--neutral-0);
    --noninteractive-border-tertiary: var(--neutral-500);

    /* || Non-Interactive / Icon */
    --noninteractive-icon-primary: var(--neutral-900);
    --noninteractive-icon-secondary: var(--neutral-25);
    --noninteractive-icon-tertiary: var(--neutral-500);

    /* || Non-Interactive / Text */
    --noninteractive-text-primary: var(--neutral-50);
    --noninteractive-text-primary-inverse: var(--neutral-900);
    --noninteractive-text-secondary: var(--neutral-900);
    --noninteractive-text-secondary-inverse: var(--neutral-50);
    --noninteractive-text-tertiary: var(--neutral-600);
    
    /* || Interactive / Background */
    --interactive-bg-default: var(--neutral-900);
    --interactive-bg-hover: var(--neutral-700);
    --interactive-bg-active: var(--neutral-600);
    --interactive-bg-focus: var(--neutral-200);
    --interactive-bg-inactive: var(--neutral-25);

    /* || Interactive / Border */
    --interactive-border-default: var(--neutral-900);
    --interactive-border-hover: var(--neutral-700);
    --interactive-border-active: var(--neutral-600);
    --interactive-border-focus: var(--neutral-200);
    --interactive-border-inactive: var(--neutral-25);
    --interactive-border-error: var(--neutral-500);

    /* || Interactive / Icon */
    --interactive-icon-default: var(--neutral-900);
    --interactive-icon-hover: var(--neutral-700);
    --interactive-icon-active: var(--neutral-600);
    --interactive-icon-focus: var(--neutral-200);
    --interactive-icon-inactive: var(--neutral-25);

    /* || Interactive / Text */
    --interactive-text-default: var(--neutral-900);
    --interactive-text-hover: var(--neutral-700);
    --interactive-text-active: var(--neutral-600);
    --interactive-text-focus: var(--neutral-200);
    --interactive-text-inactive: var(--neutral-25);
}

:root.dark {
    /* || Non-Interactive / Background */
    --noninteractive-bg-primary: var(--neutral-0);
    --noninteractive-bg-primary-inverse: var(--neutral-1000);
    --noninteractive-bg-secondary: var(--neutral-1000);
    --noninteractive-bg-secondary-inverse: var(--neutral-0);

    /* || Non-Interactive / Border */
    --noninteractive-border-primary: var(--neutral-900);
    --noninteractive-border-primary-inverse: var(--neutral-1000);
    --noninteractive-border-secondary: var(--neutral-25);
    --noninteractive-border-secondary-inverse: var(--neutral-0);
    --noninteractive-border-tertiary: var(--neutral-500);

    /* || Non-Interactive / Icon */
    --noninteractive-icon-primary: var(--neutral-900);
    --noninteractive-icon-secondary: var(--neutral-25);
    --noninteractive-icon-tertiary: var(--neutral-500);

    /* || Non-Interactive / Text */
    --noninteractive-text-primary: var(--neutral-50);
    --noninteractive-text-primary-inverse: var(--neutral-900);
    --noninteractive-text-secondary: var(--neutral-900);
    --noninteractive-text-secondary-inverse: var(--neutral-50);
    --noninteractive-text-tertiary: var(--neutral-600);
    
    /* || Interactive / Background */
    --interactive-bg-default: var(--neutral-900);
    --interactive-bg-hover: var(--neutral-700);
    --interactive-bg-active: var(--neutral-600);
    --interactive-bg-focus: var(--neutral-200);
    --interactive-bg-inactive: var(--neutral-25);

    /* || Interactive / Border */
    --interactive-border-default: var(--neutral-900);
    --interactive-border-hover: var(--neutral-700);
    --interactive-border-active: var(--neutral-600);
    --interactive-border-focus: var(--neutral-200);
    --interactive-border-inactive: var(--neutral-25);
    --interactive-border-error: var(--neutral-500);

    /* || Interactive / Icon */
    --interactive-icon-default: var(--neutral-900);
    --interactive-icon-hover: var(--neutral-700);
    --interactive-icon-active: var(--neutral-600);
    --interactive-icon-focus: var(--neutral-200);
    --interactive-icon-inactive: var(--neutral-25);

    /* || Interactive / Text */
    --interactive-text-default: var(--neutral-900);
    --interactive-text-hover: var(--neutral-700);
    --interactive-text-active: var(--neutral-600);
    --interactive-text-focus: var(--neutral-200);
    --interactive-text-inactive: var(--neutral-25);
}