.bg, .hover-bg:hover, .focus-bg:focus {
    background-color: var(--color) !important;
}

.bg-light, .hover-bg-light:hover, .focus-bg-light:focus {
    background-color: var(--color-light) !important;
}

.bg-dark, .hover-bg-dark:hover, .focus-bg-dark:focus {
    background-color: var(--color-dark) !important;
}

.bg-link, .hover-bg-link:hover, .focus-bg-link:focus {
    background-color: var(--color-link) !important;
}


.color, .hover:hover, .focus-color:focus {
    color: var(--color);
}

.color-light, .hover-light:hover, .focus-light:focus {
    color: var(--color-light);
}

.color-dark, .hover-dark:hover, .focus-dark:focus {
    color: var(--color-dark);
}

.color-link, .hover-link:hover, .focus-link:focus {
    color: var(--color-link);
}


.border-color, .hover-border:hover, .focus-border:focus {     
    border-color: var(--color);
}
.border-light, .hover-border-light:hover, .focus-border-light:focus {
    border-color: var(--color-light) !important;
}
.border-dark, .hover-border-dark:hover, .focus-border-dark:focus {
    border-color: var(--color-dark) !important;
}
.border-link, .hover-border-link:hover, .focus-border-link:focus {
    border-color: var(--color-link) !important;
}


.ring, .hover-ring:hover, .focus-ring:focus {    
	--tw-ring-color: var(--color);
}
.ring-light, .hover-ring-light:hover, .focus-ring-light:focus { 
	--tw-ring-color: var(--color-light);
}
.ring-dark, .hover-ring-dark:hover, .focus-ring-dark:focus { 
	--tw-ring-color: var(--color-dark);
}
.ring-link, .hover-ring-link:hover, .focus-ring-link:focus { 
	--tw-ring-color: var(--color-link);
}


/* # Tweaks */

.text-white-50 {
  color: rgba(255, 255, 255, 0.5);
}
.bg-white-50 {
  background-color: rgba(255, 255, 255, 0.5);
}
.bg-black-50 {
  background-color: rgba(0, 0, 0, 0.5);
}
.ring-white-50 {
  --tw-ring-color: rgba(255, 255, 255, 0.5);
}

.dark .dark\:text-gray-400 {
    --tw-text-opacity: 1;
    color: rgba(156,163,175,var(--tw-text-opacity));
}

/* # Renk */

body {
	--color: color-mix(in srgb, var(--color1), #000 1%) !important;
	--color-light: color-mix(in srgb, var(--color), #fff 50%) !important;
	--color-dark: color-mix(in srgb, var(--color), #000000 50%) !important;
	--color-link: color-mix(in srgb, var(--color), #000000 25%) !important;
}

.dark body {
	--color: color-mix(in srgb, var(--color1), #000 30%) !important;
	--color-light: color-mix(in srgb, var(--color), #fff 50%) !important;
	--color-dark: color-mix(in srgb, var(--color), #000000 50%) !important;
	--color-link: color-mix(in srgb, var(--color), #fff 25%) !important;
}